Previous | Next

Layout: Periphery

image preview | [info]tess045


Hey guys! I'm still feeling pretty crappy, so I'll probably leave the info short on this one. A small update: Since I had to take a week off, some of the 2017 Roundup posts may be pushed off into February, but all regularly scheduled posts will make it before the end of the month; don't worry!

This minimalist S2 layout comes with dropdown navigation and a blocky floating header with fun overlapping content. I could easily see this being a mod journal with a sticky note navigation. As always, the aesthetic of this design can change by miles with just a few font and color replacements and a new image!

Enjoy! ♥

Layout Coding

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title, then save.
♡ Fill in your Links List if desired, 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)</b>
Disable customized comment pages for your journal: Yes
Link text to read comments: 1 // # This step is important!
Fill in sticky note if desired.
Body of custom sidebar module:
<div class="topbar"><!---

---><div class="titles"><b><a href="/">TITLEHERE</a></b> SUBTITLEHERE</div><!---

---><details class="dropdown"><summary>NAVIGATION</summary><a href="/">HOME</a><a href="/profile">PROFILE</a><a href="/friends">FRIENDS</a><a href="/calendar">CALENDAR</a><a href="http://tessisamess.insanejournal.com/">LAYOUT BY</a></details><!---

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!

Change height:80vh; to your preferred size and your header will resize! After this, you will also need to add or subtract the same amount to 70vh in #pagebody to make sure your entries still overlap correctly. (This pagebody margin is also what you'll want to edit if you don't want your entries to push down as much.)

You can also edit left:7vw;right:7vw; if you want more or less of a gap between the sides of the header and the browser.

Montserrat - Page text
Playfair Display - Header text

HEADERHERE - Header background
https://i.imgur.com/37iggkV.png - Lock & user icons
https://i.imgur.com/4HDm2vx.png - Add comment icon
https://i.imgur.com/CqDacZM.png - View entry icon
https://i.imgur.com/brD8WR4.png - Edit entry icon
https://i.imgur.com/nSm7Sij.png - Edit entry tags icon

#fff - All backgrounds and borders
#a1becc - Entry link hover
#999 - Entry date and tags
#638ea1 - Page link hover, entry links, some calendar elements, title border
#111 - Page text
#000 - Page links, headers
0,0,0 - Borders and shadows (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!


Jan. 18th, 2018 09:32 pm (UTC)

This is some swanky fucking layout coding right here. I mean, I told you that already but it bears repeating.
Jan. 21st, 2018 01:51 am (UTC)
Jan. 18th, 2018 10:54 pm (UTC)
I was fiddling with the layout - as per your suggestions - and came up with this. Brilliant layout.
Jan. 21st, 2018 01:51 am (UTC)
Ohhhh that's rad af!!!
Jan. 19th, 2018 02:22 am (UTC)

I'm totally gonna use it, but don't know where yet. Might just redo this journal again!
Jan. 21st, 2018 01:50 am (UTC)
AW NO YOU SHUT UP, THANK YOU!! I can't wait to see what you do with it! ♥
Jan. 19th, 2018 08:54 am (UTC)
This is amazing! Thank you!
Jan. 21st, 2018 01:50 am (UTC)
Aw, thank you so much! ♥
Jan. 21st, 2018 12:12 am (UTC)
heyo! is there a way to enable userpic display on this layout? thank you !
Jan. 21st, 2018 01:50 am (UTC)
Of course!

Delete everything in red to display userpics on all page views:
.lj-view-friends .inner-entry-userpic{display:block;}
Jan. 21st, 2018 10:19 pm (UTC)
thank you !!
Jan. 22nd, 2018 04:17 am (UTC)
this is beautiful! is there a way to hide journal entries on the most recent page so that all you see is the sticky note? i tried Number of journal entries to show on recent entries page » 0, but that doesn't seem to do anything.
Jan. 24th, 2018 11:46 pm (UTC)
There are a few ways to do this, yes! The simplest is to put <noembed> at the end of your sticky note content (drawback: removes nav footer at the bottom of the page; it will also do this on the page views where you click an entry tag because .lj-view-recent cannot distinguish between the actual home page and when you're viewing entries with a specific tag.)

You can also put .lj-view-recent #sticky-note ~ .entry{display:none;} in the CSS to display only the sticky note on .lj-view-recent (drawback: it will also do this on the tags page views, as above.)

The third option is to put your sticky note content into a post-dated entry instead, and then set Number of journal entries to show on recent entries page to 1 (0 is invalid on S2 Complete, unlike S1 Generator.) You'll still only be able to view one entry per page on the tags pages and the day page, but you'll have the bottom prev/next links available.

The best option really depends on how important navigation is for the journal you're wanting to use it on. If letting people browse entries without specific links, or if planning to use tag URLs for links with multiple entries on each one, I recommend against the first two options. If not, either of the first two options should work just fine!
Jan. 25th, 2018 06:16 am (UTC)
you are brilliant, thank you so much! i made it work over at [info]clarity :)
Jan. 25th, 2018 06:27 am (UTC)
Ohhhh, that looks rad!!! ♥ Happy to help!
Feb. 14th, 2018 11:52 am (UTC)
On a side note to butt in on your thread, that game looks super neat
Apr. 3rd, 2018 03:20 am (UTC)
hi! how did you get it so you don't have to scroll at all for your sticky? i cannot figure this out.
Apr. 3rd, 2018 06:00 am (UTC)
i altered the margin:70vh to margin:17vh under the /* BODY OF PAGE */ section!
Feb. 1st, 2018 11:32 pm (UTC)
Oh thx for that! I've stolen and done it the same on this journal.
Feb. 14th, 2018 12:03 pm (UTC)
So it took me a minute to realize that we picked our own header image, for a minute I thought I was doing something wrong :P but this is really awesome and easy to setup! Thank you!