?

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

Comments

( 142 comments — Leave a comment )
Page 1 of 7
<<[1] [2] [3] [4] [5] [6] [7] >>
girlboheme
Aug. 2nd, 2006 01:52 am (UTC)
Seriously. You guys doing this is a godsend. Thank you so much.
carriep63
Aug. 2nd, 2006 01:59 am (UTC)
It will probably be done by tomorrow. It's still being worked on.
sheila_chan
Aug. 2nd, 2006 04:36 am (UTC)
wow. thank you:)
mykindascene
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.
carriep63
Aug. 2nd, 2006 02:23 pm (UTC)
It should be done today... maybe.
(no subject) - lolafutom - Jul. 16th, 2008 03:25 pm (UTC) - Expand
deepwonderment
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.
webman1971
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
nano_fly
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!
masterslacker
Aug. 2nd, 2006 11:36 pm (UTC)
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
Aug. 2nd, 2006 11:46 pm (UTC)
Awesome. Will alter the tutorial after dinner.
masterslacker
Aug. 2nd, 2006 11:44 pm (UTC)
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
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*
carriep63
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

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

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

carriep63
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
chibifoxia
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?
carriep63
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
outof_focus
Aug. 3rd, 2006 02:19 pm (UTC)
Awesome. Adding to memories :)
garinungkadol
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!
gamera
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.)
keisharesiq
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.
drinkmealice
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! ♥
xfelinaa
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 )

Profile

Jason Mraz
carriep63_stuff
Carriep63's Tutorials 'N Junk
Livejournal

Latest Month

October 2007
S M T W T F S
 123456
78910111213
14151617181920
21222324252627
28293031