Previous | Next

Layout: Trefoil

image preview | [info]tess011


Hey guys! I'm SO excited to release this layout; it's one I've been wanting to do for a while now. Trefoil is special in that it's my first three column layout, made specifically with game comms in mind. What makes it so game-friendly? It separates all your sidebar content for you! Information on the left and tags on the right, since most games have extensive tags lists. (This would honestly be great for any account that employs lots of stacking tags, like icon communities.)

Additionally, I've coded this layout to support three column (content in middle), both sidebar versions, AND no sidebar, which makes it great for matching your mod account to your comunities, because you'll only need to edit the styling once; the page setup is done in the first dropdown! 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.
♡ Go to Look and Feel, choose Complete Style, then save.
♡ Go to Custom Options and choose the following options:
Layout Type: Whichever you please!
Disable customized comment pages for your journal: Yes
Navlink titles: Recent, Archive, Friends, Profile
Link text to leave a comment: Comment
♡ Fill in sticky note if desired.
Display of tags in sidebar: List
Show tag count in hierarchical list? Yes/No
♡ Order your sidebar as desired! If you want your first blurb to look the way the demo does, just add your image, a title in h3 tags, and your text!
Person to credit if you have an individually created layout: Layout by Tessisamess
URL to link the credit to: http://tessisamess.insanejournal.com/
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!

BACKGROUNDIMG - Page background
ICONIMG - Header icon (does not actually need to be square or an icon; it will conform for you)
TINYICON - Image for users and post security icons (I use this one in the demo)

Lato - Page text
Comfortaa - Header text

#fff - Entry and sidebar module backgrounds
255,255,255 - Header text/links (semi-transparent rgba value)
#eee - Calendar day background (on sidebar)
#999 - Entry date and tags
#466f9f - Headings, links, calendar day background (with posts)
#222 - Bulk text color
0,0,0 - Blockquote and borders (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!


Sep. 20th, 2017 08:03 pm (UTC)
*incoherent screaming*
Sep. 20th, 2017 08:07 pm (UTC)

I won't be happy until this gif is on every page of my account lmfao.

Sep. 20th, 2017 08:37 pm (UTC)
This is amazing!
Sep. 20th, 2017 09:55 pm (UTC)
Heeee, thank you!
Sep. 20th, 2017 09:29 pm (UTC)
Ahhhhhhhhhhh. With some color changes, this would be so good for a cyberpunk-ish layout as well.
Sep. 20th, 2017 09:55 pm (UTC)
Oooh, that'd be rad!
Sep. 20th, 2017 09:47 pm (UTC)
Just testing my understanding here - does that mean we can pick the One Column option, too?
Sep. 20th, 2017 09:54 pm (UTC)
Yep, you sure can!
Sep. 20th, 2017 09:53 pm (UTC)
Sep. 20th, 2017 09:54 pm (UTC)
Thank you!!! ♥
Sep. 21st, 2017 05:17 pm (UTC)
Sep. 22nd, 2017 06:37 pm (UTC)
Sep. 22nd, 2017 06:01 pm (UTC)

Ugh, be still my heart. ♥
Sep. 22nd, 2017 06:37 pm (UTC)
Sep. 23rd, 2017 01:01 pm (UTC)

I want to use it so badly, but there is a small problem that I'm not sure if it's just my mobile, or the mobile version all together.

Portrait & Landscape

Do you know if there is a tweak in code to give the middle column a fighting chance? Or is this just the way of three column layouts in mobile?

Either way, absolutely gorgeous! Thank-you so much for sharing! ♥
Sep. 25th, 2017 09:09 pm (UTC)
Mobile's going to hate this layout in three-column since there are no media-queries, HOWEVER, I just added some in because of your question. If you already have your layout edited and don't want to grab a fresh copy, you can add this anywhere:

@media only screen and (max-width:600px){
#pagebody{margin:0 auto;width:98%;}
.layout-three-column-middle #alpha{margin:0 235px;}
.layout-three-column-middle #beta{float:left;width:195px;}
.layout-three-column-middle #gamma{float:right;width:195px;}

@media only screen and (max-width:1100px){
#pagebody{margin:0 auto;width:90%;}
.layout-three-column-middle #alpha{margin:0 260px;}
.layout-three-column-middle #beta{float:left;width:220px;}
.layout-three-column-middle #gamma{float:right;width:220px;}

@media only screen and (max-width:1500px){
#pagebody{margin:0 auto;width:90%;}
.layout-three-column-middle #alpha{margin:0 300px;}
.layout-three-column-middle #beta{float:left;width:260px;}
.layout-three-column-middle #gamma{float:right;width:260px;}
Sep. 24th, 2017 01:01 am (UTC)
Sep. 25th, 2017 08:57 pm (UTC)
:DDDDDDDDDD yasssssss!
Sep. 25th, 2017 01:33 am (UTC)
I am using this! How size background image do you recommend?
Oct. 1st, 2017 08:39 pm (UTC)
You know I've gotta use ALL your layouts at some point, somewhere...

And I was wondering if, on friends view, if there was a way to get the usernames to always show instead of only showing on hover? I tried fiddling with it a bit and couldn't figure it out myself (but fortunately I didn't bone anything up either).
Oct. 1st, 2017 09:34 pm (UTC)
I tried tweaking this a little, buuuut I failed. A lot. lol. Is there a way to make the header block at the top a bit smaller? I basically just want to shift everything up a bit.
Oct. 9th, 2017 08:54 am (UTC)
omg love this layout!

i was looking for something new for my icon journal (which i am awfully inept at updating regularly) which previously had a good layout but it was kind of dark and gloomy. but with the new one and the background it just looks and feels so much lighter. really happy with how it looks.
Dec. 5th, 2017 09:18 pm (UTC)
~gronckle/~souffle here... again!

even though i love 'Punch It Up' i felt I needed something different after all for this journal. remembered this one... found a simple image... and loving it! even the gigantic moodboard ~marlovian tweaked for me looks better on it. definitely a versatile layout :)

was just wondering though how i'd get it so that the 'remember/tell/track/stop tracking' don't get displayed in the entry footer links? i don't use those links and kind of bugs me a little seeing them there.
Jan. 10th, 2018 07:10 am (UTC)
Using this Here with a few tweaks of my own. Thanks so much!
Jan. 19th, 2018 04:36 pm (UTC)
Still loving this. Still noodling with it.

Question: is it possible to remove the header text/journal name and the icon but still keep the space open? Display:none just moves the entries flush up to the top but I like the breathing room it otherwise provides.