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 Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Simple Color Switching 2

Status
Not open for further replies.
kylebellamy

kylebellamy

Programmer
Jan 24, 2002
398
US
I've been looking around in google and not finding what I wanted so I've come back to the place that always has the answers I need.

I am looking for a way to change all the <h> colors and a few minor graphics to a different color based on what the user clicks. In this case, it starts out a green but there is the option to click orange, red and blue.

I was hoping to avoid swapping the entire style sheet and re-loading the page but I can't seem to find anything that references just that switch.

Is this a possibility or something that is way more work than it's worth?

Thanks,
Kyle

 
Sort by date Sort by votes
Hi

[ol]
[li]You do not have to change the whole page style. Common elements could be in a permanent style file, and only smaller ones, strictly with changing elements made alternate.[/li]
[li]You do not have to reload the page to change its style. See "Alternative Style: Working With Alternate Style Sheets" by Paul Sowden. ( As far as I know, this article contains such example, but I may be wrong. )[/li]
[/ol]

Feherke.
 
Upvote 0 Downvote
If you don't want to do stylesheet swapping (which isn't so bad - you don't have to swap all style sheets, just the ones yuo need to), then consider renaming the class attribute on relevant items, e.g.:

Code: 
<h1 class="someClass greenColour">some text<h1>

You could use my FAQ faq216-6104 to then get all elements with a className containing "greenColour" and replace it with, for example "redColour" by looping through the returned elements.

Your CSS would have whatever it needed to to make this work, e.g.:

Code: 
.greenColour {
   color: #00CC00;
}

img.greenColour {
   border: 2px solid : #00CC00;
}

.redColour {
   color: #CC0000;
}

img.redColour {
   border: 2px solid : #CC0000;
}

I guess it's 6 of 1 whether you use this or switching CSS, which is also easy, but maybe not as obvious how it works.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
So if I'm correct in reading the linked page, I can create a secondary CSS file with the color changes which will load over the original one, changing only the few elements I put in there?

I love that guys site but he tends to write for the more experienced programmer. lol

 
Upvote 0 Downvote
Ah! That seems more like the idea I was looking for. You'll have to forgive me as I am still learning the tricks that are not apparent in the newbie guides that are all across this internet.

 
Upvote 0 Downvote
Never mind, I've just tried it and it works perfectly. Thanks again!

Continuing on that idea, is it possible to make the switch "stick" through the visit to the site? I'd imagine that uses cookies of some sort.

 
Upvote 0 Downvote
feherke,

As I read through the List Apart article, I see the cookie issue but I fail to see how to implement it. And by that I mean I am missing a basic programming structure.

I don't understand how to arrange all of that code to work correctly. Is it a JS file? Do they all go into separate <script> sections in the head?

 
Upvote 0 Downvote
Yeah, I followed that as they suggested save that now nothing switches and in IE 7, the text following the links is now orange. XD

I know I did it somewhere, now I just have to find the mistake.

 
Upvote 0 Downvote
Hi

You have this in the page :
Code: 
<script type="text/javascript" src="/scripts/styleswitcher.js"></script>
But you did not put the script file in document root right ? It is not in the /scripts/ directory but in /switcher/scripts/ . So use
Code: 
<script type="text/javascript" src="scripts/styleswitcher.js"></script>

[gray]// or[/gray]

<script type="text/javascript" src="/switcher/scripts/styleswitcher.js"></script>


Feherke.
 
Upvote 0 Downvote
Interesting note: On fixing the link issue, the switcher does not overwrite the referenced information but completely switches the CSS file so that it loses the structure in the original CSS file.

The method described by Dan was able to change the few items that I wanted without losing the rest of the CSS.

This is not that great of an issue as I'll just flesh out the alternate files with the other controls but it does seem a bit to restrictive or repetitive.

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

dvannoy
  • Locked
  • Question
Simple Layout
Replies
3
Views
155
vacunita
vacunita
garcosta
  • Locked
  • Question
CSS Coding for Gradient Color Background for all Platforms
Replies
3
Views
133
1DMF
1DMF
nwo4life
  • Locked
  • Question
Paypal button for multiple prices by Quantity and color
Replies
1
Views
100
ChrisHirst
ChrisHirst
csphard
  • Locked
  • Question
need help with footer h3 background-color. 2
Replies
8
Views
271
vacunita
vacunita
Bilberry
  • Locked
  • Question
Change red text to another color (if-then-else) within CSS
Replies
3
Views
132
Olaf Doschke
Olaf Doschke

Part and Inventory Search

Sponsor

Back
Top