Tessisamess

S	M	T	W	T	F	S
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

image preview: left sidebar | image preview: right sidebar |

Information

Hey guys, it's time for another layout remake! This time around I'm remaking Cerchio, an S1 Generator layout from 2014! I remember being really proud at the time because I'd gotten some pretty sketch stuff to work, haha. This time around things are more fluid, there's more padding on elements, and there are two sidebar options: One to center-align it like in the original, and one to bottom align it. This layout also features more link capabilities than the last, and you can put as much or little in your sidebar blurb as you like! Enjoy! ♥

Layout Coding

/*-- INTERSECTIONAL - TESSISAMESS - 2018 --*/
/*-- Credit me in profile if removing my credit link from main block --*/
/*-- Find more fun stuff at:tessisamess.insanejournal.com --*/

/* REPLACEMENTS */

:root{
	--darkest: #000; /* sidebar background, entry titles, poster info background, entry comments link, day name background on calendar */
	--darker: #222; /* page text */
	--dark: #333; /* sidebar nav link backgrounds */
	--medium: #999; /* entry date & tags */
	--lightest: #fff; /* entries background, poster info links, day name on calendar, sidebar text */
	--light-accent: #d8e0e3; /* page background, page links, blockquote background */
	--accent: #296d8e; /* sidebar border, sidebar title, sticky note title, entry links */

--main-font: Roboto Condensed,helvetica,arial,sans-serif;
	--headings: Roboto Condensed,helvetica,arial,sans-serif;
	--title-font: Broadcast;

--private: url(https://i.imgur.com/dJgLxi8.png)center left no-repeat!important;
	--locked: url(https://i.imgur.com/tIooCJT.png)center left no-repeat!important;
	--customs: url(https://i.imgur.com/LcxM0s0.png)center left no-repeat!important;
}

/* FONTS */

@font-face{font-family:Broadcast;src:url(https://dl.dropbox.com/s/1xvsf0ivv73xfp7/Broadcast_Matter.otf);}

@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:400;src:local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(https://fonts.gstatic.com/s/robotocondensed/v16/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQ.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* GENERAL */

body{margin:0;padding:0;background:var(--light-accent);font-family:var(--main-font);font-size:15px;color:var(--darker);}

blockquote{font-style:italic;background:var(--light-accent);padding:15px;}
h1,h2,h3,h4,h5,h6{margin:0;font-family:var(--headings);}

a, a:visited, a:active{color:var(--light-accent);text-decoration:none;}
a:hover{text-decoration:none;opacity:0.5;}

/* WHOLE PAGE CONTAINERS */

#container{background:transparent;}

.layout-two-column-left #alpha, .layout-two-column-right #alpha{margin:0 9vw 0 39vw;position:relative;z-index:2;min-height:100vh;}
.layout-two-column-left #beta, .layout-two-column-right #beta{float:none;width:auto;position:fixed;z-index:1;left:0;right:0;background:var(--darkest);border-top:8px solid var(--accent);}
.layout-two-column-left #beta{top:50%;transform:translateY(-50%);}
.layout-two-column-right #beta{bottom:0;}

/* HEADER */

#header{display:none;}

/* MAIN COLUMN */

#alpha{background:var(--lightest);border:none;box-shadow:0 0 5px 5px rgba(0,0,0,0.1);padding:0;}
#alpha-inner{padding:4vw;}

#alpha a, #alpha a:visited{color:var(--accent);}

.content-nav{margin:2vw 0 0 0;text-transform:uppercase;letter-spacing:2px;font-weight:bold;}
.nav-top{display:none;}
.nav-bottom, .entrypage{text-align:center;}

#tagpage-header{text-align:center;}
#tagpage-header h2{margin-bottom:2vw;}

.date-header{display:none;}

#column-footer{clear:both;}

/* STICKY NOTE */

#sticky-note .entry-inner{border:none;}
#sticky-note .entry-header{text-align:center;}
#sticky-note .entry-header h2{padding:0;font-family:var(--title-font);font-size:60px;font-weight:normal;color:var(--accent);}
#sticky-note .entry-text{min-height:0;padding:0;}
#sticky-note .entry-footer{display:none;}

.extra-links{display:flex;flex-wrap:wrap;justify-content:center;text-align:center;text-transform:uppercase;letter-spacing:1px;}
.extra-links a{width:23%;padding:2px;margin:3px;background:rgba(0,0,0,0.1);}

/* ENTRIES */

.entry{margin:0 0 2vw 0;padding:0 0 2vw 0;border-bottom:1px solid rgba(0,0,0,0.1);}

.entry-header{background:transparent;border:none;padding:0;}
.entry-header h3{padding:0;}
#alpha .entry-header a, #alpha .entry-header a:visited{color:var(--darkest);}

.entry-datetime{text-transform:uppercase;letter-spacing:1px;font-size:10px;color:var(--medium);}

.lj-view-friends .mid-entry-userpic{display:initial;float:left;text-align:center;padding:0 10px 0 0;position:relative;}
.mid-entry-userpic img{width:40px;height:40px;padding:3px;border:1px solid rgba(0,0,0,0.1);}
.outer-entry-userpic, .inner-entry-userpic{display:none;}

.pic-poster:before{content:'';display:block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid var(--darkest);margin:-10px auto 5px auto;}
.pic-poster{z-index:3;left:-30px;position:absolute;background:var(--darkest);margin-top:-30px;padding:5px;text-align:center;font-size:9px;letter-spacing:1px;text-transform:uppercase;display:block;width:95px;box-shadow:1px 1px 2px 0 rgba(0,0,0,0.2);opacity:0;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
.mid-entry-userpic:hover .pic-poster{opacity:1;margin-top:9px;}
.pic-poster img{display:none;}
.pic-poster a{color:var(--lightest)!important;}

.ljuser a[href*="profile"] img{display:none;}
.ljuser a[href*="profile"]:before{content:'@';}
.ljuser a[href*="asylum"][href*="profile"]:before{content:'#';}
.pic-poster a[href*="profile"]{display:none;}

.entry-content{margin-top:1vw;}
.entry-text{min-height:20px;overflow:hidden;line-height:1.7;text-align:justify;}

.ljtags{margin:1vw 0 0 0;text-transform:uppercase;letter-spacing:1px;font-size:10px;font-weight:bold;}
#alpha .ljtags a, #alpha .ljtags a:visited{color:var(--medium);}

.entry-metadata{display:none;}

.entry-linkbar{margin:1vw 0 0 0;font-size:0;text-align:right;}
.entry-linkbar ul{list-style:none;padding:0;}
.entry-linkbar li{display:inline;border:none;padding:0;margin:0;}
.entry-linkbar li a{margin-left:15px;display:inline-block;width:24px;height:24px;text-align:center;line-height:24px;font-weight:bold;overflow:hidden;border-radius:30px;border:2px solid rgba(0,0,0,0.05);color:var(--darkest)!important;}
.entry-linkbar li a[href*=reply]{background:rgba(0,0,0,0.05) url(https://i.imgur.com/4HDm2vx.png)center no-repeat;background-size:12px;}
.entry-linkbar li a[href$=html]{background:rgba(0,0,0,0.05) url(https://i.imgur.com/CqDacZM.png)center no-repeat;background-size:12px;}
.entry-linkbar li a[href*=editjournal]{background:rgba(0,0,0,0.05) url(https://i.imgur.com/brD8WR4.png)center no-repeat;background-size:12px;}
.entry-linkbar li a[href*=edittags]{background:rgba(0,0,0,0.05) url(https://i.imgur.com/nSm7Sij.png)center no-repeat;background-size:12px;}
.entry-linkbar li a[href*=comments]{background:rgba(0,0,0,0.05);font-size:9px;}
.entry-linkbar li a:hover{opacity:1;background-size:15px;}
.entry-linkbar li a[href*=memadd], .entry-linkbar li a[href*=tellafriend], .entry-linkbar li a[href*=subscriptions]{display:none;}

/* ARCHIVE VIEW */

.lj-view-archive .entry-content{margin-top:0;}
.yearlinks{text-align:center;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px;font-size:30px;color:rgba(0,0,0,0.5);}
.year{list-style:none;margin:0;padding:0;}
.year li{display:inline;padding:0;}

.lj-view-archive .entry-content{margin:0;}
.yeartable{border-collapse:separate;border:none;width:100%;}
td.monthlable, td.viewmonth{letter-spacing:2px;text-transform:uppercase;background:transparent!important;font-size:20px;}
td.monthlable{text-align:left;}
td.viewmonth{text-align:right;}
.dayname{letter-spacing:2px;text-transform:uppercase;text-align:center;background:var(--darkest)!important;color:var(--lightest);font-size:14px;}
.yeartable td{border:none!important;background:rgba(0,0,0,0.05);padding:5px;}

/* TAGS VIEW */

.lj-view-tags #alpha{padding:0;}

/* SIDEBAR */

#beta-inner{font-size:11px;color:var(--lightest);width:34vw;padding:2vw;position:relative;}

.module{padding:0;background:transparent;margin:0;border:none;}

.module-header{display:none;background:transparent;border:none;font-size:60px;line-height:1;}
.module-header h3{padding:0;font-weight:normal;font-family:var(--title-font);color:var(--accent);}
.module-header a, .module-header a:visited{color:var(--accent);}

.module-about{display:none;float:left;margin-right:15px;}
.module-about .module-content{padding:0;}
.userpic img{border:none;border-radius:100%;width:60px;height:60px;}

.username, .journalname, .usersite{display:none;}

.module-customtext .module-header{display:block;}
.module-customtext .module-content{padding:0 0 10px 0;text-transform:uppercase;letter-spacing:3px;}

.module-viewlinks{position:absolute;top:-25px;left:2vw;font-size:0;}
.module-viewlinks ul{list-style:none;margin:0;padding:0;display:flex;}
.module-viewlinks li{margin-right:9px;}
.module-viewlinks li a{display:block;width:40px;height:40px;line-height:40px;text-align:center;border-radius:100%;}
.module-viewlinks li:nth-of-type(1) a{background:var(--dark) url(https://i.imgur.com/T9zbBoB.png)center no-repeat;background-size:15px;}
.module-viewlinks li:nth-of-type(2) a{background:var(--dark) url(https://i.imgur.com/729usXf.png)center no-repeat;background-size:15px;}
.module-viewlinks li:nth-of-type(3) a{background:var(--dark) url(https://i.imgur.com/lHVzejZ.png)center no-repeat;background-size:15px;}
.module-viewlinks li:nth-of-type(4) a{background:var(--dark) url(https://i.imgur.com/EubFs7h.png)center no-repeat;background-size:15px;}
.module-viewlinks li a:hover{opacity:1;background-size:20px;}

.module-typelist ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;text-align:center;text-transform:uppercase;letter-spacing:1px;font-weight:bold;}
.module-typelist li{width:33.3%;}
.module-typelist li a{display:block;padding:3px;margin:3px;background:rgba(255,255,255,0.1);}

.module-layoutcredit{position:fixed;bottom:2vw;right:2vw;font-size:20px;font-weight:bold;}
.module-layoutcredit p{padding:0;margin:0;}

.module-pagesummary, .module-calendar, .module-categories, .module-customtext2, .module-syndicate, .module-powered, .module-ads{display:none;}

/* CONTENT FOOTER */

#content-footer{clear:both;height:0;}

/* ICON REPLACEMENTS */

img[src*="img/icon_private.gif"], img[src*="img/icon_protected.gif"], img[src*="img/icon_groups.gif"]{width:0!important;height:0!important;padding:16px 0 0 18px!important;}

img[src*="img/icon_private.gif"]{background:transparent var(--private);}
img[src*="img/icon_protected.gif"]{background:transparent var(--locked);}
img[src*="img/icon_groups.gif"]{background:transparent var(--customs);}

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title, then save.
♡ Fill in your Links List if desired, then save.
♡ Go to Look and Feel, choose Complete Style, then save.
♡ Go to Custom Options and choose the following options:

♡ Layout Type:
Two column (sidebar on left) for a center-aligned sidebar
Two column (sidebar on right) for a bottom-aligned sidebar
♡ Disable customized comment pages for your journal: Yes
♡ Fill in sticky note if desired. Check below for a custom span class for this journal's sticky and/or entry for block links as shown in the demo!
♡ Fill in custom sidebar module if desired. This is your sidebar title and subtitle/blurb.
♡ Person to credit if you have an individually created layout: ©
♡ URL to link the credit to: http://tessisamess.insanejournal.com/
♡ Custom stylesheet: Input the CSS provided and save!

Custom Block Links

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!

Tags: layouts, layouts: layout remakes, layouts: s2 complete style

Comments

(Comment)

maxicons

Sep. 17th, 2018 10:05 pm (UTC)

I love this!

tessisamess

Oct. 11th, 2018 12:32 am (UTC)

Tysm! :D

windsintheeast

Sep. 18th, 2018 11:52 am (UTC)

gorgeous!

Oct. 11th, 2018 12:31 am (UTC)

Ty! ♥

domains

Sep. 18th, 2018 11:53 pm (UTC)

this is hecking great

Heeee, ty ty!! ♥

takeshi

Sep. 22nd, 2018 01:01 am (UTC)

I'm using this on this journal, but I can't get the Broadcast Matter font to show up on mine. :/

Oct. 11th, 2018 12:28 am (UTC)

You'll want to move your title to the custom text's title instead of the content and you should be all set!

karin

Sep. 23rd, 2018 01:53 pm (UTC)

Hi! Thanks so much for this layout, I love it, and put it in this journal with a tiny edit to make Broadcast show up as the subject lines as well.

Just one thing - as the previous commenter says, there's a thing with the Broadcast font. For me it shows up but it takes maybe 5 seconds or more, before that it just shows as Times New Roman. It's the Dropbox link that is a bit slow (there's a thing at the bottom of the page saying "waiting for dl.dropbox.com), so I just wanted to check in and see if you have any idea if it's something on the coding end or if it's my computer that's slow?

Aw ty, I'm glad you like it!

Unfortunately, that's just a hazard of hosting on Dropbox. :\ IJ is super finicky about where it allows outside files from, but I know there are other options for importing a font URL; I'm just not sure what to recommend since my backup would be to just store it on my web host, yk?

Oct. 11th, 2018 03:30 pm (UTC)

I actually do have my own host! I downloaded it from your Dropbox and uploaded it there and now it doesn't show up at all... is there anything else I need to change in the code you think? Usually I can figure out how to alter code just fine but external fonts like this is a thing I can't do well for some reason, so sorry about all the questions!

(If you need to look at the code in question to answer this, just view source on the journal I'm commenting from btw.)

twincidentally

Oct. 7th, 2018 04:22 am (UTC)

This remake is absolutely stunning! I love the new colors and font choices. It feels lite and modern. Love it!

Oct. 11th, 2018 12:29 am (UTC)

Aw, thank you so much!!

Oct. 23rd, 2018 12:51 pm (UTC)

i love this! however, is there a way to display the userpics?

Oct. 23rd, 2018 07:13 pm (UTC)

Absolutely! Just remove the red bit and you're all set!


.lj-view-friends .mid-entry-userpic{display:initial;float:left;text-align:center;padding:0 10px 0 0;position:relative;}

Oct. 23rd, 2018 07:19 pm (UTC)

PERFECT! Thank you! Using it here: http://asylums.insanejournal.com/shadows_rpg/

Oct. 23rd, 2018 07:23 pm (UTC)

Ooooh nice!!!

Oct. 29th, 2018 09:50 pm (UTC)

one more silly Q. is there a way to add the "previous" entry link when you click on the Friends link? :)

Oct. 29th, 2018 09:53 pm (UTC)

It should automatically generate! If it's not showing up it's likely that your friends page doesn't have enough entries yet to need one. (Friends pages typically generate the past week-ish of entries from new friends rather than everything those friends have posts, from what I've seen.)

Oct. 29th, 2018 10:02 pm (UTC)

that makes sense! thanks!

Layouts, Codes, Tutorials, & Resources

Hey there, I'm Tess!

Need an invite?

Navigation

Please Note:

Tags

Layout By

Profile