Previous | Next

Layout: Low Profile

image preview | [info]tess047


Hey, guys! Today we've got Low Profile, a minimal clutter layout that stows your extras away in a slide-out sidebar. This is an S2 Complete Style layout trick I've been meaning to do for a while now, but don't worry! If you're loving the look but don't need a sidebar panel, you can choose One Column and get a great minimalist, almost Generator inspired layout out of the deal, hell yeah!

Layout Coding

Installation Guide

♡ Go to Basics and choose S2 for your style system, fill in your title (and subtitle, if desired), 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: One Column for no slideout panel or Two Column (sidebar on left) for slideout panel
Disable customized comment pages for your journal: Yes
Navigation link names: Recent/Archive/Friends/Profile
Fill in sticky note if desired. If you have chosen One Column skip the next steps, paste the CSS, and save! Make sure you put credit in your profile in this case.
Fill in custom sidebar module if desired. This is where your image and blurb goes.
Fill in second custom sidebar module: <div class="toggle"><a href="#beta" class="open"><img src="TOGGLEPIC"></a><a href="#" class="close">&times;</a></div>
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!

Roboto Condensed - Page text
Syncopate - Headings

TOGGLEPIC - Sidebar toggle button userpic
USERPIC - Header userpic
https://i.imgur.com/GNPqyaw.jpg - Background
https://i.imgur.com/qJMbjT9.png - User and lock icon

255,255,255 Sidebar image border, sidebar link background and hover background (semi-transparent rgba value)
#fff Page background, entry background, calendar page day name
#ddd Top nav borders, entry border, userpic poster link, linkbar text, tags page border, sidebar text
#bbb Link hover color, sidebar link color
#999 Entry date and tags, userpic poster link hover, linkbar hover
#222 Page text
#000 Sidebar background, toggle button background/border, blockquote border, header text/link color, entry heading and link color, userpic hover info background, linkbar background, calendar page day name background
0,0,0 All box shadows (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!


Feb. 24th, 2018 02:21 am (UTC)
SLKDFJLDSJFL. GUHHH! Oh my goodness, this one is incredible and totally perfect for a character. You keep outdoing yourself. AMAZING, bb. <333
Feb. 25th, 2018 05:46 pm (UTC)
Feb. 24th, 2018 07:38 am (UTC)
ooooh, i really really like this one.
Feb. 25th, 2018 05:46 pm (UTC)
SAME. Idk why it took me so long to get around to using :target on an S2 sidebar LOL.
Feb. 24th, 2018 07:41 pm (UTC)
this is so awesome!
Feb. 25th, 2018 05:45 pm (UTC)
♥ Aw, thank you!!
Feb. 24th, 2018 11:28 pm (UTC)
I love this! I'd been looking for something to use with this journal and this was perfect. Thank you!
Feb. 25th, 2018 05:45 pm (UTC)
Ahhh, that looks rad!! ♥ Thank you!
Feb. 25th, 2018 01:04 am (UTC)
This is incredible! 😍
Feb. 25th, 2018 05:45 pm (UTC)
Eeee, tysm! ♥
Feb. 25th, 2018 05:07 pm (UTC)
Real quick question! How would I make it so that the background image doesn't repeat? Asking for a friend.
Feb. 25th, 2018 05:44 pm (UTC)
LOL! Okay so in the background specs you'll want to add center after fixed (so it reads fixed center; instead of just fixed;) and then after this add background-size:cover; to make sure your image fits different screen sizes.
Mar. 1st, 2018 02:07 am (UTC)
this is so PRETTY. i want to use it for a character now. XD
Mar. 12th, 2018 07:33 pm (UTC)
Heee, ty boo!! I FEEL THAT LOL.
Mar. 8th, 2018 11:36 pm (UTC)
I actually ported this to DW, and it ported really easily! Usually I have to toy with the layout a little to get it just right, but this one imported with no effort! I love it!
Mar. 12th, 2018 07:33 pm (UTC)
Oooh, that's SUPER handy to know; thanks for the heads up! ♥ I'm glad a more "hacked" layout ported so easily haha.
Mar. 16th, 2018 07:11 am (UTC)
so so pretty!

I was using an edited 'Woodlands' for my character before but I was wanting to give her a bit of a refresh, and decided this one was it. [info]pushingpaper is the end result.

I was wondering, since I don't use them at all when viewing entries on the friends page, how do I go about removing 'TAGS REMEMBER TELL TRACK' from the footer on all views?
Mar. 17th, 2018 12:03 am (UTC)

I was chatting away to friends when I remembered you helped me out on the same matter with one of your other layouts, so i just grabbed the code from that one and c+p it, and... managed not to screw anything up.
Mar. 17th, 2018 05:56 pm (UTC)
Not sure what I'm doing wrong, but I'm trying to use this and I can't get the sidebar to come up :(
Mar. 17th, 2018 09:22 pm (UTC)
Hey there I'm using this at this journal here [info]xpro and I somehow have ended up with a scroll bar in my entry? I'm not sure if it's something in the entry itself - though I dummied in the same image code as your nav code for the image so I don't think that's it, not sure if I need to change something in the layout code? Or if I'm just being a dumbass and missing something very simple lol.
Mar. 18th, 2018 05:33 pm (UTC)
Disregard. It was me.

♡♡♡ thanks for everything! I adore this one, it's perfect for mobile too!
Aug. 26th, 2018 09:45 pm (UTC)
Using for this journal! Is there a way to shorten the space at the top of the layout, like on the top/bottom of the header icon?
Aug. 26th, 2018 09:56 pm (UTC)
Absolutely! Go to this section and edit the highlighted areas!

#header{padding:30px 0 0 0;color:#000;height:50vh;min-height:200px;display:flex;align-items:center;justify-content:center;}

Changing it to simply height:200px; and then deleting the min-height:200px; would be perfect if you wanted it to only be the height of the content plus a little breathing room!
Aug. 26th, 2018 10:00 pm (UTC)
You're a golden goddess!! Thank you!!
Oct. 10th, 2018 10:47 pm (UTC)
How do I fix the circle next to the name at the top in the header? Its coming up just grey.

I tried replacing userpic (here: inner:before{content:'';display:block;width:90px;height:90px;background:#ddd url(userpic)center;background-size:100%;border-radius:120px;} ) and it broke the whole thing when I had anything but 'userpic' in that () so I'm guessing I was looking at replacing the wrong thing :|
Oct. 11th, 2018 12:25 am (UTC)
No, that should be right! Can I see the journal you tested it on? It's likely just a small typo!
Oct. 11th, 2018 12:28 am (UTC)
Journal is this one! I tried two different images (one that had a .gif and one that didn't) and both did it! No idea what I've screwed up that must have done it. Thought it was a missing ( or ) at first but ALAS.
Oct. 11th, 2018 12:38 am (UTC)
SUPER weird, huh... I'm not sure, but I have it working on my end! If you could just replace the corresponding sections with this and lmk if it works?

#header-inner:before{content:'';display:block;width:90px;height:90px;background:#ddd url(https://i.imgur.com/wzpDa81.gif)center;background-size:100%;border-radius:120px;}
Oct. 11th, 2018 01:28 am (UTC)
Yup, that works. Might have just been the images I was choosing? Whoooo knows but I'm just gonna leave that cause its working. THANK YOU.
Oct. 11th, 2018 01:33 am (UTC)
No problem! I'd say upload to Imgur if you want something new in its place, but the original URL from your sidebar toggler worked in it as well!