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!


( )Anonymous- this user has disabled anonymous posting.
( )OpenID
Don't have an account? Create one now.
No HTML allowed in subject
Notice! This user has turned on the option that logs your IP address when posting.