i think this is CSS if its possible lol

**ModernRevolutions** · 12-29-2008, 09:44 AM

Ok i want a theme changer for my site. You know let people click on a link and change the layout. How would i do that? There is a site: here. She uses Wordpress. Is there something where i dont have to use a program like that? Is there a "raw code" i could use for lack of a better term. Here is my site: click here

**Snookerman** · 12-29-2008, 09:59 AM

You can use alternative style sheets for that, here's an article that explains how:
http://www.alistapart.com/articles/alternate/

**ModernRevolutions** · 12-29-2008, 11:15 AM

i think that is the most confusing thing i have ever seen (and im pretty sure that, that sentence was wrong lol) anyway is there any easier way to do it like this thing:

Code:

 <link rel="stylesheet"
    title="Gold (right, fixed) + navbar"
    href="../threepart-f.css">

  <link rel="alternate stylesheet"
    title="Oldstyle"
    href="http://www.w3.org/StyleSheets/Core/Oldstyle">

  <link rel="alternate stylesheet"
    title="Modernist"
    href="http://www.w3.org/StyleSheets/Core/Modernist">
  ...
  <link rel="alternate stylesheet"
    title="Steely"
    href="http://www.w3.org/StyleSheets/Core/Steely">

  <link rel="alternate stylesheet"
    title="Forest (by David Baron)"
    href="http://dbaron.org/style/forest">

  <link rel="alternate stylesheet"
    title="Plain (by David Baron)"
    href="http://dbaron.org/style/plain">

basically like just a link code to change the stylesheet
------------
btw that code was from here so it is not edited. However is there a way to make that work?

**Snookerman** · 12-29-2008, 12:02 PM

You could just add the styles like that, but then you have to rely on the user having a browser that supports alternating styles (and knowing about it). I'm sure which browsers support that but I know not all of them do. If you have Fx3 installed you can go to View and then Page Style and choose another style if there is an alternative style sheet. You can do that on the page you linked to in you post.

However, if you want to make this possible for all users by adding a button/link on you site that changes the style, I suggest you take another look at the page I provided before. If you scroll all the way down, you can see that the author has made it really simple for you by putting everything together in a .js file for you to download. If you encounter any problems just repost and we'll be happy to help you.

**ModernRevolutions** · 12-29-2008, 04:43 PM

I don't know where to put my "style.css". link. you know blah/style.css. where do i put those in the code. Also I don't know where to put the code. i basically need a step by step instruction manual for this thing hahaha. sorry :/

**ModernRevolutions** · 12-29-2008, 05:12 PM

does anyone understand what i have to do that can help?

**Nile** · 12-29-2008, 05:28 PM

It depends on which script your using. If your using the first one Snookerman gave to you, it would be here:

Code:

 <link rel="stylesheet"
    title="Gold (right, fixed) + navbar"
    href="../threepart-f.css">

  <link rel="alternate stylesheet"
    title="Oldstyle"
    href="http://www.w3.org/StyleSheets/Core/Oldstyle">

  <link rel="alternate stylesheet"
    title="Modernist"
    href="http://www.w3.org/StyleSheets/Core/Modernist">
  ...
  <link rel="alternate stylesheet"
    title="Steely"
    href="http://www.w3.org/StyleSheets/Core/Steely">

  <link rel="alternate stylesheet"
    title="Forest (by David Baron)"
    href="http://dbaron.org/style/forest">

  <link rel="alternate stylesheet"
    title="Plain (by David Baron)"
    href="http://dbaron.org/style/plain">

If you are not using the first script that Snookerman gave to you, please specify which script you are using.

**Snookerman** · 12-29-2008, 05:35 PM

1. Add all the alternative stylesheets to the head section of your page. Example (from what you posted):

Code:

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <link type="text/css" rel="stylesheet" title="Gold (right, fixed) + navbar" href="../threepart-f.css">
        <link type="text/css" rel="alternate stylesheet" title="Oldstyle" href="http://www.w3.org/StyleSheets/Core/Oldstyle">
        <link type="text/css" rel="alternate stylesheet" title="Modernist" href="http://www.w3.org/StyleSheets/Core/Modernist">
        <link type="text/css" rel="alternate stylesheet" title="Steely" href="http://www.w3.org/StyleSheets/Core/Steely">
        <link type="text/css" rel="alternate stylesheet" title="Forest (by David Baron)" href="http://dbaron.org/style/forest">
        <link type="text/css" rel="alternate stylesheet" title="Plain (by David Baron)" href="http://dbaron.org/style/plain">
    </head>

You will of course link to your own .css files and give them your own titles.

2. Download the .js file from the page I gave you before and add a link to it in the head section:

Code:

<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <link type="text/css" rel="stylesheet" title="Gold (right, fixed) + navbar" href="../threepart-f.css">
        <link type="text/css" rel="alternate stylesheet" title="Oldstyle" href="http://www.w3.org/StyleSheets/Core/Oldstyle">
        <link type="text/css" rel="alternate stylesheet" title="Modernist" href="http://www.w3.org/StyleSheets/Core/Modernist">
        <link type="text/css" rel="alternate stylesheet" title="Steely" href="http://www.w3.org/StyleSheets/Core/Steely">
        <link type="text/css" rel="alternate stylesheet" title="Forest (by David Baron)" href="http://dbaron.org/style/forest">
        <link type="text/css" rel="alternate stylesheet" title="Plain (by David Baron)" href="http://dbaron.org/style/plain">
        <script type="text/javascript" src="/scripts/styleswitcher.js"></script>
    </head>

3. Add anchor tags (links) to you body section to change between the styles:

HTML Code:

<a href="#" 
onclick="setActiveStyleSheet('Oldstyle'); 
return false;">change style to Oldstyle</a>

<a href="#" 
onclick="setActiveStyleSheet('Modernist'); 
return false;">change style to Modernist</a>

<a href="#" 
onclick="setActiveStyleSheet('Steely'); 
return false;">change style to Steely</a>

etc...

Good luck!