Previous | Next

Layout: Gridding

image preview | [info]tess038



Hey guys! It's time for a layout I'm EXTREMELY EXCITED ABOUT!!! CAN YOU TELL?! So why am I so excited? Well! I know I haven't done a column/grid layout in ages, and that's because before they just weren't very practical for smaller screens. I am VERY HAPPY to release my best grid layout to date, Gridding! This S2 layout is fully responsive and will fit any screen size while breaking itself down accordingly instead of squishing columns together to force it to fit. (I may very well go back and adjust all of my old grid layouts, haha!)

What's even better about this sleek, minimalist layout? The inline sidebar has six different sidebars to choose from. No kidding! Just grab the one you want and post it in your sticky note (or even code your own!) and you're all set—so this is almost like six layouts in one; COOL, RIGHT! And, of course, the friends page is single column for ease of scrolling new posts coherently. 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: One Column
Disable customized comment pages for your journal: Yes
Navlink titles: Recent, Archive, Friends, Profile
Link text to leave a comment: Comment
Text to track new comments on an entry: Track
Text to stop tracking new comments on an entry: Stop Tracking
Sticky Note: Your sidebar coding of choice!
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!

STICKY3BG, STICKY4BG, STICKY6GIF - Replacements for sidebars that require background images (#3, #4, and #6)
https://i.imgur.com/sgdzUIG.png - Locked
https://i.imgur.com/kcvhEBk.png - Private
https://i.imgur.com/HtCCn8L.png - Groups

Raleway - Page text
Pathway Gothic One - Header text

.lj-view-recent .entry:hover .entry-linkbar, .lj-view-day .entry:hover .entry-linkbar{max-height:100px;}
.lj-view-recent .entry-linkbar, .lj-view-day .entry-linkbar{max-height:0;overflow:hidden;-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;}

#fff - Various sticky sidebar elements, entry background, user link on friends,
#fbfbfb - Page background
#ddd - Sticky #1 text and links
#bbb - Sticky #4 text, Sticky #6 text
#999 - Entry date and tags
#888 - Sticky #5 header text shadow
#333 - Page text color
#101010 - Sticky #1 background, Sticky #2 image border, userpic background,
#000 - Headings, links, Sticky #5 color & heading background
0,0,0 - Tons if different shadows, borders, and overlays (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!


Nov. 18th, 2017 12:34 am (UTC)
OMG. You're so perfect!
Nov. 22nd, 2017 12:07 pm (UTC)
PSHHHH ♥ (I'm so eternally hype about the structure of this layout lmao.)
Nov. 18th, 2017 12:40 am (UTC)
For. Serious.

I already know that this sidebar is going to change so much all the time. But unf.

I did almost put the sticky note in the sidebar bit though. Because I'm an idiot. Derp.
Nov. 22nd, 2017 12:07 pm (UTC)
LOL I'll probably do the same thing lbr. (Both the changing and the putting it in the wrong spot LOL.)
Nov. 19th, 2017 07:03 am (UTC)
This looks awesome! One question I do have is whether it's possible to make the entries on this wider? I might just be missing it, but I'm having trouble figuring out where to do that in the code!
Nov. 22nd, 2017 12:09 pm (UTC)
The layout's already full page width, so the only way they can go any wider is to remove or adjust the margins. You could opt for fewer columns by editing -webkit-column-count:3;-moz-column-count:3;column-count:3; though! ♥
Nov. 23rd, 2017 02:47 am (UTC)
using this for this journal!
Nov. 27th, 2017 09:03 pm (UTC)
I so BADLY need this for my DW account for this guy. Gosh, Tess. Too amazing.
Nov. 28th, 2017 02:34 pm (UTC)
I WAS THINKIN ABOUT IT TBH! ♥ I might wind up doing that early 2018!
Nov. 29th, 2017 07:11 am (UTC)
See this is why you are amazing. I'd love to see some of your designs over on DW.

Unless there is a way to move Complete Style S2 to DW already and I'm missing it???
Nov. 29th, 2017 12:46 pm (UTC)
I haven't really looked into it, ngl haha. I just sort of figured if they do have it you'd need a paid account, and I want anything I do for DW to be able to be used on any account.

I've started DW layouts over on my Patreon, though! Last month's layout was a remake of Revenant, and this month's should be going up today!
Nov. 29th, 2017 08:12 pm (UTC)
Everything I have ever found are LJ base overlays. DW, why do you do us dirty?

I guess I'll need to check this out then ;D
Jan. 9th, 2018 06:48 pm (UTC)
this is a m a z i n g.

i do have one question though; i'm trying to get the text bit to the upper right of the image, and not being familiar with flex i am stumped. help a poor girl out, please?

(just as a heads-up, the image is technically of a girl in her bra. it covers more than some bikinis, but i didn't want that to be a surprise.)
Jan. 9th, 2018 08:00 pm (UTC)
Hey! So, with Flex, that's not technically an option, but you can still do it! Just replace the CSS for .sticky-3 with the following and you should be good to go!

.sticky-3{background:url(https://i.imgur.com/xZKkiGd.jpg)center no-repeat;background-size:cover;display:flex;padding:40px;min-height:50vh;border:1px solid rgba(0,0,0,0.1);text-align:center;}
.sticky-3 .inner{align-self:flex-end;width:68%;margin-left:32%;}
.sticky-3 h3{font-size:24px;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,0.2);}
.sticky-3 h4{font-size:16px;color:rgba(0,0,0,0.3);}
.sticky-3 .expand{max-height:0;overflow:hidden;letter-spacing:2px;font-size:7px;text-transform:uppercase;line-height:150%;text-align:justify;-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out;}
.sticky-3:hover .expand{max-height:400px;padding:10px 0;}
.sticky-3 .links{font-family:Pathway Gothic One,arial black,gadget,sans-serif;font-size:9px;text-align:center;margin-top:8px;}
.sticky-3 .links a{display:inline-block;background:rgba(0,0,0,0.6);color:#fff!important;margin:0 8px;width:15px;height:15px;line-height:15px;border-radius:15px;}

(If you wanted it in the upper right instead of lower right just delete align-self:flex-end; to do that!)
Jan. 10th, 2018 03:56 pm (UTC)
You are amazing, thank you so much!
Feb. 2nd, 2018 09:24 pm (UTC)
You are a genius!! I'm not good at this stuff but I was able to figure it out because the instructions are so good!
Apr. 12th, 2018 12:29 am (UTC)
Used with some modifications (read: mixings of the sidebars... still can't get that damned space between the blurb and the quote to get smaller) HERE and HERE. Hope you like them!