Log in

No account? Create an account

Previous Entry | Next Entry

This tutorial is going to break down some of the CSS that is used in the Smooth Sailing style.  This will help those of you that customize your layout using stylesheets and custom CSS to know what does what.

  • This is for all account types.
  • Basic (free) account users will not be able to customize the comments page.
  • You must have a basic working knowledge of CSS

Download CSS file
(right click and save target as)

If you are new to Smooth Sailing and CSS, you may want to read the Intro to CSS tutorial. It also tells you the best way to apply CSS overrides to your Smooth Sailing style.

The Smooth Sailing style is made of four basic parts:

  1. The page is the container that holds the whole thing (header, body, footer).

  2. The header is at the top. It contains the title, subtitle and the navigation links.

  3. The body is below the header. There is the body title, entries, sidebar and [entry] footer.

  4. The [page] footer is at the very bottom of the page.

I am breaking this tutorial into seven main parts:

Page | Header | Body | Entries | Sidebar | Comment Page | Archive/Tags Page


( 142 comments — Leave a comment )
Page 1 of 7
<<[1] [2] [3] [4] [5] [6] [7] >>
Aug. 2nd, 2006 01:52 am (UTC)
Seriously. You guys doing this is a godsend. Thank you so much.
Aug. 2nd, 2006 01:59 am (UTC)
It will probably be done by tomorrow. It's still being worked on.
Aug. 2nd, 2006 04:36 am (UTC)
wow. thank you:)
Aug. 2nd, 2006 05:30 am (UTC)
I've saved this, it's good to go back and look at, thanks. Can't wait for you to finish it.
Aug. 2nd, 2006 02:23 pm (UTC)
It should be done today... maybe.
(no subject) - lolafutom - Jul. 16th, 2008 03:25 pm (UTC) - Expand
Aug. 2nd, 2006 09:45 pm (UTC)
you are beyond amazing. i love smooth sailing and needed something like this to make my own style sheet.
Sep. 18th, 2010 01:32 pm (UTC)
I agree. I have used this in many of the sites i design for my clients. Free Web Design
Aug. 2nd, 2006 11:26 pm (UTC)
Thank you so much for doing this I've always wanted to mess with the CSS with a style but never thought how to do it you rock!
Aug. 2nd, 2006 11:36 pm (UTC)
This comment is in response to this:

When editing a user's Links List (http://www.livejournal.com/manage/links.bml), you can put a heading by leaving the url blank. In the links list sidebox this shows up as plain text, so I wanted a way to format it without changing the actual links. So any headings have class "listtitle" and that class is bolded in the stylesheet.

Also just to let you know, there are also classes "listspacer" (for blank lines), and "listitem" for the actual links. However, neither of those have special formatting in the stylesheet.

If you want to check out how they're used, look at the function
Page::lay_print_sidebar_systemlinks() in the source code for Smooth Sailing.

Mike :)
Aug. 2nd, 2006 11:46 pm (UTC)
Awesome. Will alter the tutorial after dinner.
Aug. 2nd, 2006 11:44 pm (UTC)
This comment is in response to this:

To be honest, I have no idea what they are either.

I think at one point I was trying to do a list of years rather than just the next and previous year on the archive page, but I abandoned the idea. Those two classes were probably remnants of that code that never got removed from the style sheet.

Whoops :)
Aug. 3rd, 2006 04:24 am (UTC)
May I ask what are the "#blank_sidebox" names for the hidden boxes?

*goes back to mudlying through code*
Aug. 3rd, 2006 04:29 am (UTC)
That is an excellent question! I'm going to have to add this to the tutorial. They are:

#freetext, #freetext2, #freetext3

Aug. 3rd, 2006 11:04 am (UTC)
damn Carrie it turned out amazing!!! =)

I'm going to pimp this right now! :D

Aug. 3rd, 2006 03:15 pm (UTC)
It never would have happened if you didn't have the idea, so thank you for that!
(no subject) - shaylabowyv - Jul. 16th, 2008 12:27 am (UTC) - Expand
Aug. 3rd, 2006 11:23 am (UTC)
This is wonderful. I heard about this from another community. I'm pretty sure I know how to do it, but just to make sure, how would you add a header image to the layout?
Aug. 3rd, 2006 03:18 pm (UTC)
There are a few different ways. I use the .pageblock class and add a background image to it. It's explained a bit better here: http://community.livejournal.com/s2smoothsailing/24160.html
(no subject) - chibifoxia - Aug. 3rd, 2006 04:29 pm (UTC) - Expand
Aug. 3rd, 2006 02:19 pm (UTC)
Awesome. Adding to memories :)
Aug. 4th, 2006 05:29 am (UTC)
Wonderful. I've been wanting to get my feet wet with Smooth Sailing but all the divs made it a bit difficult. Thanks for the guide!
Aug. 6th, 2006 01:32 am (UTC)
Thank you for compiling this! (I found the comment page to be particularly helpful, since that's the one section I've had the most problem with in my own customizations.)
Jul. 16th, 2008 11:32 pm (UTC)
This problem was driving me crazy since over one year and most people didn't even understand what the issue was.
Aug. 8th, 2006 01:37 pm (UTC)
This is just what I've been looking for. Thank you, you guys are doing the most amazing things to help us! This is so kind, thank you so much! ♥
Aug. 8th, 2006 09:52 pm (UTC)
thank you so much for the guide!
I already made a new layout & for sure i will credit you in my userinfo!
Page 1 of 7
<<[1] [2] [3] [4] [5] [6] [7] >>
( 142 comments — Leave a comment )


Jason Mraz
Carriep63's Tutorials 'N Junk

Latest Month

October 2007