Dreamweaver - need help switching css schemes

Author

need help switching css schemes

zidane511

2004-03-31, 3:29 am

hi all

i've seen several sites that have links at the top of their pages that load
different css schemes when you click them. i've tried looking up tutorials on
how to do that but no luck. can somebody give me a lead on how to start this?
basically i just want viewers of my site to be able to load the css scheme of
their choice giving them 3 choices from a simple menu. so basically, how do i
create the links to load the schemes? any help is appreciated.

thanks

zidane

David B

2004-03-31, 5:28 am

zidane511 wrote:

> hi all
>
> i've seen several sites that have links at the top of their pages that load
> different css schemes when you click them. . . . so basically, how do i
> create the links to load the schemes? any help is appreciated.

See my page at http://northamerica.geoworld.org/us/ak/index.php as an
example. Look in the top right corner and click "Themes," then click any
of the themes that are listed.

I think you can figure out pretty easily by just copying the code from
my page. This is what you need specifically:

Copy the JavaScript from this page:

http://northamerica.geoworld.org/js/ss.js

The page you want the alternate style sheets in will have to be linked
to this JavaScript, like this...

<script src="../../js/ss.js" type="text/javascript">

(The precise path may be different, depending on the location of your
target page and JavaScript.)

Then you have to link to your default style sheet(s) and any "alternate"
style sheets. In the following example, I have three permanent style
sheets - aaa.css, north.css and Home.css.

All the other style sheets (Peace, War, etc.) are alternate style
sheets. Notice where it says rel="alternate stylesheet," in place of the
usual rel="stylesheet." Notice, also, that each alternate style sheet
has a title - like title="Peace"

<link href="../../css/aaa.css" rel="stylesheet" type="text/css" />
<link href="../../css/region/north.css" rel="stylesheet" type="text/css" />
<link href="../../css/mypage/Home.css" rel="stylesheet" type="text/css" />
<link href="../../css/themes/peace.css" rel="alternate stylesheet"
type="text/css" title="Peace" />
<link href="../../css/themes/war.css" rel="alternate stylesheet"
type="text/css" title="War" />
<link href="../../css/themes/night.css" rel="alternate stylesheet"
type="text/css" title="Night" />

* * * * * * * * * *

Next, you set up your links like this:

<a href="#" onclick="setActiveStyleSheet('Spring'); return false;"
title="Spring">Spring</a>
<a href="#" onclick="setActiveStyleSheet('Summer'); return false;"
title="Summer">Summer</a>
<a href="#" onclick="setActiveStyleSheet('Night'); return false;"
title="Night">Night</a>

Notice that the word "peace" appears three times; once in the link to
the style sheet, where it says title="Peace" and twice in the link to
that style sheet - title="Spring">Spring</a>

That caused me a little confusion. I can't remember the situations where
it was a problem, but you may have to play with the cases (capital
letters versus lower case) or other things if it isn't working.

There are more sophisticated variations. For example, you can create an
style switcher system that lets you choose several style sheets
simultaneously. I haven't been able to get it to work yet, but there's a
tutorial at http://www.alistapart.com for a JavaScript version. It can
also be done with PHP, but I've been advised that JavaScript would be
better.

Also, you can get a Dreamweaver extension from KaosWeaver.com that will
automatically change your style sheets on a regular basis - once a
month, every five minutes, etc.

Murray *TMM*

2004-03-31, 11:34 am

David:

Have you found broader browser support for this method compared to the
javascript document writes of the stylesheet link?

--
Murray --- ICQ 71997575
Team Macromedia Volunteer for Dreamweaver MX
(If you *MUST* email me, don't LAUGH when you do so!)
==================
news://forums.macromedia.com/macromedia.dreamweaver - THE BEST WAY TO GET
ANSWERS
==================
http://www.dreamweavermx-templates.com - Template Triage!
http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs, Tutorials & Resources
http://www.macromedia.com/support/search/ - Macromedia (MM) Technotes
==================

"David B" <david_blomstromDELETETHIS@yahoo.com> wrote in message
news:c4e0ar$dci$1@forums.macromedia.com...
> zidane511 wrote:
>
load[color=darkred]
>
> See my page at http://northamerica.geoworld.org/us/ak/index.php as an
> example. Look in the top right corner and click "Themes," then click any
> of the themes that are listed.
>
> I think you can figure out pretty easily by just copying the code from
> my page. This is what you need specifically:
>
> Copy the JavaScript from this page:
>
> http://northamerica.geoworld.org/js/ss.js
>
> The page you want the alternate style sheets in will have to be linked
> to this JavaScript, like this...
>
> <script src="../../js/ss.js" type="text/javascript">
>
> (The precise path may be different, depending on the location of your
> target page and JavaScript.)
>
> Then you have to link to your default style sheet(s) and any "alternate"
> style sheets. In the following example, I have three permanent style
> sheets - aaa.css, north.css and Home.css.
>
> All the other style sheets (Peace, War, etc.) are alternate style
> sheets. Notice where it says rel="alternate stylesheet," in place of the
> usual rel="stylesheet." Notice, also, that each alternate style sheet
> has a title - like title="Peace"
>
>
> <link href="../../css/aaa.css" rel="stylesheet" type="text/css" />
> <link href="../../css/region/north.css" rel="stylesheet" type="text/css"
/>
> <link href="../../css/mypage/Home.css" rel="stylesheet" type="text/css" />
> <link href="../../css/themes/peace.css" rel="alternate stylesheet"
> type="text/css" title="Peace" />
> <link href="../../css/themes/war.css" rel="alternate stylesheet"
> type="text/css" title="War" />
> <link href="../../css/themes/night.css" rel="alternate stylesheet"
> type="text/css" title="Night" />
>
> * * * * * * * * * *
>
> Next, you set up your links like this:
>
> <a href="#" onclick="setActiveStyleSheet('Spring'); return false;"
> title="Spring">Spring</a>
> <a href="#" onclick="setActiveStyleSheet('Summer'); return false;"
> title="Summer">Summer</a>
> <a href="#" onclick="setActiveStyleSheet('Night'); return false;"
> title="Night">Night</a>
>
> Notice that the word "peace" appears three times; once in the link to
> the style sheet, where it says title="Peace" and twice in the link to
> that style sheet - title="Spring">Spring</a>
>
> That caused me a little confusion. I can't remember the situations where
> it was a problem, but you may have to play with the cases (capital
> letters versus lower case) or other things if it isn't working.
>
> There are more sophisticated variations. For example, you can create an
> style switcher system that lets you choose several style sheets
> simultaneously. I haven't been able to get it to work yet, but there's a
> tutorial at http://www.alistapart.com for a JavaScript version. It can
> also be done with PHP, but I've been advised that JavaScript would be
> better.
>
> Also, you can get a Dreamweaver extension from KaosWeaver.com that will
> automatically change your style sheets on a regular basis - once a
> month, every five minutes, etc.