|
View Dynamic Style Sheet Demo
1. Go to style view and note the formatting of normal p text 
2. Go to page view, text menu, edit text styles, click normal (p), click edit and make the exact same settings as in step1
3. Do a local publish, then go to the local publish folder with windows explorer and rename site.css to normal.css
4. Go to page view, text menu, edit text styles, click normal (p), click edit and choose a larger font size
5. Do a local publish, then go to the local publish folder with windows explorer and rename site.css to large.css
6. Now do another local publish and check with windows explorer that your local publish folder shows style.css and site.css and normal.css and large.css
7. In page view, masterborder, type "View text on this page normal or large"
8. Select the word normal, click link, click external link, select (none) and type # then save and then click the html button, inside link tab and paste the code below:
ONCLICK="setActiveStyleSheet('normal'); return false;"
9. Select the word large, click link, click external link, select (none) and type # then save and then click the html button, inside link tab and paste the code below:
ONCLICK="setActiveStyleSheet('large'); return false;"
10. Press F10 for masterborder property palette, click its html button and beginning of body tab, then place the following code with the url adjusted to reflect your site:
<LINK REL="stylesheet" HREF="HTTP://your-url.com/normal.css" TYPE="text/css" TITLE="normal">
<LINK HREF="HTTP://your-url.com/large.css" TYPE="text/css" REL="alternate stylesheet" TITLE="large">
<SCRIPT TYPE="text/javascript" SRC="HTTP://your-url.com/styleswitcher.js"></script>
11. Save styleswitcher.js to the root of your local publish folder. Local publish your site flat. (publishing flat makes it easier to implement on all pages, but is not essential)
Note: styleswitcher.js sets a cookie on the users computer, remembering the users style preference next time the user returns
12. Now upload the contents of the local publish folder with WS-FTP or Cute-FTP
Note: besides changing the font size, you can also change font, color, H1 to H6 etc, background color, background image etc.
Note: There is no limit to the number of dynamic style sheets. You could have small, normal, larger and largest etc. Simply copy existing code and rename....
Back to Index - Back to CSS Tips and Tricks - Anton's Homepage
|
