Previous | Next

Layout: Punch it up!

image preview | [info]tess037


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

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!

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

Open Sans - Page text
jetamie - Header text

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.

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.

#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!


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

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

😂 I love that gif so much

Nov. 16th, 2017 03:34 am (UTC)
Using this on this journal with some edits! I'm still playing around with it!
Nov. 10th, 2017 05:28 pm (UTC)
Nov. 15th, 2017 10:44 pm (UTC)
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.)
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!
Nov. 15th, 2017 10:45 pm (UTC)
LOL, thank you and you're welcome! ♥♥♥
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 [info]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. ^_^

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 [info]chucking doesn't have anything yet, except for nonsense 'filler'.
Nov. 28th, 2017 02:35 pm (UTC)
Ughhh, that looks so pretty!
Oct. 24th, 2018 12:07 am (UTC)
But I need icons to show. :(
Oct. 24th, 2018 12:18 am (UTC)
Remove .lj-view-recent .inner-entry-userpic{display:none;} and you'll be all set.
Oct. 24th, 2018 12:20 am (UTC)
Nevermind, I'm a whiner and I fixed the userpic coding.

Nov. 14th, 2018 05:03 am (UTC)
Using this layout on this journal, but having one hiccup:

I put some text area boxes in the custom sidebar moduel and there are added html line break codes that I didn't put in the original formatting... original code & how it appears in the journal.

Do you know how to fix this?