Breakdown of the Smooth Sailing stylesheet

[carriep63]

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

Comments

[masterslacker]

This comment is in response to this:
http://community.livejournal.com/carriep63_stuff/26272.html#listtitle

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

[carriep63]

Awesome. Will alter the tutorial after dinner.

[masterslacker]

This comment is in response to this:
http://community.livejournal.com/carriep63_stuff/27164.html#yearlinks

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

[skulkings]

May I ask what are the "#blank_sidebox" names for the hidden boxes?

*goes back to mudlying through code*

[carriep63]

That is an excellent question! I'm going to have to add this to the tutorial. They are:

#freetext, #freetext2, #freetext3

etc..

[irinafan]

damn Carrie it turned out amazing!!! =)

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

[carriep63]

It never would have happened if you didn't have the idea, so thank you for that!

[shaylabowyv]

I THINK SO WHAT IS GOING ON, ON STAGE RIGHT NOW RIGHT NOW IT'S JUST A LITTLE DEMONSTRATION YEAH, GREATEST SH# T EVER THIS WAS A PRETTY GOOD PARTY IT WORKED OUT RIGHT.

[chibifoxia]

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?

[carriep63]

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

[chibifoxia]

thankyou thankyou, that was how i thought you would do it but I wasn't positive. yay now I can make a pretty layout