Carrie ([info]carriep63) wrote in [info]carriep63_stuff,
@ 2006-08-01 20:23:00
Previous Entry  Add to memories!  Tell a Friend!  Next Entry
Entry tags:[s2] smooth sailing, css breakdown, tutorial

Breakdown of the Smooth Sailing stylesheet
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

Page 1 of 4
<<[1] [2] [3] [4] >>

(Post a new comment)


[info]girlboheme
2006-08-02 01:52 am UTC (link)
Seriously. You guys doing this is a godsend. Thank you so much.

(Reply to this) (Thread)

[info]carriep63
2006-08-02 01:59 am UTC (link)
It will probably be done by tomorrow. It's still being worked on.

(Reply to this) (Parent)

[info]sheila_chan
2006-08-02 04:36 am UTC (link)
wow. thank you:)

(Reply to this)


[info]mykindascene
2006-08-02 05:30 am UTC (link)
I've saved this, it's good to go back and look at, thanks. Can't wait for you to finish it.

(Reply to this) (Thread)

[info]carriep63
2006-08-02 02:23 pm UTC (link)
It should be done today... maybe.

(Reply to this) (Parent)
(no subject) - [info]lolafutom, 2008-07-16 03:25 pm UTC

[info]deepwonderment
2006-08-02 09:45 pm UTC (link)
you are beyond amazing. i love smooth sailing and needed something like this to make my own style sheet.

(Reply to this)


[info]nano_fly
2006-08-02 11:26 pm UTC (link)
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!

(Reply to this)


[info]masterslacker
2006-08-02 11:36 pm UTC (link)
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 :)

(Reply to this) (Thread)

[info]carriep63
2006-08-02 11:46 pm UTC (link)
Awesome. Will alter the tutorial after dinner.

(Reply to this) (Parent)

[info]masterslacker
2006-08-02 11:44 pm UTC (link)
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 :)

(Reply to this)


[info]skulkings
2006-08-03 04:24 am UTC (link)
May I ask what are the "#blank_sidebox" names for the hidden boxes?

*goes back to mudlying through code*

(Reply to this) (Thread)

[info]carriep63
2006-08-03 04:29 am UTC (link)
That is an excellent question! I'm going to have to add this to the tutorial. They are:

#freetext, #freetext2, #freetext3

etc..

(Reply to this) (Parent)

[info]irinafan
2006-08-03 11:04 am UTC (link)
damn Carrie it turned out amazing!!! =)

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

(Reply to this) (Thread)

[info]carriep63
2006-08-03 03:15 pm UTC (link)
It never would have happened if you didn't have the idea, so thank you for that!

(Reply to this) (Parent)
(no subject) - [info]shaylabowyv, 2008-07-16 12:27 am UTC

[info]chibifoxia
2006-08-03 11:23 am UTC (link)
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?

(Reply to this) (Thread)

[info]carriep63
2006-08-03 03:18 pm UTC (link)
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

(Reply to this) (Parent)(Thread)
(no subject) - [info]chibifoxia, 2006-08-03 04:29 pm UTC

[info]outof_focus
2006-08-03 02:19 pm UTC (link)
Awesome. Adding to memories :)

(Reply to this)


[info]garinungkadol
2006-08-04 05:29 am UTC (link)
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!

(Reply to this)


[info]gamera
2006-08-06 01:32 am UTC (link)
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.)

(Reply to this) (Thread)

[info]keisharesiq
2008-07-16 11:32 pm UTC (link)
This problem was driving me crazy since over one year and most people didn't even understand what the issue was.

(Reply to this) (Parent)

[info]drinkmealice
2006-08-08 01:37 pm UTC (link)
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! ♥

(Reply to this)


[info]xfelinaa
2006-08-08 09:52 pm UTC (link)
thank you so much for the guide!
I already made a new layout & for sure i will credit you in my userinfo!

(Reply to this)


[info]_charon
2006-08-22 11:47 pm UTC (link)
Thanks so much for this.
I've just started to work with this layout and you are making it a lot easier for me :D

(Reply to this)


[info]_charon
2006-08-23 01:10 pm UTC (link)
I'm sure this is a stupid question, but I'm new to this style ... anyway, I can't find out how to change the fontcolor of the usernames under the icons. I thought this is done through .entryUserinfo but it doesn't work.

(Reply to this) (Thread)

[info]carriep63
2006-08-23 02:48 pm UTC (link)
Remember that it's a link, so you have to use a link override:

.entryUserinfo-username a{
color:red !important;
}

(Reply to this) (Parent)(Thread)
(no subject) - [info]_charon, 2006-08-23 04:18 pm UTC

[info]ang_kwaderno
2006-08-24 09:07 am UTC (link)
Hi! I'm new to css. I would just like to ask if its possible to have my header and sidebar in one column and my entries in another, something like this:

headerentries
links, sidebarentries


I'm afraid I'm a bit confused on what I should change. Any help is appreciated:)

(Reply to this)


[info]denrito
2006-08-24 08:44 pm UTC (link)
Ok, I just wanted to say THANK YOU SOOOOO MUCH!!!
Not only have you been amazing help, but you've actually motivated me into working with css again! So thanks! :DD

(Reply to this)


[info]ruinsofmysanity
2006-08-30 04:29 pm UTC (link)
I pasted your css file into the "Custom CSS" box on the "Custom Options" section of Journal Display. But when I view my journal, everything is left-aligned and the background is white. I haven't altered the CSS file at all - any idea what might be causing this and how to fix it? Thanks.

(Reply to this)


[info]relaxandsleep
2006-09-04 06:52 pm UTC (link)
Hi, i just have a quick question. i have my moodtheme set on the top but i want the mood pic before the word and i can't get it, do you know how to fix this?

(Reply to this)


[info]rubyslippers
2006-09-23 07:32 pm UTC (link)
Thank you for this comprehensive guide. This is exactly what I've been looking for.

(Reply to this)


[info]tasha
2006-10-14 06:58 pm UTC (link)
ok - so basically to do an s2 layout - I think of the journal as the permanent html file, and the css is completely customizable? *jaw drop*

If that's the case - I CAN TOTALLY DO THAT! S2 here I come!

Why did it take me learning the basics of web design to get that though?

I also hand wrote a VERY simple website today (just to make sure it wasn't lost on me) and it came very very easy to me. I can't wait to start getting more technical!

(Reply to this) (Thread)

[info]carriep63
2006-10-14 09:01 pm UTC (link)
Awesome, Tasha! Now that you are getting into S2, all hell will indeed break through.

(Reply to this) (Parent)(Thread)
(no subject) - [info]tasha, 2006-10-14 10:49 pm UTC

(Anonymous)
2006-10-15 09:19 pm UTC (link)
A few of my members said it didn't work with sponsored accounts. Did I do something wrong, or is this just the way it is?

(Reply to this)


[info]juleskicks
2006-10-25 07:04 pm UTC (link)
Oh, this is just what I needed. Thank you so much for this!

(Reply to this)

Page 1 of 4
<<[1] [2] [3] [4] >>

Create an Account
Forgot your login or password?
Login w/ OpenID
English • Español • Deutsch • Русский…