Excellent css code

HTML & CSS
1

Hi
Im not sure Im posting in the right area, but here goes,

Iv come across a really good website thats used excellent css or I think good use of html pages to program a site to have a different coloured theme each time you click onto the company logo, or just generally click on to the homepage.
When you click on the logo it changes to i.e blue, green , etc and a few other elements on the page and a number of pictures on the top right hand corner.

However I have been trying to suss out the code but how can you have mulitple home pages (you can only save one document to home.htm)
that contain the <link rel=“stylesheet” type=“text/css” href=“17.css” media=“screen” /> where the different themes are.

I dont get it. :wall:

i would like to post the link but Im not sure if i can as it belongs to a web design agency but Im just exploring and looking at different types of cool websites to build as I want to build one for my own business.

any help or suggestions ?

:slight_smile: amzie

2

It is likely they are changing the CSS. Check css Zen Garden: The Beauty in CSS Design for a site that has something like what you are describing. To get a different CSS each time, you are likely storing something with a cookie.

I did something similar when a friend wanted to see what his site would look like with different colors. He could visit his site, and click on a link to change the look of his site.

3

Post the link amzie :slight_smile:

4

it could be a very simple jquery trick… done by changing the root element’s ID or CLASS… maybe even a stylesheet refresh?

5

Ok here goes guys :wink:

Belgrade Theatre, Coventry :: Box office - 024 7655 3055

i just the love the way the theme changes any ideas on how i could do this :wink:

6

Can’t see any Javascript. Seems it’s using server side scripting to specify a different stylesheet as the page loads. 3.css, 5.css, 6.css and so on.

7

This small script, loaded into the head of your document will randomly write a <link> to either css_1.css or css_2.css. The problem with it is that you are likely to get a string of the same css files (eg: 1,1,1,1), rather than first one, then the other (eg: 1,2,1,2). To achieve a sequential cycle you would need to store the previous selection in some way. A possibility is a cookie.


<script type="text/javascript">
<!--
var randNo=Math.floor(Math.random()*2)+1;
document.write('<link rel="stylesheet" type="text/css" href="css_'+randNo+'.css">\
')
//-->
</script>
8

Maybe we are going about this, literally, the wrong way. It could have been javascript or jQery, but… it could also have been PHP. However when you think about it, loading as separate style sheet per page just to change the logo, seems like overkill. you could achieve the same result by creating separate rules ofr each logo color, #logo1, #logo2 , #logo3… all in the same stylesheet code give the logo in each page a corresponding ID.

you could use session variables to co code a sequence in PHp, if that’s what you want

9

Yes, but its not just the logo its the column on right hand side and small image on the top right hand corner…:weyes:

10

I would be inclned to agree with dresden becuse there is no immediate switch which you would have with Javascript, the changes are all on page refresh and there is nothing to suggest JS in the source code.