Log in

posted on 11 Jul 2008 at 23:28

When making a layout I have a hard time deciding on a color scheme (or the layout doesn't look as pretty as I wanted), and usually end up using black, white and grey. So, more colors this time! The colors I used are pretty muted, but it's a start. Also, the fact that you can put HTML in the free text sideboxes makes coding a topbar so much easier, I love it.

Still Smooth Sailing.

  • Style: S2 - Smooth Sailing
  • For free, paid, plus accounts (works well when the ads are 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: Right 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. On the Sidebar page hide every sideboxes except the Profile Sidebox (= Profile Position) and the Freetext Sidebox. Paste the matching codes below to the Free Text Sidebox Text box.

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!

For those who'd like a simpler topbar:

Replace your whole SIDEBAR section with this, change
BASICS --> .bodyblock --> "margin-top: 180px 0 0 0;" to "margin-top: 130px 0 0 0;"
and on the Sidebar page hide every sideboxes except the Free Text Sidebox and the Links Sidebox (= Links Visibility).

These are the images I used for the layout: lj user tiny icon, lj comm tiny icon. Please upload them to your own server.

1. Credit me. 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! :)

P. S. Hi to the people who friended me! :)
posted on 13 Jul 2008 at 19:06 (UTC)
i've got a problem wiht the layout: it keeps apearing like this


and i'm clueless on how to make it right, help please and thank you?
posted on 13 Jul 2008 at 20:27 (UTC)
Your topbar is placed a bit to the right because you have big pictures in one of your entries and they widen the whole layout. Under ENTRIES you'll find an ".entryText img" part. Edit it with this:

.entryText img {
max-width: 780px;

This code will resize the photos which are wider than 780px. (This works with Firefox, I don't know about IE.)

The second problem is entirely my fault, sorry. /o\ I totally forgot to code the navigation strip for this layout. There are two options to fix it. You either turn it off, or lower the header and topbar section so the navigation strip doesn't overlap them. If you'd like to leave the nav. strip, edit

(under HEADER)
.header-title: "top: -7px;" to "top: -2px";
.header-subtitle "top: -21px;" to "top: -16px";
.header-menu: "top: 43px;" to "top: 88px;"

(under SIDEBAR)
.sidebar: "top: 62px;" to "top: 107px";

I hope this works. Hmm, the nav. strip doesn't really look good in black. Would you like to change its color?
posted on 14 Jul 2008 at 0:17 (UTC)
that fixed it, and if you think other color would go well w/the layout, i'd be happy to change it. =)

thank you sooooo much. i loved the layout, you did a great job! <3
posted on 14 Jul 2008 at 0:56 (UTC)
Yay, I'm glad! I think it looks good if the nav. strip and the titles' have the same background color. Replace #282828 with #4a4a4a, #313131 with #525252 and #727272 with #7d7d7d (these are the colors of the background, the border and the links).

You're welcome and thanks! :D
posted on 25 Jul 2008 at 13:56 (UTC)
Hi! taking this marvelous layout. You did a very good job! I'm doing some changes to it though, hope you don't mind.
posted on 25 Jul 2008 at 14:21 (UTC)
Thank you! :) Of course not, feel free to change anything you'd like.
posted on 25 Jul 2008 at 16:45 (UTC)
*poke* if you're curious to see what it looks like now, it's here Thanks a lot for the base codes.
posted on 25 Jul 2008 at 17:10 (UTC)
Ooh, this looks so much prettier than mine. *__* I love it!

You're really welcome. :)
posted on 26 Jul 2008 at 21:46 (UTC)
I love your layouts, thanks for sharing these!
posted on 27 Jul 2008 at 11:58 (UTC)
Thank you so much! :)

