Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Changing the CSS applied to a whole site via a dropdown/or button 2

Status
Not open for further replies.
BarnyGrumble

BarnyGrumble

Technical User
Aug 8, 2001
1
GB
First post... wish me luck!

I've recently learned the "joy" of using css to control the entire look and feel of a site using a single css file. Now i'm wondering if its possible for the site user to select a style of his/her choice to apply while he visits, from a selection of css files on the server.

You can see the kind of effect i mean demonstrated on this site.. Unfortunatley i dont have access to an asp enabled server, just the free space provided by my isp - so i cannot use the method as used on the linked site.

Hopefully you understand what i'm looking for and can help me out! thanks:)
 
Sort by date Sort by votes
I don't think you can do that without some sort of server side scripting (i.e. ASP) enabled --

Presumably, on the linked site, you choose the css you want and that value is stored in a session variable (ASP) and accessed on each subsequent page.

I can't think of a workaround.

The good news is that offers ASP enabled webspace for free.

:)
Paul Prewett
penny.gif
penny.gif
 
Upvote 0 Downvote
one way of acheiving the desired result using only HTML (though this is most definetely a fudge and im sure someone else could come up with a better method using Javascript) is to simply have a number of identical pages with links to different stylesheets. then you just redirect the user to a new page giving the appearance of just changing the stylesheet.....
 
Upvote 0 Downvote
Try this:

Code: 
<!-- Setting up the Style Sheets...

Make up your style sheets and set the link rel='s
up to load them, as shown below. These belong in
the <head> of the page.

What you name the style sheet files does not matter
(so long as the extension is .css) since the script
references them only by a number, not the file name.

We show four different style sheets used; but you
can use fewer or more as needed.  The script will
automatically detect the number of style sheets in
use. 

Note the order of the style sheets. The *last* sheet
loaded is the one the browser will use initially.
One trick to avoid confusion is shown below, where
we load the first sheet an additional time at the
end of the list.

//-->

<link rel=&quot;stylesheet&quot; href=&quot;style_1.css&quot;>
<link rel=&quot;stylesheet&quot; href=&quot;style_2.css&quot;>
<link rel=&quot;stylesheet&quot; href=&quot;style_3.css&quot;>
<link rel=&quot;stylesheet&quot; href=&quot;style_4.css&quot;>
<link rel=&quot;stylesheet&quot; href=&quot;style_1.css&quot;>

==============================================

<!-- Setting Up the JavaScript...

Insert the follwing script in the <head> of the page,
usually right after the link rel='s. Set doAlerts=false;
to shut off the alert boxes when changing styles.

//-->

<script language=&quot;JavaScript&quot;>
<!--
var doAlerts=true;
function changeSheets(whichSheet){
  whichSheet=whichSheet-1;
  if(document.styleSheets){
    var c = document.styleSheets.length;
    if (doAlerts) alert('Change to Style '+(whichSheet+1));
    for(var i=0;i<c;i++){
      if(i!=whichSheet){
        document.styleSheets[i].disabled=true;
      }else{
        document.styleSheets[i].disabled=false;
      }
    }
  }
}
//-->
</script>

==============================================

<!-- Calling the Style Changes from Links...

A simple JavaScript call to the changeSheets() function
enables the desired style sheet. We've adjusted the 
call so you start at 1 for the first sheet, 2 for the
second sheet, 3 for the third, etc., in the same order
they are listed in your link rel='s above.

//-->

<a href=&quot;JavaScript:changeSheets(1)&quot;>Style One</a>
<a href=&quot;JavaScript:changeSheets(2)&quot;>Style Two</a>
<a href=&quot;JavaScript:changeSheets(3)&quot;>Style Three</a>
<a href=&quot;JavaScript:changeSheets(4)&quot;>Style Four</a>
Mike Barone
FREE CGI/Perl Scripts & JavaScript Generators
Ace PopUp Generator Software - Totally FREE
 
Upvote 0 Downvote
Well I am using Mozilla 0.9.3 and I can just go to view --> stylesheet -->...... ===
Supports Mozilla and Web Standards
Knows HTML/XHTML, CSS1, JavaScript, PHP, C++, DOM1
===
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
645
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
671
pmonett
pmonett
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
180
Alt255
Alt255
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
171
lmcate
lmcate

Part and Inventory Search

Sponsor

Back
Top