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

Project 9. Setting Styles Dynamically > Using the CSS Switcher Extensions

Using the CSS Switcher Extensions

It’s finally time to get to the good stuff...applying the Server Behaviors. This section will show you how to apply a Style Switcher to a page, and how to build links to switch to a specific style.

1.
With default.asp still open, open the Server Behaviors panel.

2.
Click the (+) icon in the Server Behaviors panel and choose DWfaq > CSS Switcher.

3.
Click the Browse button, and choose the yellow.css file. Click OK. This will load yellow.css if a user hasn’t chosen any specific style. When you click OK, the CSS Switcher server behavior should display in the Server Behaviors panel.

4.
Choose the <a> tag for the Red button, click the (+) icon in the Server Behaviors panel, and choose DWfaq > CSS Switcher Link. The CSS Switcher Link server behavior adds a link back to the current page with a querystring added to the end that tells the CSS Switcher which style sheet to load.

5.
Click the Browse button, browse to the red.css file, and click OK. If you have files in multiple folders that will be using the CSS Switcher, be sure to link to your CSS files via a Site Root relative link, and not a Document relative link. If you use a document-relative link, then pages located in subfolders of your site won’t display correctly because the path generated by the CSS Switcher Link server behavior won’t be correct.

6.
Perform the same actions for the Yellow and Blue buttons: Click the <a> tag in the tag selector, and apply the CSS Switcher Link server behavior to each button. Your Server Behaviors panel should now list the CSS Switcher and three instances of CSS Switcher Link. Browse to the page on your server and click away.

7.
Save your work.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


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