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!

nightsin

Dec. 20th, 2018 04:37 am (UTC)

I love this! And I'm using it here, but I think I've broken something? I'm not sure what. The nav-links (Recent, Profile, etc) are missing, and I can't find what I've done wrong.

Dec. 20th, 2018 06:25 am (UTC)

Thank you! Looks like the HTML for the navigation isn't showing up on your page structure at all, so I'd check your sidebar dropdown setup on the customize page and make sure one of them has it specified.

Dec. 20th, 2018 06:42 am (UTC)

Omg, I'm such a ditz.

Any idea why the sidebar is so much thicker than normal? I was hoping the Nav Links would fix both problems, but no such luck.

Dec. 20th, 2018 06:45 am (UTC)

LOL it happens!

For that, I'd check the customtext box your content is in and remove any hard returns (enter key) that don't need to be there. Those boxes are super finicky about that, so unwanted whitespace is usually that.

Dec. 20th, 2018 07:06 am (UTC)

You're a goddess, thank you! Now if I can just get my background images to behave!

alittlebird

Dec. 24th, 2018 04:49 am (UTC)

This is probably a silly question, but how would I add a repeating background image?

Dec. 24th, 2018 04:52 am (UTC)

Nah, not silly at all! Just change the following in body:

background:var(--light-accent);

To this:

background:var(--light-accent) url(BG_URL)center repeat fixed;

And you should be all set!

Dec. 24th, 2018 04:58 am (UTC)

I'm not sure what I'm doing wrong, but it still isn't displaying correctly.

Dec. 24th, 2018 05:01 am (UTC)

Ah, user error on my part! Thank you very much for your help!

nightcalling

Feb. 3rd, 2019 04:46 am (UTC)

So after a ton of work, I have this game mostly done... except the nav icons on the sticky look weird. Is there a fix for this?

miicchael

Feb. 24th, 2019 02:42 pm (UTC)

So, I have possibly broken this in my attempt to edit it, but I can't seem to get the friends page to work properly. It's possibly a simple fix, since the layout is working perfectly fine in a different journal, but this is what it looks like for the first six or so friends entries here.. after those this is all I get, and the option to go back further is no longer there.. even after I remove all customizations, this is still what I get. I'm sure I'm missing a setting somewhere.

Feb. 25th, 2019 11:37 pm (UTC)

Hmmm, that's weird. Is someone possibly using a noembed in their entry on your friends page? I can't see the issue on your current friends page since the entries are locked, so is there any way you could view source on the page that's got the issue and copy the contents for me? Email or pastebin is fine!

Feb. 26th, 2019 07:04 pm (UTC)

Here you are. I can now go further into the friends page before it breaks on me. It really may be one of the entries after all. Thanks for checking up on it, though.

Feb. 26th, 2019 08:07 pm (UTC)

Yeah, no problem!! ♥ After digging around in the contents a bit, it's definitely that some people are using broken codes that don't properly close all tags used. From what I saw, anytime an entry footer was misaligned, the entry before that (with a normally-behaving entry footer) was the culprit, and deleting that entry fixed the contents f the page until the next broken code showed up (I found two on the version you gave me.)

I wish I had an actual fix for you, I'm sorry! Maybe toss up a note in OOC and ask people to give their codes a quick double check before posting since they're causing unintended effects on people's ability to read through posts?

Mar. 1st, 2019 02:45 pm (UTC)

No worries, even if there isn't much you can go on your end, I do appreciate you looking. The entries have gone far enough into the friends page that it's no longer broken.. hopefully no more of those entries show up. Thanks, again! :)

honeyspider

May. 5th, 2019 02:06 am (UTC)

Using it with some edits for

he_protec, thanks!

Layouts, Codes, Tutorials, & Resources

Hey there, I'm Tess!

Need an invite?

Navigation

Please Note:

Tags

Layout By

Profile