Intro to CSS / Applying CSS Overrides
This tutorial describes the basic idea of CSS as a mechanism to style HTML elements, and shows users how to customize their layout via the Customize interface, using CSS overrides obtained from other tutorials or users. As applying CSS overrides is built into the Custom Options wizard, this will work for all users.
This tutorial will not describe how to construct your own CSS overrides. For a breakdown of the Smooth Sailing style sheet (the class names used and what they control), check out this tutorial on the community.
Part 1: What is CSS?
Let's start with analogy using concepts in the LiveJournal world: CSS is to a HTML document, what Colour Themes are to Layouts - A simple mechanism to change styling in an entire HTML document with one easy step. First define some terminology:
CSS - stands for "Cascading Style Sheet". A style sheet contains all the necessary information to tell the HTML file how to apply style information (colours, text sizes, bolding, borders, spacing, etc).
Class - A class is the name given to a group of elements on the page. By giving multiple elements the same class (or name), then the style sheet will apply the same style to each element. A real-world example with be a mass group of people - some of them are "male" and some of them are "female" - each of those names conveys certain characteristics.
Classes are where the some of the power of CSS comes in. Suppose you have 100 boxes on a page and you want them all to be styled exactly the same. You can give each box the same class, and in the style sheet describe the formatting once for the class. Each box will take on all those formatting properties even though you've only typed it once. Furthermore, if you want to change something, you don't have to change the class names at all. The class names stay the same. You only have to change the formatting in the style sheet in that one location and every one of those 100 boxes will change. This is why it is very useful to have all the elements in a HTML document given classes properly. For example, each and every box in the sidebar has the class name "sidebox".
Id - An id is similar to a class in that it can style elements, but it has one difference: an id can only apply to one element on a page. By specifying each element with a class as well as a unique id, you can specify formatting in the style sheet for that specific element only, even if it belongs to a broader class of elements. To follow up on the real-world example above, within the group a lot of people can be "male". But how would you identify me and only me in that group if I was there? why just use my lj-userid since it's unique: "That male who is also known as masterslacker!". Why would you want to do this?
Ids are where the rest of the power of CSS comes from. I'll continue to use the sideboxes as examples since this is one of the few areas where ids are used in Smooth Sailing. Any Smooth Sailing layout can have up to 17 sideboxes (profile, summary, free text, etc). They are all mostly formatted the same way (background colour, text size, text colour, spacing, etc). But, a few of them have their text left aligned, and a few have their text center aligned. So, each sidebox is given the class "sidebox" so they can all be formatted the same, and then each box is given a unique id (eg. the profile box has an id "profile", and the summary box has an id "summary"). That way, the CSS can define alignment specific to each id, and it can be changed in the style sheet via a CSS override if users want.
By creating a style sheet that lists all the classes/ids used, and by giving properties to each of those classes/ids, you extract all the style information from the actual structure of the website (text, links, tables, etc). This way, you don't ever have to go into the HTML to change anything - you only need to change the style sheet.
For a breakdown of the Smooth Sailing style sheet (the class names used and what they control), check out this tutorial on the community.
For some good detailed resources on CSS, you check out these websites:
Part 2: Using CSS Overrides
Smooth Sailing uses CSS wherever possible to style elements, so many things can be changed using CSS Overrides - background colours, text sizes, bolding, fonts, spacing, borders, hiding things, etc. - almost anything except changing the actual text itself.
If you are given a CSS override from a tutorial or from another user in the community, follow these steps to apply your CSS override: First go to the Customize page, then click on Custom Options, and then click on the Custom CSS section. The settings there let you change the behaviour of style sheets. If you have never entered a CSS override before, the Custom Stylesheet box will be empty. Anything you add into this box will override any CSS settings that exists in the current style sheet.
To add a CSS override and leave everything else on your layout the same, paste the CSS into the "Custom Stylesheet" box. Do not change any of the other settings on that page. Hit the Save Changes button at the bottom of the page when you're done. That's it. You are done. You will see the changes take effect when you refresh your journal.
For any future CSS overrides that you would like to add, go back to this box and paste your new CSS override at the end of the box. Do not erase what may be in the box or you will remove any previous CSS overrides you entered.
This tutorial will not describe how to construct your own CSS overrides. For a breakdown of the Smooth Sailing style sheet (the class names used and what they control), check out this tutorial on the community.
Part 1: What is CSS?
Let's start with analogy using concepts in the LiveJournal world: CSS is to a HTML document, what Colour Themes are to Layouts - A simple mechanism to change styling in an entire HTML document with one easy step. First define some terminology:
CSS - stands for "Cascading Style Sheet". A style sheet contains all the necessary information to tell the HTML file how to apply style information (colours, text sizes, bolding, borders, spacing, etc).
Class - A class is the name given to a group of elements on the page. By giving multiple elements the same class (or name), then the style sheet will apply the same style to each element. A real-world example with be a mass group of people - some of them are "male" and some of them are "female" - each of those names conveys certain characteristics.
Classes are where the some of the power of CSS comes in. Suppose you have 100 boxes on a page and you want them all to be styled exactly the same. You can give each box the same class, and in the style sheet describe the formatting once for the class. Each box will take on all those formatting properties even though you've only typed it once. Furthermore, if you want to change something, you don't have to change the class names at all. The class names stay the same. You only have to change the formatting in the style sheet in that one location and every one of those 100 boxes will change. This is why it is very useful to have all the elements in a HTML document given classes properly. For example, each and every box in the sidebar has the class name "sidebox".
Id - An id is similar to a class in that it can style elements, but it has one difference: an id can only apply to one element on a page. By specifying each element with a class as well as a unique id, you can specify formatting in the style sheet for that specific element only, even if it belongs to a broader class of elements. To follow up on the real-world example above, within the group a lot of people can be "male". But how would you identify me and only me in that group if I was there? why just use my lj-userid since it's unique: "That male who is also known as masterslacker!". Why would you want to do this?
Ids are where the rest of the power of CSS comes from. I'll continue to use the sideboxes as examples since this is one of the few areas where ids are used in Smooth Sailing. Any Smooth Sailing layout can have up to 17 sideboxes (profile, summary, free text, etc). They are all mostly formatted the same way (background colour, text size, text colour, spacing, etc). But, a few of them have their text left aligned, and a few have their text center aligned. So, each sidebox is given the class "sidebox" so they can all be formatted the same, and then each box is given a unique id (eg. the profile box has an id "profile", and the summary box has an id "summary"). That way, the CSS can define alignment specific to each id, and it can be changed in the style sheet via a CSS override if users want.
By creating a style sheet that lists all the classes/ids used, and by giving properties to each of those classes/ids, you extract all the style information from the actual structure of the website (text, links, tables, etc). This way, you don't ever have to go into the HTML to change anything - you only need to change the style sheet.
For a breakdown of the Smooth Sailing style sheet (the class names used and what they control), check out this tutorial on the community.
For some good detailed resources on CSS, you check out these websites:
Part 2: Using CSS Overrides
Smooth Sailing uses CSS wherever possible to style elements, so many things can be changed using CSS Overrides - background colours, text sizes, bolding, fonts, spacing, borders, hiding things, etc. - almost anything except changing the actual text itself.
If you are given a CSS override from a tutorial or from another user in the community, follow these steps to apply your CSS override: First go to the Customize page, then click on Custom Options, and then click on the Custom CSS section. The settings there let you change the behaviour of style sheets. If you have never entered a CSS override before, the Custom Stylesheet box will be empty. Anything you add into this box will override any CSS settings that exists in the current style sheet.
To add a CSS override and leave everything else on your layout the same, paste the CSS into the "Custom Stylesheet" box. Do not change any of the other settings on that page. Hit the Save Changes button at the bottom of the page when you're done. That's it. You are done. You will see the changes take effect when you refresh your journal.
For any future CSS overrides that you would like to add, go back to this box and paste your new CSS override at the end of the box. Do not erase what may be in the box or you will remove any previous CSS overrides you entered.