Previous | Next

Layout: Helium

image preview | [info]tess039


Hey guys! I'm super stoked to post the finished layout that I did during my first Patreon livestream a couple of weeks ago! The recent entries page is another where you get a big, awesome splash for a large background image to shine through (which is, of course, easily removed) and alternate pageviews without the scrolling effect for ease of reading.

Helium also features button links and icons that fit into each entry without being obtrusive or clunky, and a fully custom bottombar—something I've never made for IJ before! Have fun editing and, as always, enjoy! ♥

Layout Coding

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title and subtitle, 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)
Disable customized comment pages for your journal: Yes
Link text to read comments: 1 // # This step is important!
Body of custom sidebar module:
<div class="bottombar"><!---

---><h1><a href="/">JOURNALTITLE</a></h1><!---

---><div class="nav"><!---
---><a href="/">RECENT</a><!---
---><a href="/profile">PROFILE</a><!---
---><a href="/friends">FRIENDS</a><!---
---><a href="/calendar">CALENDAR</a><!---
---><a href="http://tessisamess.insanejournal.com/">LAYOUT</a>

---><div class="img"><img src="ICONURL"></div></div>

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!

JOURNALTITLE and ICONURL - Bottombar content
BGURL - Page background
https://i.imgur.com/r8dcXVC.png - User and lock tinyicon

Just delete .lj-view-recent #header{height:100vh;} and you're all set!

Open Sans - Page text
Montserrat - Header text

#fff - Entry/bottombar/title/subtitle/misc. background, nav and tag header text, date header text
#333 - Page text color
#000 - Headings, links, bottombar nav hover background
0,0,0 - Blockquote and hr border, date, entrylink backgrounds/borders, bottombar shadow, calendar day 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!


Dec. 14th, 2017 06:47 am (UTC)
This is so nice, very classic and streamlined. Might be time to actually give my CDJ a real layout instead of the barely changed generator layout it's had since I made it haha
Dec. 14th, 2017 08:40 pm (UTC)
Aw, tysm! ♥ Let me know if you do; I'd love to see it!
Dec. 15th, 2017 03:39 am (UTC)
There we go, it's up on this journal now. Didn't fiddle with it much, really, just some colours.
Dec. 15th, 2017 03:43 am (UTC)
Ooooh, that is super pretty. I love that vibrant background!
Dec. 15th, 2017 03:45 am (UTC)
Yeah, despite the fact that I liked this for being quiet and simple! But I saw that photo on unsplash and couldn't resist.
Dec. 15th, 2017 03:46 am (UTC)
LOL, I feel you. Like as I was posting my comment I was thinking "says the person who just makes everything white" LMFAO.

The nice thing is though, if you ever want to go light and clean it's almost no work since most of it's in the background image!
Dec. 15th, 2017 03:57 am (UTC)
Yeah, the other option I had uploaded (because I thought this one would be too bright once I saw it) was this, so I've got a sombre backup ready haha.