Previous | Next

Layout: Room to Breathe

image prev | [info]tess005

Welcome to another layout from Tessisamess!
This Complete layout's gonna be part of a set, like The Silvis, so keep a lookout for companion codes to follow! This layout's really great for IC/OOC/NET comms, since it keeps the focus on the posts and has easy navigation on the right. Header color is easily changed to an image to match your game's theme, and (as always) all colors/fonts are easily replaced. Instructions, replacements, etc. are below, as usual.

Enjoy! ♥
the layout
Oh, yeah. These are the goods!
installation guide
Everything you need to know about editing this layout!
♥ Go to Basics and choose S2 for your style system, then save.
♥ Go to Look and Feel, choose Complete Style, then save.
♥ Go to Custom Options and edit your settings:
♥ Layout Type: Two column (Sidebar on right)
♥ Disable customized comment pages for your journal: Yes
♥ Link text to leave a comment: Comment
♥ Fill in sticky note if desired.
♥ Body of custom sidebar module (this is the frame for your icon):
<center><img src="http://i.imgur.com/UM7YyV6.png"></center>
♥ Fill in second custom sidebar module if desired, and paste the following for your header block and fill it in:
<div class="myheader"><h1><a href="/">Journal Title</a></h1><hr><h3>Subtitle Line</h3></div>
♥ Person to credit if you have an individually created layout: Layout by Tessisamess
♥ URL to link the credit to: http://tessisamess.insanejournal.com/
♥ Display of tags in sidebar: List
♥ Show tag count in hierarchical list? No
♥ Sidebar ordering as seen in demo: Custom Text, Nav Links, Custom Text Two, Links, Tags, Layout Credit, (none) for the rest
♥ Custom stylesheet: Input the CSS provided, add a userpic URL to (USERPIC), and save!

Go ahead and stick the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!
#333 to change page font.
#8D7494 to change link color.
#999 to change entry date and comment link separator.
#CDC3CC to change header background and add image to url() if wanted.
#CCC to change userpic and links list border.
#DDD to change posting date (larger date header.)
#FFF to change page background and header contents border/font color.
http://i.imgur.com/UM7YyV6.png to replace the sidebar image decoration with a standard image; remember to also do the following:
Replace: .module-customtext img{width:190px;background:url(USERPIC)center no-repeat;background-size:110px;margin-bottom:10px;border:none;}
With: .module-customtext img{max-width:100%;}
http://i.imgur.com/MlyRZkf.png to replace the user/private/locked icon.
http://i.imgur.com/j9NduIi.png to replace the comm/custom lock icon.
Raleway,helvetica,arial,sans-serif to change the accent font.
Lato,helvetica, arial,sans-serif to change the page font.
terms of use
Please respect my usage agreement; thank you!
♥ Keep credit backlink in place.
♥ Do not redistribute my codes in part or in whole.
♥ 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!


Sep. 17th, 2016 04:17 am (UTC)
Sep. 17th, 2016 04:45 am (UTC)
Using this over at [info]glorafilia, thanks! Though pasting the header block code at the end of my sticky note seems to be putting it in my sticky note, and I've noticed some of my tag nesting is a bit off, like "f: asian - indian: 20s" is actually "f: asian - indian: black: 20s" but isn't displaying the "black" level (and isn't the only one missing a "black" level, and there's a few that aren't showing the link level ("f: jewish: blonde" and "f: mixed: [hair color]" don't have age levels linked; "f: mixed - black/indigenous" doesn't show the next two levels at all). Help?
Sep. 17th, 2016 04:48 am (UTC)
You're welcome!

I shouldn't be writing instructions when I'm tired, clearly lmfao. Stick the header code into the first or second custom text instead and you should be fine! I have no clue why I didn't check to make sure it worked in the sticky haha.

As for the tags, I totally know what's messing it up but I'm gonna have to get back to you with an explanation on that tomorrow when I'm not breaking everything.
Sep. 17th, 2016 04:52 am (UTC)
That did the trick :) Have a good sleep!
Sep. 17th, 2016 04:47 am (UTC)
Ohhhh I love this.
Sep. 17th, 2016 04:50 am (UTC)
Aw, thank you so much! I looove that icon.
Sep. 17th, 2016 05:45 am (UTC)
Yaaaas someone else who recognizes Saga.

