allwashedout

#5


This layout was inspired by the Boxer theme (I love its clean and organized look), but didn't really end up looking like that. And because my last two layout had a topbar, too, I made a sidebar version as well for this one. Hope you'll like it. :)




INFO
  • Style: S2 - Smooth Sailing
  • For free, paid, plus accounts (ad placement: between entries)
  • Best viewed at 1024*768 or higher
  • Was tested in Firefox and IE (it works better with Firefox)


INSTALLING THE LAYOUT
1. Go to LJ's customize page. Type 'Smooth Sailing' in the search box, hit enter, then apply one of the available themes with the 2 Column (sidebar on right) page setup. (screencap)

2. Go to the Theme customization page and choose these settings at Presentation:
  • Userinfo Position in Entries: Left side of the entry text
  • Username position in entries: Below usericons
  • MetaData Position: Below entry text
  • Entry Tags Position: With Metadata (mood, music)
  • Linkbar Alignment in Entries: Align Right
  • Linkbar Alignment in Comments: Align Right
Hit 'Save Changes'.

3. Go to the Sidebar page. If you chose the topbar version, hide every sideboxes, except the Profile Sidebox (=Profile Position), the Freetext Sidebox and the Freetext #2 Sidebox. Paste the matching codes below to the Free Text Sidebox #2 Text box - screencap - (this is important! the easiest way to code was to put the text in one sidebox, and the HTML in the other. The order you set for them doesn't matter.)
With the sidebar version you decide about the sideboxes' order/visibility.

4. Go to Custom CSS, and select the following:
  • Use layout's stylesheet(s): No
  • Use layout's stylesheet(s) when including custom external stylesheet: No
  • Leave the Custom external stylesheet URL box blank.
  • Copy + paste the code to the Custom stylesheet box. (screencap)
Hit 'Save changes', and you're done!


CODES
TOPBAR VERSION

Paste these codes to the free text sidebox:



After you edited it with your info, don't forget to take out every enters!
SIDEBAR VERSION


These are the images I used for these layouts: .body background, .pageheaderblock background, .header-menu/.footer-menu/.pagefooterblock background, lj user tiny icon, lj comm tiny icon. Please upload them to your own server. Pattern credit: shizoo.frozen-media.de.

Note: The layout right now looks wrong with the navigation strip. If you don't want to turn if off, change the following parts in the CSS:

Topbar version
HEADER - .header-menu - "top: 0px;" to "top: 45px;"
HEADER - .header-title - "top: 51px;" to "top: 96px;"
HEADER - .header-subtitle - "top: 85px;" to "top: 130px;"
SIDEBAR - .sidebar - "top: 115px;" to "top: 160px;".

Sidebar version
HEADER - .pageheaderblock - "height 116px;" to "height: 122px;"
HEADER - .header-menu - "top: 0px;" to "top: 50px;"
HEADER - .header-title: - "top: 54px;" to "top: 104px;"
HEADER - .header-subtitle - "top: 85px;" to "top: 135px;".


FREQUENTLY ASKED
1. You chose the topbar one and it looks like this. When you choose the Smooth Sailing theme, make sure that you apply it with the 2 Column (sidebar on right) page setup.

2. How to add a header? Because the headerimage doesn't have its own class (like with FlexiSquares), your header is the background of the body/pageblock/pageheaderblock. This time it will be the background of .pageblock. First, you need to know the height of your header (in pixels). Find this part under pageblock:

padding: 0px 0 0 0;
background-image: url('');
background-repeat: no-repeat;
background-position: top center;

and edit it like this:

padding: your header's height in pixels 0 0 0; (for example "padding: 300px 0 0 0;")
background-image: url('YOURHEADERSURL');
background-repeat: no-repeat;
background-position: top center;

find

HEADER - .header-title - "top: 51px;" and add your header's height (in pixels) to the number. Same with
HEADER - .header-subtitle - "top: 85px;" and HEADER - .header-menu - "top: 0px;". If you chose the topbar version, add your header pic's height to SIDEBAR - .sidebar - "top: 115px;", too.


RULES!
1. Credit me.



or something similar. Also, don't repost the codes as your own.
2. You can make as many changes as you want (but still credit me for the original code, please). If you want to change something but don't know how, I'll try to help, just ask.
3. Enjoy! :)

layoutspublicsmooth sailing

LJ Video