CSS Selectors for Custom Templates

The colors stylesheet is located here:
http://www.screenstepslive.com/stylesheets/screensteps_colors.css
Basically, by copying out any of these selectors in the sheet and pasting them into you custom template you will be able to override the color on ScreenSteps Live.

Here are some example selectors taken from the stylesheet.

1. (color) div#ScreenStepsContent div.search, div#ScreenStepsMainContent div.header h1, div#ScreenStepsSidebar div.sidebar_block h2
2. (background-color) div#ScreenStepsContent div.header
3. (background-color) div#ScreenStepsContent div.search
4. (background-color) div#ScreenStepsSidebar h3, div#ScreenStepsSidebar div.pdf
5. (color) div#ScreenStepsSidebar h3
6. (color) div#ScreenStepsMainContent a, div#ScreenStepsSidebar a
7. (background-color) div#ScreenStepsContent h1, div#ScreenStepsContent h2, div#ScreenStepsContent h3, div#ScreenStepsContent div#ScreenStepsMessage, div#ScreenStepsContent div.column_body

You will see that many styles have multiple selectors. This allows you to change one color setting and have it affect multiple elements. You are free to divide these selectors up if you would like.

If you would like to removed the rounded corners from the content boxes enter the following:

div#ScreenStepsContent div.header,
div#ScreenStepsContent div.column_body,
div#ScreenStepsContent div#ScreenStepsMessage {
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}

If you would like to remove borders from the content area add the following css code:

div#ScreenStepsContent div.header,
div#ScreenStepsContent div#ScreenStepsMessage,
div#ScreenStepsContent div.column_body {
border: none;
}