I'm not even sure I'm apping this character to begin with, but I took the layout for a test run at [info]zireael.
Sep. 17th, 2016 11:05 am (UTC)
Sep. 17th, 2016 04:53 pm (UTC)
♥ Thank yooou!
Sep. 17th, 2016 11:13 am (UTC)
Perfection as usual, my dear! I always look forward to your layouts/updates.
Sep. 17th, 2016 04:53 pm (UTC)
Eeee, tysm! It's good to be back! ♥
Sep. 18th, 2016 12:43 am (UTC)
BEAUTIFUL! I am going to find a use for this because I love it!
Sep. 19th, 2016 04:42 pm (UTC)
Heeee, ty ty! ♥
Sep. 18th, 2016 09:59 pm (UTC)
Loving this layout! It looks real nice. Simple and classy. Threw it up in this journal to play with it and it actually has me wanting to play this character again!
Sep. 19th, 2016 04:44 pm (UTC)
Heeeeee, I saw yeah! I LOVE how it looks on your journal, especially with that icon!! ♥ Thank you!
Sep. 19th, 2016 08:23 pm (UTC)
Yes, well, it is so easy to make beautiful things when beautiful coding is provided. As always, you're amazing. ^_^ And right? That icon was just perfect.
Sep. 20th, 2016 11:54 pm (UTC)
SO BEAUTIFUL. And so crisp and clean too. I love this. <3333
Sep. 21st, 2016 01:58 am (UTC)
Eeeee, ty! I'm super pleased with the cleanness of this one too!
Sep. 24th, 2016 05:02 pm (UTC)
This is gorgeous! Question - I can't figure out how to get the journal title to show up for the life of me. Am I missing something??
Sep. 24th, 2016 09:26 pm (UTC)
Thank you! You'll need to put this into the custom text box and fill it in:

<div class="myheader"><h1><a href="/">Journal Title</a></h1><hr><h3>Subtitle Line</h3></div>
Sep. 24th, 2016 09:29 pm (UTC)
D'oh, and it's right there in the instructions. Thank you!! I saw that but since it was in the sidebar somehow thought it was for that instead.
Sep. 25th, 2016 09:53 pm (UTC)
(gently in the wind) Thank you for your continual html work and postings. I use them way too much.
Oct. 6th, 2016 01:25 am (UTC)
This is lovely, going to be using it here. Thanks for your continued awesome.
Oct. 14th, 2016 09:48 am (UTC)
Hey, Tess. For some reason, I can't get my icon to show up. The frame shows up just fine.
Oct. 18th, 2016 12:00 am (UTC)
Oh no! Can you show me?
Oct. 18th, 2016 12:02 am (UTC)
I finally figured it out, after starting from scratch. I forgot to change the coding. :p
Oct. 18th, 2016 12:03 am (UTC)
OH, hahaha. HEY IT HAPPENS (I've done it lmfao.) Glad you figured it out!
Oct. 18th, 2016 12:05 am (UTC)
It was a blonde moment, what else can I say. xD.
Oct. 17th, 2016 06:57 pm (UTC)
Used here. Also, I'm eloping with this layout to Tijuana. Hope you don't mind. Thank you for continuing the prettify my existence on IJ!
Feb. 2nd, 2017 05:59 pm (UTC)
Hi, may I ask how you got your header that way on this layout, it's beautiful?!
Oct. 18th, 2016 02:45 pm (UTC)
This is beautiful! I'm so glad to see you making new layouts! I've already used this one for this journal <3
Dec. 21st, 2016 03:32 pm (UTC)
Purely out of curiosity... but which parts would need to be edited in the sidebar for it to work on the left?
Apr. 29th, 2017 01:48 am (UTC)
Is there a way to get the page summary to show?
Apr. 29th, 2017 02:18 am (UTC)
Yep! Just remove .module-pagesummary, from the CSS (it's currently listed in a string of sidebar elements that are set to display:none.)
Apr. 29th, 2017 02:20 am (UTC)
Aug. 30th, 2017 08:23 am (UTC)
Hi, just wondering where to change userpics at?
Aug. 30th, 2017 08:24 am (UTC)
I mean, your instructions say

Custom stylesheet: Input the CSS provided, add a userpic URL to (USERPIC), and save!

Maybe I'm not seeing where that is in the code.
Aug. 30th, 2017 08:31 am (UTC)
CTRL+F on your stylesheet copy to find (USERPIC) and replace USERPIC with your icon URL inside the parenthesis.

It's near the bottom of the code in .module-customtext img{width:190px;background:url(USERPIC)center no-repeat;background-size:110px;margin-bottom:10px;border:none;} but generally CTRL+F is the fastest way to get to the right element you're looking for without having to skim code.
Aug. 30th, 2017 08:10 pm (UTC)
Ah, thank you, I found it! Next time, perhaps I shouldn't try to work on layouts at 2am.

You make beautiful layouts, by the way, I'm very happy with this one.
Sep. 24th, 2017 05:17 pm (UTC)
We're using this as the community layouts for [info]poweredup and it's working great! Just one question - is there a way to get the user icons to show, especially for the network community? Thanks in advance!
Sep. 25th, 2017 09:13 pm (UTC)
Aw, tysm! You're in luck, because this is a SUPER quick change; you just need to delete the following and you'll be good to go!

.lj-view-day .inner-entry-userpic, .lj-view-recent .inner-entry-userpic{display:none;}
Sep. 26th, 2017 02:53 am (UTC)
duh, thanks! :)