Log in

No account? Create an account
posted on 7 Aug 2008 at 2:21

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. :)

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

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!


Paste these codes to the free text sidebox:

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


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;".

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;


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.

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! :)

posted on 7 Aug 2008 at 8:22 (UTC)
oh god i love it as usual. the stripes are cool!
posted on 7 Aug 2008 at 16:54 (UTC)
Thank you very much! :)
posted on 7 Aug 2008 at 10:56 (UTC)
I love it a lot :D
posted on 7 Aug 2008 at 16:55 (UTC)
I'm glad :D Thank you!
posted on 7 Aug 2008 at 13:35 (UTC)
Gorgeous, I love the stripes!
posted on 7 Aug 2008 at 16:55 (UTC)
Thank you! :)
posted on 12 Aug 2008 at 22:54 (UTC)
Stunning! I decided to use it for my page w/ credit. Thanks!

I do have a question, I noticed looking through past entries that the userpic icons are smaller than 100x100. I am wondering if there is a way to increase the size of the icons back to 100x100?
posted on 12 Aug 2008 at 23:22 (UTC)
Thank you very much!

Sure! :) Find .commentUserinfo-usericon img (under COMMENT PAGES) and delete "width: 70px;" and "height: 70px;".
posted on 12 Aug 2008 at 23:53 (UTC)
Squeee!! Thanks so much. :))
posted on 13 Aug 2008 at 0:12 (UTC)
You're welcome! :)
posted on 8 Sep 2008 at 2:35 (UTC)
Ooh, this is lovely! Using at my journal, thank you so much ♥
posted on 8 Sep 2008 at 9:07 (UTC)
Thank you! I love the changes you made. :)
posted on 21 Oct 2008 at 4:37 (UTC)
If I want the sidebar on the left, do I need to change anything in the CSS or just do it from the journal customization page?
posted on 21 Oct 2008 at 11:44 (UTC)
Well, both. In addition to choosing the sidebar on left option, you'll have to edit a few lines in the codes:

ENTRIES - .entryHolder: rewrite "border-right: 1px dashed #E7EFF8;" to "border-left: 1px dashed #E7EFF8;",

FOOTER - #footer-menu ul: replace "text-align: left;" to "text-align: right;" and

#footer-menu a, .footer-menu a:visited: rewrite "border-right: 1px dashed #484848" to "border-left: 1px dashed #484848;". That's all. :)
posted on 21 Oct 2008 at 14:12 (UTC)
Cool beans. Thank you. It's a very lovely layout, btw :)
posted on 21 Oct 2008 at 20:25 (UTC)
You're welcome and thanks! :D
(Deleted comment)
posted on 21 Dec 2008 at 9:34 (UTC)
Haha, yep, you did, on the other post!

Thank you and sure, editing the layout is totally fine! :D
posted on 12 Dec 2009 at 6:10 (UTC)
very nice layout, using this and will credit :D
posted on 22 Sep 2010 at 14:53 (UTC)
Love it! A question, though. I'd like to set Wrap Entry Text under User Info to 'no', but that seems to make the top bar look wonky. Is there anything in the CSS I can change to prevent the top bar from shifting?

Thanks and will credit!
This page was loaded Jul 22nd 2019, 9:13 pm GMT.