Tessisamess

Previous | Next

Layout: A Small Affair


image preview | [info]tess043


Information

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!

TO ADD IN A CAST LIST
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>


SCALING THE LAYOUT UP
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

FONTS
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)

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

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

Comments

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
(Anonymous)
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!

#header{padding:0;color:#000;background:#fff;text-transform:uppercase;letter-spacing:1px;}
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.