• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Project 9. Setting Styles Dynamically > Build Color Scheme Style Sheets

Build Color Scheme Style Sheets

Now that everything is broken out correctly, you’re probably starting to see how you’re going to set up your new colors. You have one style sheet for positioning, and you need one style sheet for each color scheme. In this section you’re going to build the additional style sheets for each of the color schemes.

1.
Right-click/Ctrl-click yellow.css in the Files panel, and choose Edit > Duplicate to create a copy of yellow.css. Repeat this step once more to create another duplicate of yellow.css. You now have new style sheets ready to go: Copy of yellow.css and Copy [2] of yellow.css.

2.
Rename the duplicates to red.css and blue.css. You can either right-click/Ctrl-click the file and choose Edit > Rename, or click the file once, pause, and then click the file again.

3.
In the CSS Styles panel, choose Options > Design-time. (The icon in the right corner of the expanded panel with the three little lines and a down arrow is called the Options menu.) Highlight yellow.css, and click the (-) button to remove the style sheet. Click the (+) button and add red.css. Your page should look exactly the same as it did when yellow.css was attached, but have red.css attached instead.

4.
Either double-click the red.css “design” listing in the CSS Styles panel and edit the style sheet manually, or right-click/Ctrl-click each entry in red.css and choose Edit to use the CSS Styles Definition dialog. Open each style rule in red.css, and pick whatever shades of red you want for colors and background colors by using the Color Picker. Save the red.css file.

Tip

You can also use the Tag inspector panel (Window > Tag Inspector or F9) to make changes to CSS rules. Just select a rule from the CSS Styles panel and the Tag inspector will change to allow you to edit your CSS rules.

Whichever route you decide to take, your red.css file should end up looking much like the following code, with all of the yellow colors changed to shades of red:

Listing 9.1.

body {
     background-color: #FFA8A8;
     color: #000000;
}
#divHeader {
     background-color: #FF0000;
     color: #000000;
     border-bottom: 1px solid #000000;
}
#divContent {
     background-color: #FFF4F4;
     border: 1px solid #000000;
}
h1 {
     color: #FF0000;
}

5.
Choose Options > Design-time, remove red.css, and add blue.css. Change all of your colors to shades of blue either directly in the CSS file or through the CSS Editor. This sets up the blue style sheet.

Listing 9.2.

body {
     background-color: #A8A8FF;
     color: #000000;
}
#divHeader {
     background-color: #0000FF;
     color: #000000;
     border-bottom: 1px solid #000000;
}
#divContent {
     background-color: #F4F4FF;
     border: 1px solid #000000;
}
h1 {
     color: #0000FF;
}

6.
Save your work.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint