Previous | Next

Layout: A Small Affair

image preview | [info]tess043


Hey guys! I make so many big, open layouts with large headings that I thought something teeny might be a fun change of pace. This layout supports almost all sidebar types, comes with a custom in-sidebar cast list, and the whole thing will scale up with just two quick value changes!

(Sorry, I'm feeling really crappy today so I'm keeping this short, haha.) 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:
Supported Layout Types:
One Column
Two Column (Sidebar on Left)
Two Column (Sidebar on Right)
Three Column (Content in Middle)
Disable customized comment pages for your journal: Yes
Navigation link names: Recent/Archive/Friends/Profile
Fill in sticky note if desired.
Display of tags in sidebar: List
Fill in and order custom sidebar modules as needed. If you want a cast list like the demo shows it's below!
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!

Use the second custom text for your cast list and paste in the following:

<a href="JOURNALURL" title="Name"><img src="ICON"></a>
<a href="JOURNALURL" title="Name"><img src="ICON"></a>
<a href="JOURNALURL" title="Name"><img src="ICON"></a>
<a href="CASTLINKURL" class="all-link">VIEW ALL CHARACTERS</a>

font-size:10px; - This will scale all page font up or down (the rest of the fonts are a percentage based on this font size)
width:700px; - Overall container width for One Column and Two Column
width:850px; - Overall container width for Three Column

Raleway - Page text (comes up again for the header title)
font-weight:300; - Header text (same font in a different weight; change this to a font-family if you're replacing it with a different font)

https://i.imgur.com/EiNSIvp.jpg - Background image
https://i.imgur.com/jC7Lik6.png - Header and user/lock icons

#fff Header, module, and entry background; module and sticky header text; some calendar elements
#d7eef6 Current page link border; userpic border and userinfo hover background; entry links border; sidebar link border
#999 Entry date and tag links
#77a0af Header title and header link hover; main content link color; module and sticky header background; userinfo hover border; cast list border hover; tag group title color; some calendar elements
#111 Page text color
#000 Main content link hover color; header links; entry header color; some calendar elements

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!


Feb. 13th, 2018 01:20 am (UTC)
OMG! This is so adorable and I'm going to redo my icon journal with it!! ♥
Feb. 19th, 2018 04:34 pm (UTC)
O M F G that looks so adorable, I love it!
Feb. 19th, 2018 06:48 pm (UTC)
Thank you! :D
Feb. 13th, 2018 02:34 am (UTC)
UMMMMM... this is the layout i've basically been looking for my entire virtual life.
Feb. 19th, 2018 04:35 pm (UTC)
PSH TY TY. EEEEEEEE it looks so cute!! ♥
Feb. 14th, 2018 01:15 am (UTC)
Yes! This is the sort of layout I love.
Feb. 19th, 2018 04:36 pm (UTC)
Ty! ♥
Feb. 25th, 2018 04:47 pm (UTC)
Is there a way to make the navigation bar at the top fixed? My CSS knowledge is not great.
Feb. 25th, 2018 05:41 pm (UTC)
You can, yup! Go to #header and add position:fixed;top:0;left:0;right:0; and then in body you'll probably want to change margin:0; to margin:30px 0 0 0; if you think the top nav is sitting too close to the content under it. ♥
Feb. 25th, 2018 09:48 pm (UTC)
Awesome! Thank you! :D
Mar. 9th, 2018 03:05 am (UTC)
This is truly gorgeous! I've always looked for something like this. :) I hope one day you'll make a DW version of it. <3
Mar. 9th, 2018 03:08 am (UTC)
Aw, thank you! I'll check the importing and see how well it ports over and if it needs any adjustments; if it ports well I'll add a note to this entry with any needed adjustments and info on how to do that, so just check back next month and I should have that done by then! ♥
Apr. 13th, 2018 10:50 pm (UTC)
Love the layout! I just have a quick question is there a way to make the top navigation header transparent instead of white (and how do I go about doing that)?
Apr. 13th, 2018 11:05 pm (UTC)
Aw, thank you! ♥

Absolutely! Just delete the highlighted background spec from the header and you're good!

Apr. 13th, 2018 11:12 pm (UTC)
I thought so. I must have goofed somewhere because I deleted it and it's still white. D:
Apr. 13th, 2018 11:15 pm (UTC)
Oh no! Can I see the account so I can figure out what's going wrong?
Apr. 13th, 2018 11:16 pm (UTC)
Gosh, you're so nice! I tried it on another journal and it worked so I am going to start over and see if I can get it this time around.
Apr. 14th, 2018 12:34 am (UTC)
Aw, it's no problem! ♥ Oh good! A lot of times it's just a case of missing a semicolon or a typo (I write code 24/7 and I still manage to do that more than I should lmfao) so that's probably what happened.
Sep. 15th, 2018 06:42 pm (UTC)
I love the basic simplicity of this layout, and I'm wondering is there an easy way to make ONLY the sticky note show up on the recent entries page?

I honestly feel like I've seen this questioned answered before, but I cannot for the life of me remember where.
Sep. 15th, 2018 08:14 pm (UTC)
Aw, thank you so much! ♥

There is, yup! You can either add <noembed> to the end of your sticky note content, or if you want to be a little cleaner with it you can add .lj-view-recent #sticky-note ~ *{display:none;} to your layout CSS, which will tell it to hide anything after the sticky note!

Just keep in mind both options will do the same thing on any page where you're viewing a specific tag, because for some reason the layout's page classes (ie .lj-view-recent etc.) count those pages as Recent.
Sep. 16th, 2018 01:01 am (UTC)
Thank you so much! I think this will work. It's annoying about the tagged pages, but ah well.