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 10:00 pm (UTC)
Are any of the Placeholder Values required in order for the layout to fully function?
Sep. 20th, 2017 10:02 pm (UTC)
Mostly no, but if you don't want a sort of empty white round block over the title where the icon would usually go you'll wanna delete the whole section that styles it:

#header-text:before{content:'';display:block;background:url(ICONIMG)center;background-size:cover;width:100px;height:100px;border-radius:110px;border:5px solid #fff;margin:0 auto 15px auto;}
Sep. 20th, 2017 10:30 pm (UTC)
I was going somewhere with all that, but I finally figured out what I done effed up XD.
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. 30th, 2017 03:57 am (UTC)
After debating and then endless tweaking, I have used this over at [info]picturesofthem and I think I'm actually done fiddling with it haha. Your code makes me drool. I've stalked it forever before finally starting to comment.
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. 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. 26th, 2017 07:46 pm (UTC)
Sep. 24th, 2017 01:01 am (UTC)
AHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
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?
Sep. 25th, 2017 02:07 am (UTC)
Also, probably a super obvious question, but how did you get rid of the "previous" link that goes to previous journal entries? It's still showing in this journal and it's throwing off the alignment of the columns.
Sep. 25th, 2017 08:57 pm (UTC)
As large as you can get for a background image is best, or a smaller image that tiles!

For the previous links, that was my mistake! I always disable those top ones and I missed it this time around, haha. Go ahead and grab the code in this post again; I've fixed it!
Sep. 26th, 2017 01:20 am (UTC)
It's fixed. Thank you!
Sep. 26th, 2017 01:33 am (UTC)
No problem at all!
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. 9th, 2017 09:16 am (UTC)
Heeee, tysm! ♥ Sorry for the delay, I've been sick. You sure can! Just delete the parts in red and you're all set:

.pic-poster{font-size:9px;text-transform:uppercase;letter-spacing:1px;line-height:120%;position:absolute;top:0;right:0;padding:22px 70px 50px 22px;opacity:0;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
.pic-poster:hover{opacity:1;}
Oct. 9th, 2017 09:29 am (UTC)
Oh no! I hope you're feeling better!

And it looks like I just wasn't deleting enough. Serves me right for getting frustrated and going "FINE!!!" at it. XD I'm using it over at [info]sunshinekid, which I feel like you'll be amused by. It's super sparkly.
Oct. 9th, 2017 09:32 am (UTC)
It was kind of a rough one, two weeks hrgh, but I'm feeling way better now. Cough's still hanging out LOL, but I went in for antibiotics today. SUPER STOKED to start my posting tomorrow!

LOL isn't it always something small? OH NOOO, DUDE. I LOVE THIS AND I LOVE YOUR PB!! This is great lmfao. (Also I want those leggings... real bad.)
Oct. 9th, 2017 09:41 am (UTC)
AW MAN. I get that crap too during allergy season and that's starting to roll back around now too so like I feel ya. But fingers crossed it doesn't kick up too bad this year.

NAH. I'm just straight up playing Vince from the Boosh this time. XD But I want those leggings too holy frick.
Oct. 9th, 2017 09:45 am (UTC)
God dude, same. Weather shifts always hit hard too for me (which is what happened this time) and almost always turn into bronchitis. WINTER IS A FUN TIME LOL.

OH, NICE NICE! I was literally just thinking a week or so ago that I was really wanting to rewatch Boosh, haha. (I have so many cute leggings but... I can always... have more...)
Oct. 9th, 2017 09:58 am (UTC)
Why does the weather hate us so much? WHY?

I just finished a rewatch. I forgot how much I missed everyone's dumb faces and all the stupid jokes. I'm listening to the old radio show now too. It's the beeeest.
Oct. 9th, 2017 10:04 am (UTC)
LOL, oh man yeah, I really need to rewatch it this winter since I'll basically be REFUSING TO LEAVE THE HOUSE HAHA.
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 09:15 am (UTC)
Hey, sorry for the delay! I've been wicked sick haha. You can, yup! Just edit the following and you're in business!

#header-text{background:transparent;border:none;margin:0;padding:150px 0;text-transform:uppercase;}
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.
Oct. 9th, 2017 09:13 am (UTC)
Aw, thank you so much! I'm super happy with this one too. :D

DUDE. That is literally the cutest theme, LOL. I love HTTYD and Gronckles are my favorite! This is great! ♥
Oct. 9th, 2017 09:39 am (UTC)
heee thank you! I love it (and them) too! When I googled httyd landscapes and saw the concept art i literally gasped at how perfect it was.
Oct. 9th, 2017 09:41 am (UTC)
Oh man HTTYD has some great concept art. I have a bunch of big scenery paintings saved and some really great expression sheets of Snotlout for art references.
Oct. 9th, 2017 09:50 am (UTC)
i hadn't ever seen any but so in love with it now. was a little disappointed when the first piece i chose turned out to be a bit on the small side to be used as the background but pretty rapt with the end result anyway.
Oct. 9th, 2017 10:03 am (UTC)
Ugh, I hate when that happens (ie constantly lmao) but I love the background you wound up with!