Tessisamess - Layout: Punch it up!

image preview |

Information

Hey guys! The first layout of the month is something I haven't done since my start making layouts on over on LJ: A layout with a horizontally positioned sidebar! This layout will display any four sidebar blocks you need along the top under your header, and they will not squish or break on mobile!

Choose right sidebar for a horizontal top sidebar, or if you're loving this layout but just aren't into that sort of page setup, you can choose left sidebar for a vertically positioned display of all sidebar modules! This layout also features a no-sidebar version if you don't need either. Enjoy! ♥

Layout Coding

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

/* GENERAL CLASSES */

@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3VtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;}

@font-face{font-family:'Open Sans';font-style:normal;font-weight:800;src:local('Open Sans ExtraBold'), local('OpenSans-ExtraBold'), url(https://fonts.gstatic.com/s/opensans/v15/EInbV5DfGHOiMmvb1Xr-hugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;}

@font-face{font-family:jetamie;src:url(https://dl.dropbox.com/s/ls7jvrk6jt8o8rt/Je-Taime.otf);}

body{color:rgba(255,255,255,0.7);background:#111;margin:0;padding:0;font-family:Open Sans,helvetica,aria,sans-serif;font-size:15px;overflow-x:hidden;border-bottom:15px solid #F5BE02;}
blockquote{font-style:italic;}
h1, h2, h3, h4{font-family:jetamie,georgia,serif;font-weight:normal;}
hr{margin:10px 10%;border:none;height:1px;background-image:linear-gradient(to right, rgba(245,190,2,0), rgba(245,190,2,0.75), rgba(245,190,2,0));opacity:0.4;}
a, a:visited, a:active{color:#F5BE02;text-decoration:none;}
a:hover{text-decoration:none;opacity:0.5;}

/* WHOLE PAGE CONTAINERS */

.layout-two-column-right #alpha{margin:0 auto;width:60%;max-width:1000px;min-width:500px;padding:300px 0 0 0;}

.layout-two-column-left #alpha{margin:0 0 0 370px;}
.layout-two-column-left #beta{float:left;width:330px;}
.layout-two-column-left #pagebody{margin:0 auto;width:75%;max-width:1300px;min-width:900px;}

.layout-one-column #alpha{margin:0 auto;width:60%;max-width:1000px;min-width:500px;}

#container{background:transparent;margin-bottom:50px;}

/* HEADER */

#header{padding:0;color:#000;height:70vh;background:#fff url(https://i.imgur.com/vYYvWnJ.jpg)center bottom no-repeat;background-size:cover;margin-bottom:75px;display:flex;justify-content:center;align-items:center;}

#nav-above{position:absolute;top:10px;right:10px;list-style:none;margin:0;padding:0;font-size:8px;letter-spacing:2px;text-transform:uppercase;}
.banner-viewlinks{display:inline;padding:0;border:none;}
#nav-above li:last-of-type{display:none;}
#nav-above a{display:inline-block;padding:3px 5px 3px 7px;margin-left:10px;color:#fff;background:#000;}
.current a{color:#fff;}

#header-text{background:transparent;border:none;margin:0;padding:0;}
#header-text a{color:#fff;}
#banner-header{font-family:jetamie,georgia,serif;text-align:center;margin:0;font-size:95px;line-height:100%;}
#banner-description{font-family:Open Sans,helvetica,aria,sans-serif; text-align:center;font-size:10px;letter-spacing:4px;text-transform:uppercase;font-weight:bold;}

#nav-below{display:none;}

/* MAIN COLUMN */

#alpha{background:transparent;border:none;} 
#alpha a, #alpha a:visited{color:#F5BE02;}

.content-nav{margin:.5em 1em;}

.nav-bottom{text-align:center;text-transform:uppercase;letter-spacing:2px;font-size:9px;font-weight:bold;}
.entrypage{text-align:center;}

#tagpage-header{text-align:center;}

.nav-top, .date-header{display:none;}

#column-footer{clear:both;}

/* ENTRIES */

#sticky-note .entry-inner{border:none;}
#sticky-note .entry-header{text-align:center;color:#F5BE02;}
#sticky-note .entry-footer{display:none;}
#sticky-note .entry-text{padding:0;}

.entry{margin:0 0 60px 0;padding:40px;background:rgba(0,0,0,0.2);position:relative;}

.entry-header{background:transparent;border:none;padding:0;}
.entry-header h3, .entry-header h2{margin:0;padding:0;font-size:50px;}
#alpha .entry-header a, #alpha .entry-header a:visited{color:#F5BE02;}
.entry-datetime{text-transform:uppercase;font-size:8px;font-weight:bold;letter-spacing:2px;color:rgba(255,255,255,0.6);}
.lj-view-recent .entry-datetime{font-size:23px;letter-spacing:-3px;color:rgba(255,255,255,0.1);position:absolute;right:0;top:-23px;font-weight:800;}
.lj-view-day .entry-datetime{display:none;}

.entry-content{margin-top:10px;}
.entry-text{min-height:100px;overflow:auto;text-align:justify;line-height:160%;}

.lj-view-recent .inner-entry-userpic{display:none;}
.inner-entry-userpic{float:right;text-align:center;padding:0;left:-80px;top:0;position:absolute;line-height:100%;}
.inner-entry-userpic img{width:60px;height:60px;border:10px solid #F5BE02;}
.pic-poster img{display:none;}
.inner-entry-userpic .ljuser{font-size:8px;}
.ljuser{text-transform:uppercase;font-size:9px;font-weight:bold;letter-spacing:2px;}

.entry-metadata{display:none;}
.ljtags{margin:20px 0;text-transform:uppercase;font-size:8px;font-weight:bold;letter-spacing:2px;border-left:10px solid rgba(255,255,255,0.1);padding-left:10px;}
#alpha .ljtags a, #alpha .ljtags a:visited{color:rgba(255,255,255,0.4);}

.entry-linkbar{text-transform:uppercase;font-size:8px;font-weight:bold;letter-spacing:2px;}
.entry-linkbar ul{list-style:none;padding:0;margin:0;}
.entry-linkbar li{display:inline;border:none;padding:0;margin:0;} 
.entry-linkbar li a{padding:0 10px;margin:0 3px;}
.entry-linkbar li a[href*=tellafriend]{display:none;}

.outer-entry-userpic, .mid-entry-userpic, .header-poster{display:none;}

/* TAG LIST */

.layout-two-column-left .lj-view-tags #alpha{padding:300px 0 0 0;}
.lj-view-tags #alpha-inner{padding:40px;background:rgba(0,0,0,0.2);}

/* SIDEBAR */

#beta-inner{font-size:13px;color:rgba(255,255,255,0.7);}

.module{padding:0;background:transparent;margin:0 0 50px 0;border:none;width:100%;}

.module-content::-webkit-scrollbar-track{background:transparent;}
.module-content::-webkit-scrollbar{width:8px;background:transparent;}
.module-content::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.8);border-radius:7px;}

.module-header{background:transparent;border:none;text-align:center;}
.module-header h3{margin:0;padding:0;font-size:35px;color:#F5BE02;}
.module-header a, .module-header a:visited{color:#F5BE02;}

.module-customtext .module-content, .module-customtext2 .module-content{padding:0;text-align:justify;line-height:150%;}

.module-calendar .module-content{text-align:center;}
.module-calendar table{border:none;font-size:12px;margin-right:auto;margin-left:auto;margin-top:10px;width:98%;}
.module-calendar td{border:2px solid transparent;background:rgba(0,0,0,0.2);padding:5px;margin:5px;position:relative;}
.module-calendar td a{position:absolute;left:0;right:0;top:0;bottom:0;background:#F5BE02;padding:5px;color:#000;}
.module-calendar th{color:#F5BE02;font-weight:bold;}

.module-typelist ul{list-style:none;margin:0;padding:0;font-size:9px;text-transform:uppercase;font-weight:bold;letter-spacing:2px;}
.module-typelist a{display:block;color:#F5BE02;border-bottom:1px solid #F5BE02;padding:0 0 2px 5px;margin-bottom:7px;}

.module-pagesummary ul{margin:0;padding:0;list-style:none;font-size:9px;text-transform:uppercase;font-weight:bold;letter-spacing:2px;}
.module-pagesummary a{background:rgba(0,0,0,0.2);display:block;padding:5px;margin-bottom:6px;}

#tag-hierarchy ul{padding:0;margin:0;}
#tag-hierarchy li{font-weight:bold;list-style:none;font-size:9px;text-transform:uppercase;letter-spacing:2px;margin-top:10px;}
#tag-hierarchy li li{font-weight:normal;list-style:circle;margin-left:20px;font-size:12px;text-transform:none;font-weight:normal;letter-spacing:1px;margin-top:0;}
.tag-count{font-size:x-small;opacity:0.5;}

.all-link{text-transform:uppercase;font-size:8px;font-weight:bold;letter-spacing:2px;text-align:center;}
.all-link a{display:block;margin:0 auto;width:50%;color:#F5BE02;border:1px solid #F5BE02;padding:5px 5px 5px 7px;}

.module-layoutcredit{font-family:jetamie,georgia,serif;text-align:center;font-size:30px;}
.module-layoutcredit .module-header{display:none;}
.module-layoutcredit p{padding:0;}

.module-viewlinks, .module-about, .module-syndicate, .module-powered, .module-ads{display:none;}

/* TOPBAR ONLY */

.layout-two-column-right #beta-inner{position:absolute;top:72vh;height:300px;left:20px;right:20px;overflow:hidden;display:flex;}
.layout-two-column-right .module{margin:0;}
.layout-two-column-right .module-inner{padding:20px;}
.layout-two-column-right .module-content{height:220px;overflow:auto;}

.layout-two-column-right .module-calendar table{width:86%;}

.layout-two-column-right .module:nth-of-type(4) ~ .module{display:none;}
.layout-two-column-right .module-layoutcredit{display:none;}

/* ARCHIVE VIEW */

.yearlinks{text-align:center;font-size:14px;letter-spacing:2px;text-transform:uppercase;}
.year{list-style:none;}
.year li{display:inline;padding:.5em;}
.active{background:#F5BE02;padding:0 5px 0 7px;color:#000;}

.lj-view-archive .entry{margin:2vh 3vh 50px 3vh;}
.yeartable{border-collapse:separate;border:6px solid transparent;width:100%;}
td.monthlable, td.viewmonth{font-size:14px;letter-spacing:2px;text-transform:uppercase;background:transparent!important;}
td.monthlable{text-align:left;}
td.viewmonth{text-align:right;}
.dayname{font-size:10px;letter-spacing:2px;text-transform:uppercase;text-align:center;background:transparent!important;}
.yeartable td{border:6px solid transparent!important;background:#000;}

/* CONTENT FOOTER */

#content-footer{clear:both;height:10px;}

/* ICON REPLACEMENTS */

img[src*="img/userinfo.gif"], img[src*="img/icon_protected.gif"], img[src*="img/icon_private.gif"], img[src*="img/community.gif"], img[src*="img/icon_groups.gif"]{width:0!important;height:0!important;background:transparent url(https://i.imgur.com/pE8IpLi.png)center left no-repeat!important;padding:16px 0 0 19px!important;margin-bottom:5px!important;}

/* MOBILE OPTIMIZATION */

@media screen and (max-width:700px){
body{font-size:13px;}
.layout-two-column-right #beta-inner{height:auto;display:block;}
.layout-two-column-right #alpha{min-width:480px;padding:1080px 0 0 0;}
.module{margin:0 0 20px 0;}
.layout-two-column-right .module-content{height:190px;}
.entry-linkbar li a{padding:0 4px;margin:0 2px;}
}

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title and subtitle, then save.
♡ Fill in your links list if desired, then save. Remember to use short link titles (if you don't want links, just skip this step and the linkbar will disable for you.)
♡ 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 right) for a horizontal sidebar, OR Two column (Sidebar on left) for a traditional sidebar, OR One column for no sidebar content
♡ Disable customized comment pages for your journal: Yes
♡ Navlink titles: Recent, Archive, Friends, Profile
♡ Link text to leave a comment: Comment
♡ Text to track new comments on an entry: Track
♡ Text to stop tracking new comments on an entry: Stop Tracking
♡ Fill in sticky note if desired.
♡ Fill in custom texts if desired.
♡ Order your sidebar. This part is very important for TOP SIDEBAR only; using the dropdowns, set the first four to the ones you want to display (and don't worry about the rest; they'll hide no matter what.) If you DON'T need all four, set the first (#) to the ones you want and the rest to (none) and the modules you do choose will stretch to fit!
♡ Person to credit if you have an individually created layout: Layout by Tessisamess
♡ URL to link the credit to: http://tessisamess.insanejournal.com/
♡ If you are not displaying the credit module: Please put a link for credit in your links list, in one of the blurbs, or in your account profile depending on your preference and displayed modules.
♡ Custom stylesheet: Input the CSS provided and save!

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

PLACEHOLDER VALUES

https://i.imgur.com/vYYvWnJ.jpg - Header background
https://i.imgur.com/pE8IpLi.png - Lock and user icon

FONTS

Open Sans - Page text
jetamie - Header text

HEADER HEIGHT

To change header height edit 70vh for the header and subtract/add the same amount for 72vh for the topbar (max is 100vh, or 100% of the viewport height.) So if you want to change it to 80vh you'd change the top sidebar positioning to 82vh, or you'd do 60vh and 62vh if you were making it a little smaller, and so on.

ADDITIONAL TOPBAR MODULES

Need another topbar block? Easy-peasy! Just change .layout-two-column-right .module:nth-of-type(4) ~ .module{display:none;} to the number you need! I don't recommend exceeding five or it will likely start getting extremely cramped. You could also use this to display less of them if you don't want to use the dropdown method mentioned above.

COLORS

#fff - Header nav color and header title
255,255,255 - Page text, date, ljtags (semi-transparent rgba value)
#f5be02 - Headings, links, and various accents
245,190,2 - Horizontal rule (semi-transparent rgba value)
#111 - Page background
#000 - Header subtitle, header nav backgrounds, calendar details
0,0,0 - Entry background, module scrollbar, calendar day background, page summary item background (semi-transparent rgba value)

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: s2 complete style

Comments

(Comment)

galleon

Nov. 9th, 2017 10:37 pm (UTC)

YOU ARE SO TALENTED.

tessisamess

Nov. 9th, 2017 10:40 pm (UTC)

😂 I love that gif so much

PSHHHH TY BOO ♥

Nov. 16th, 2017 03:34 am (UTC)

Using this on this journal with some edits! I'm still playing around with it!

eichenwalde

Nov. 10th, 2017 05:28 pm (UTC)

Nov. 15th, 2017 10:44 pm (UTC)

AWWW, THANK YOU!!

honeyspider

Nov. 11th, 2017 02:49 am (UTC)

Every time you post something new I am in IN AWE.

Nov. 15th, 2017 10:45 pm (UTC)

♥ Aw no, thank you so much! I can't believe it took me so many years to do another sidebar setup like this, haha. (Definitely much better than the last time I made one though, oh man.)

cootiebutter

Nov. 11th, 2017 04:33 am (UTC)

Gah! Everytime you post something new I'm like "Welp, time to change all the journal layouts everywhere." Thanks for sharing such amazing stuff with us!

LOL, thank you and you're welcome! ♥♥♥

hafren

Nov. 11th, 2017 07:02 am (UTC)

I just changed my layout. And I thought I was super happy with it. And now there's this, and I'm like, okay, but sidebars.

Nov. 15th, 2017 10:46 pm (UTC)

LMFAO, the eternal struggle. I'm glad you like it! ♥

Nov. 12th, 2017 05:27 am (UTC)

Okay, but seriously, you just have so many amazing things and it's been enabling me to do projects. I'm working with this layout at

tendrandomod and I do have a couple of questions though.

1) I changed the header font (thank you also for that tutorial). When I did this, the font is way too huge in the sidebar headers. I've stared and tried several different things and I cannot seem to figure out how to reduce it. I don't know if it should go in with the H1,H2,H3 stuff, or if it needs to go in the /header area itself?

2) I'd love the subtitle to be a lighter color, and I'm not certain where/what to change to affect that.

I'm really loving this layout for a mod journal though cause it puts all those links front and center which is beautiful.

Nov. 12th, 2017 05:42 am (UTC)

Dude, that looks SICK!!! I love it.

Okay, so you're gonna wanna focus in the header section for your changes. First, go to #header and change color:#000; to your chosen color.

Now for the header title size I'm gonna encourage you towards something that might look a little scary, but trust me.

Here's why: Your header font size looks huge to you on your monitor, but on my giant monitor it's the perfect size, so we're going to use font-size:calc to change the size depending on the screen resolution instead of flat out.

Obviously you can ignore this advice, that's fine! You're going to want to go to #banner-header and change font-size:95px; to font-size:calc(2vw + 2vh + 0.8vmin) (or your chosen px amount) and you're all set!

Nov. 12th, 2017 08:46 am (UTC)

Thank you for these suggestions! I am totally fine with scary. I'll also check it on my work monitor this week to check sizes on different resolutions. My laptop is portable (which is what I wanted) but not the largest of screen for web/graphics work but I really like the idea of it being scale-able depending on screen resolutions.

Hopefully this will work both places. Thanks again so much for this gorgeous layout too - I'm just in love with it for this purpose. ^_^

souffle

Nov. 26th, 2017 08:52 pm (UTC)

Aaah this one kept calling to me.

I always seem to work on characters back to front, by prettying journals up and then doing apps - which is why

chucking doesn't have anything yet, except for nonsense 'filler'.

Nov. 28th, 2017 02:35 pm (UTC)

Ughhh, that looks so pretty!