Tessisamess

Previous | Next

Layout: Trefoil


image preview | [info]tess011



Information

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!

PLACEHOLDER VALUES
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)

FONTS
Lato - Page text
Comfortaa - Header text

COLORS
#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!

Comments

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)
This is BEAUTIFUL.
Sep. 20th, 2017 09:54 pm (UTC)
Thank you!!! ♥
Sep. 21st, 2017 05:17 pm (UTC)
Yessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
Sep. 22nd, 2017 06:37 pm (UTC)
:DDDDDDDDDDDDDDD
Sep. 22nd, 2017 06:01 pm (UTC)
THIS IS STUNNING AND YOU ARE A CODING WIZAAAAARD!

Ugh, be still my heart. ♥
Sep. 22nd, 2017 06:37 pm (UTC)
PSHHHHHHHHH, TY BOO ♥
Sep. 23rd, 2017 01:01 pm (UTC)
OH.MY.GOODNESS! THIS IS SO GORGEOUS!

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. 24th, 2017 01:01 am (UTC)
AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
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.
Apr. 8th, 2018 06:43 pm (UTC)
I love this layout *_* I'm using it on Dreamwidth over here, but I'm unfamiliar with the way fonts are set up on IJ - idk anything about woff2 or how I'd go about replacing the font. Is there an easy way to go about changing this? Would rewriting it to be more like a Flexible Squares CSS or similar work, or would that not be compatible? I went in to add some google fonts and realized that I have no idea how to add that into this. xp
Jul. 25th, 2018 10:46 am (UTC)
Hello! I am running into a bit of a problem with using this in an asylum. When I am looking at the archive of entries for a specific day, it looks like this (it's the same with just the raw code unedited by me and the problem is still there, see here) but not like it would in your live preview [image link]. The journal is [info]st_margarents for reference if you want to take a gander at the code to figure out what might be creating this problem?