Nov. 9th, 2017
Layout: Punch it up!

image preview |
![[info]](http://www.insanejournal.com/img/userinfo.gif)
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
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!
Comments
YOU ARE SO TALENTED.
😂 I love that gif so much
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.
Okay, so you're gonna wanna focus in the header section for your changes. First, go to
#header
and changecolor:#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 changefont-size:95px;
tofont-size:calc(2vw + 2vh + 0.8vmin)
(or your chosen px amount) and you're all set!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. ^_^
I always seem to work on characters back to front, by prettying journals up and then doing apps - which is why
.lj-view-recent .inner-entry-userpic{display:none;}
and you'll be all set.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?
(You can reorder your links list by renumbering them, so you won't have to worry about redoing your links. As for the credit, no worries! You have it in the links list, which is also where I've put it in the example.)
Thank you so much!!