(I hope you don't mind a suggestion. I looked at your journal and if you want only the freetext sidebox in the topbar, find SIDEBAR - .sidebox #freetext, and just take out "width: 670px;" and "margin-left: 150px;" this way there won't be a gap on the left.)
posted on 27 Jul 2008 at 15:23 (UTC)
Oh I do not mind one bit!! I have been trying to figure out whats wrong with it! I wanted my userpic to show up but cannot find where to set that so I will go fix where you said. Thanks again!
posted on 27 Jul 2008 at 15:56 (UTC)
Oh, right! You can set that at Profile Position on the Sidebar page (but then don't take out anything from .sidebox #freetext). I hope this helps. :)
posted on 27 Jul 2008 at 16:04 (UTC)
aha I found it!! Thanks again for your help and your layouts, I use them at both of my journals, they are by far my favorites online!
posted on 27 Jul 2008 at 16:12 (UTC)
You're welcome, I'm glad I could help! :) Thank you sososo much, that's really flattering!
(Deleted comment)
posted on 27 Jul 2008 at 11:41 (UTC)
I think the problem is that you chose the Smooth Sailing theme with the 2 Column (sidebar on left) page setup, instead of the 2 Column (sidebar on right). Look at the first installation step again.

The second problem is that your navigation strip overlaps your header, but I already told p1nktarantula how to fix it here.

I hope these will fix the layout!
(Deleted comment)
posted on 27 Jul 2008 at 16:03 (UTC)
After you paste the matching codes to the Free Text Sidebox Text box (under Free Text Sidebox), make sure that Free Text Position is not set to "hide", and its position is not the same as the profile's position. This should fix it. :)
(Deleted comment)
posted on 27 Jul 2008 at 16:22 (UTC)
Yay, I'm glad! :D You're welcome!
posted on 25 Aug 2008 at 6:26 (UTC)
hey ;) loved this layout, using it and credited ;) btw, i changed the color schemes. do check it out <3

posted on 25 Aug 2008 at 16:14 (UTC)
Thank you!

Okay, that seriously looks awesome *___* I lovelovelove the colors you used :3
posted on 15 Nov 2008 at 14:28 (UTC)
this layout is gorgeous! normally i want to change colours and things, but i love this just the way it is. although i would really like to add in a header - would that be possible?
posted on 15 Nov 2008 at 20:36 (UTC)
Wow, thank you, I'm glad you like it that much! Of course! I changed a few things in the codes to make it easier. First, note the height and width of your header pic (in pixels). After that find .pageblock and replace 'yourheader' with the url of your header in

background: url(yourheader) no-repeat top left; then

edit padding-top: 0px; with the height of your header and width: 830px; with the width of your header. That's all. :)
posted on 15 Nov 2008 at 20:37 (UTC)
ah fantastic!! thanks loads!!
posted on 15 Nov 2008 at 20:39 (UTC)
You're welcome! :)
posted on 9 Dec 2008 at 10:10 (UTC)
I really, really want to use this layout but I have this problem with it, and it's weird because I've gone through everything and checked the image sizes etc so, please help?

posted on 9 Dec 2008 at 10:19 (UTC)
Ooops, it seems I forgot something. /o\ The codes are edited, try again, they should work now. (Sorry!)
posted on 9 Dec 2008 at 10:52 (UTC)
Oh, yay! Thank you so much. I love it :)
posted on 9 Dec 2008 at 18:07 (UTC)
You're very welcome! :) (thanks for telling me about the bug!)
posted on 19 Jan 2009 at 7:59 (UTC)
How do you add a header?
posted on 20 Jan 2009 at 16:46 (UTC)
You're doing good, just edit these parts in your CSS:

.pageblock: "padding-top: 0;" with "padding-top: 220px;"
.pageheaderblock: "height: 220px;" with "height: 71px;"
.header-menu: "top: 202px;" with "top: 52px;".
posted on 24 Jan 2009 at 22:49 (UTC)
Thank you!!
posted on 29 Jan 2009 at 4:25 (UTC)
I was using another of your layouts and just switched to this one, you have a really nice style in your layouts that I like a lot :) Thank you for sharing! ^^
This page was loaded Jun 23rd 2017, 5:08 pm GMT.