[Tutorial] How to Create a JC Banner -- Style Sheets

Discussion in 'Fan Design - Sites and Graphics' started by Grimby, Jul 23, 2009.

Moderators: Grimby
  1. Grimby Technical Consultant

    Administrator
    Member Since:
    Apr 22, 2000
    star 7
    This tutorial is a continuation of the JC Banner Graphics Tutorial. If you aren't following the tutorial and are just here for the style sheet reference, skip to the next section.

    Customizing the Style Sheet
    Open up stylesheet.css in your editor of choice and take a look at it. You should see a list of selectors (i.e. "body"), each with its own properties (i.e. "color:white;"). Each selector defines the style for an element of your page. Let's take a look at one of them:
    .BoardRowB {
    background-color: #F6E1BD;
    color: black;
    text-decoration: none;
    }

    Here we have the selector ".BoardRowB", which defines the style of certain table cells. Its basic properties are background color, text color, and text decoration. By changing the property values, we might come up with something like this:
    .BoardRowB {
    background-color: aliceblue;
    color: #CCCCCC;
    text-decoration: bold;
    }

    Notice that while we have changed the values, the syntax remains the same. Make sure when you are editing the style sheet that you don't accidentally delete the brackets, and each property has a semicolon at the end. Each time you make changes to the style sheet, save it and refresh your browser to see the results.
    Also note above that you can use either color names or html hex values as color properties. A list of color names can be found here.

    The test page should help you to figure out which selectors define what. When viewing it in your browser, you will see the selector names in the places they are used. For example, "MainMenuRow" appears in the text inside the MainMenuRow section. And the links in that section are labeled as "MainMenuLink". For a complete reference of all the selectors, see the reference below.

    [image=http://www1.theforce.net/jc/images/banner-tutorial/Image24.jpg] Now comes the part where you endlessly play around with colors and text styles until you decide on the perfect scheme. An easy way to choose the board colors is to go back into Photoshop and grab colors out of your artwork using the eyedropper tool. Click on the foreground color to bring up the color picker window, then use the dropper tool to click on an area of your image to get the color. Copy the HTML color code at the bottom of the window and then paste it into your style sheet. (Don't forget to include the "#" sign in front of the code!)

    If you're not very good at coming up with colors that match, you might try using an online color matching tool like this one.

    Creating a good style sheet can be a little tricky at first, especially if you don't have much experience working with them. But with a little practice and a lot of patience, you'll get the hang of it.

    [image=http://www1.theforce.net/jc/images/banner-tutorial/Image25.jpg]



    Style Sheet Reference
    For reference, here's a list of all the selectors and a description of each:
    body - Defines the page background, default font, and text color. Generally speaking, adjust only the color and background.
    a.link, a.visited, a.hover, a.active - Use these to define different link states. (Usually only the text-decoration property is adjusted here.)
    .left - Defines the background color of the left strip. Match this to the background color of your side image.
    .MainTable - Defines the background color and the default font settings of the entire board table.
    .MainMenuRowAlt - Defines the color and font style for the Alt Row text, aka the pm notification ("1 new") and "JC Announcement" text. Do not adjust the background color.
    .MainMenuRow - Defines the color and text of the Main Menu Row.
    .MainMenuLink - Defines t
    />
Moderators: Grimby