View Full Version : 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 (http://ahh.treblesome.net/wordpress/). 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 (http://www.modernrevolutions.net)
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/ (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:
<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 (http://www.w3.org/Style/Examples/007/alternatives) 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 (http://www.w3.org/Style/Examples/007/alternatives) 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 (http://www.alistapart.com/articles/alternate/) 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?
It depends on which script your using. If your using the first one Snookerman gave to you, it would be here:
<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):
<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:
<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:
<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!
ModernRevolutions
12-29-2008, 05:42 PM
OHHHHHHH thanks :)
Snookerman
12-29-2008, 05:45 PM
You're welcome! If you have any more questions just repost, good luck!
ModernRevolutions
12-29-2008, 05:52 PM
when i click on the link to change it, it does nothing
Snookerman
12-29-2008, 05:53 PM
Can you please post a link to your site or attach the code you have?
Make sure your link title in the header, and the link to change it go together:
<link type="text/css" rel="alternate stylesheet" title="Oldstyle" href="http://www.w3.org/StyleSheets/Core/Oldstyle">
<a href="#"
onclick="setActiveStyleSheet('Oldstyle');
return false;">change style to Oldstyle</a>
And also make sure your not doing this:
<a href="#"
onclick="return false;setActiveStyleSheet('Oldstyle');
">change style to Oldstyle</a>
If the return false goes before the setActiveStyleSheet, it won't work.
ModernRevolutions
12-29-2008, 05:56 PM
in my style.css:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link type="text/css" rel="stylesheet" title="Hathaway" href="http://www.modernrevolutions.net/websitelayouts/hathawaylayout/hathaway_style.css">
</head>
In my header:
<script type="text/javascript" src="/layout/styleswitcher.js"></script>
My link:
<a href="http://www.modernrevolutions.net"
onclick="setActiveStyleSheet('Hathaway');
return false;">Anne Hathaway</a><br>
You do not have an alternative style sheet.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link type="text/css" rel="stylesheet" title="Hathaway" href="http://www.modernrevolutions.net/websitelayouts/hathawaylayout/hathaway_style.css">
</head>
Replace the highlighted with alternative.
ModernRevolutions
12-29-2008, 06:01 PM
it does indeed exsist lol
Snookerman
12-29-2008, 06:01 PM
I'm guessing your .js file is not in the right place. If you code looks like this:
<script type="text/javascript" src="/scripts/styleswitcher.js"></script>
then the .js file you downloaded should be in a folder named scripts. If you have the .js file in the same place as your page then change the code to this:
<script type="text/javascript" src="styleswitcher.js"></script>
That might not be the only problem though so please post a link to the site or attach the code you have written.
ModernRevolutions
12-29-2008, 06:08 PM
ok i changed it to that and now we are getting somewhere. now the page refreshes. however its still the same stylesheet
Snookerman
12-29-2008, 06:11 PM
That is because you don't have an alternative stylesheet, you are linking to the same one. Do you have more than one .css file?
That might not be the only problem though so please post a link to the site or attach the code you have written.
He did, in his first post.
ModernRevolutions
12-29-2008, 06:14 PM
yea the link is http://www.modernrevolutions.net/websitelayouts/hathawaylayout/hathaway_style.css does it have to be in the layout folder with my other stylesheet?
Snookerman
12-29-2008, 06:14 PM
Yeah I noticed, I just though he/she might have tried this on a test page before I noticed the link on the first page.
It doesn't have to be in the same folder, you just need an alternative style sheet with the title "Hathaway".
At the top of this style sheet (http://www.modernrevolutions.net/websitelayouts/hathawaylayout/hathaway_style.css) you have:
<link type="text/css" rel="stylesheet" title="Hathaway" href="http://www.modernrevolutions.net/websitelayouts/hathawaylayout/hathaway_style.css">
Remove it.
Then replace:
<link rel="stylesheet" type="text/css" href="http://modernrevolutions.net/layout/style.css">
With:
<link rel="stylesheet" type="text/css" href="http://modernrevolutions.net/layout/style.css">
<link rel="stylesheet" type="alternative" href="http://www.modernrevolutions.net/websitelayouts/hathawaylayout/hathaway_style.css">
Then uplod your javascript file.
<script type="text/javascript" src="styleswitcher.js"></script>
And change the highlighted to it's location.
ModernRevolutions
12-29-2008, 06:19 PM
i did and its still not doing anything :'(
Snookerman
12-29-2008, 06:20 PM
...and add it to the head section of your page:
<link href="http://modernrevolutions.net/layout/style.css" type="text/css" rel="stylesheet">
<link type="text/css" rel="alternative" title="Hathaway" href="http://www.modernrevolutions.net/websitelayouts/hathawaylayout/hathaway_style.css">
I've just updated my post (http://www.dynamicdrive.com/forums/showpost.php?p=177318&postcount=23).
Btw, your js file doesn't exist:
http://www.modernrevolutions.net/styleswitcher.js
As Snookerman said a while ago.
Snookerman
12-29-2008, 06:25 PM
You don't seem to have followed the three steps I posted. Please check that all files are where they should be and that all links are correct as well.
ModernRevolutions
12-29-2008, 06:27 PM
ok. I did everything to the T now.
Style link: http://modernrevolutions.net/layout/style.css
Alternate link: http://www.modernrevolutions.net/layout/style2.css
Script: http://www.modernrevolutions.net/layout/styleswitcher.js
------
and still nothing.... sorry for being a pain guys :/ and thanks for having patience with me
In both of your CSS files you have:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link type="text/css" rel="stylesheet" title="Hathaway" href="style2.css">
</head>
At the top, remove it!
Find:
<link rel="stylesheet" type="alternative" title="Hathaway" href="http://modernrevolutions.net/layout/style2.css">
And add the highlighted!
Snookerman
12-29-2008, 06:30 PM
Your alternative stylesheet doesn't have a title.
@Snookerman: I took care of that. :D
Snookerman
12-29-2008, 06:32 PM
:D damn, no more bathroom breaks for me..
ModernRevolutions
12-29-2008, 06:35 PM
Ok this time im making a check list.
1. Remove code from style.css (done)
2. add title to alternative link code. (done)
and still nothing.... do i have to edit the styleswitcher.js in any way shape form or idea? because i haven't touched it
Snookerman
12-29-2008, 06:40 PM
Make sure you link looks like this:
<a onclick="setActiveStyleSheet('Hathaway'); return false;" href="#">Anne Hathaway</a>
ModernRevolutions
12-29-2008, 06:44 PM
yup thats exactly what it looks like.
Snookerman
12-29-2008, 06:46 PM
This is what you have:
<link href="http://modernrevolutions.net/layout/style2.css" title="Hathaway" type="alternative" rel="stylesheet">
This is what you should have:
<link href="http://modernrevolutions.net/layout/style2.css" title="Hathaway" type="text/css" rel="alternative">
Yup. My fault again. Also, Snookerman I think it should be:
<link href="http://modernrevolutions.net/layout/style2.css" title="Hathaway" type="text/css" rel="alternative stylesheet">
ModernRevolutions
12-29-2008, 06:50 PM
when i tried both they kinda merged the 2 stylesheets :/
Snookerman
12-29-2008, 06:51 PM
Actually we're both wrong, it should be rel="alternate stylesheet" so:
<link href="http://modernrevolutions.net/layout/style2.css" title="Hathaway" type="text/css" rel="alternate stylesheet">
ModernRevolutions
12-29-2008, 06:54 PM
it merged it again >.< ill leave it messed up so you can see what it did
What's messed up about it? It looks like it worked.
Snookerman
12-29-2008, 06:58 PM
Give the first stylesheet a title as well, if you don't they will merge. They also merge if they have the same title.
ModernRevolutions
12-29-2008, 06:59 PM
this is what i see: http://www.modernrevolutions.net/bah.png
do you guys see something different?
Yes, replace:
<link rel="stylesheet" type="text/css" href="http://modernrevolutions.net/layout/style.css">
With:
<link rel="stylesheet" type="text/css" href="http://modernrevolutions.net/layout/style.css" title="Default">
And:
<a onclick="setActiveStyleSheet('Hathaway'); return false;" href="http://www.modernrevolutions.net/">Anne Hathaway</a>
With:
<a onclick="setActiveStyleSheet('Default'); return false;" href="#">Default</a>
@IllustriousLyts
Yes, that is what I see.
Snookerman
12-29-2008, 07:01 PM
This is what you should have:
<link rel="stylesheet" type="text/css" title="Defaut" href="http://modernrevolutions.net/layout/style.css">
</link>
<link rel="alternate stylesheet" type="text/css" title="Hathaway" href="http://modernrevolutions.net/layout/style2.css"/>
Change default to whatever you want to name your first style.
Nile, we're really thinking alike huh?
ModernRevolutions
12-29-2008, 07:03 PM
Ok I did both of those. and its still merged all freaky like :/ Is this hard or am i really dumb for a 17 year old??? :'(
Actually, neither. The image that's corrupt in the second style, isn't int he style sheet.
@Snookerman:
In the other thread to about the two level menus. Lol!
ModernRevolutions
12-29-2008, 07:06 PM
there is a corrupt image in the other stlyesheet? the only image in the second stylesheet is http://www.modernrevolutions.net/websitelayouts/hathawaylayout/hathawaybar.png
No, the image that shows up blue in the wrong style sheet isn't included IN the alternative, so it will not change. Which image do you want that to be replaced with?
ModernRevolutions
12-29-2008, 07:09 PM
i wanted to replace it with: http://www.modernrevolutions.net/websitelayouts/hathawaylayout/hathaway.png to fit the other stylesheet.
ModernRevolutions
12-29-2008, 07:10 PM
maybe if there is also a code to switch the headers along with the stylesheet. like at the same time. that would make it perfect. is that possible?
Snookerman
12-29-2008, 07:12 PM
Do you mean the image at the top? You could make that a background image and add it to the css.
@Snooker: This is easier
Find the below code and add the highlighted.
<img src="http://www.modernrevolutions.net/layout/belltop.png" id="imageChange"></div>
And then, replace:
<a onclick="setActiveStyleSheet('Hathaway'); return false;" href="#">Anne Hathaway</a><br>
<a onclick="setActiveStyleSheet('Hathaway'); return false;" href="http://www.modernrevolutions.net/">Anne Hathaway</a><br><br><br>
<a onclick="setActiveStyleSheet('Default'); return false;" href="#">Default</a>
With:
<a onclick="document.getElementById('imageChange').src='http://www.modernrevolutions.net/websitelayouts/hathawaylayout/hathaway.png';setActiveStyleSheet('Hathaway'); return false;" href="#">Anne Hathaway</a><br>
<a onclick="document.getElementById('imageChange').src='http://www.modernrevolutions.net/websitelayouts/hathawaylayout/hathaway.png';setActiveStyleSheet('Hathaway'); return false;" href="http://www.modernrevolutions.net/">Anne Hathaway</a><br><br><br>
<a onclick="document.getElementById('imageChange').src='http://www.modernrevolutions.net/layout/belltop.png';setActiveStyleSheet('Default'); return false;" href="#">Default</a>
ModernRevolutions
12-29-2008, 07:15 PM
ok now its working however the default stylesheet isnt showing up :/
Snookerman
12-29-2008, 07:19 PM
I'm not sure I agree about that method being easier. I prefer all the styles to go in the stylesheets since it's much easier to work with that and it doesn't require any JavaScript knowledge in case you want to do additional changes in the future.
Snookerman
12-29-2008, 07:20 PM
Typo: title="Defaut" should be default.
If you refresh the page though - it will not work. Like Snookerman said - try putting it in the style.
Snookerman
12-29-2008, 07:25 PM
To clarify, in your head section:
<link href="http://modernrevolutions.net/layout/style.css" title="Defaut" type="text/css" rel="stylesheet">
should be:
<link href="http://modernrevolutions.net/layout/style.css" title="Default" type="text/css" rel="stylesheet">
Snookerman
12-29-2008, 07:27 PM
Now your link has Default with uppercase while the title is default with lowercase, they must be the same.
ModernRevolutions
12-29-2008, 07:28 PM
ok got it. however the images keep changing so i will try and put them in the style.css :)
Snookerman
12-29-2008, 07:29 PM
Yeah, just put them as a background to the div container they are already in.
ModernRevolutions
12-29-2008, 07:30 PM
ok and how would i go about putting it in the style.css?
i tried just moving the div they were in into the bottom of the style.css code and it did nothing
Snookerman
12-29-2008, 07:33 PM
Give the div an id:
<div id="headerdiv"></div>
Then add this to your css code:
div#headerdiv {
width: 300px; //should be same width as the image
height: 300px; //same as image
background-image: url('linktoimage.jpg');
}
ModernRevolutions
12-29-2008, 07:38 PM
ok that is working so far however. its not changing when i click the links anymore :/
Remove my code from the links since you've found a better way.
Snookerman
12-29-2008, 07:43 PM
Seems to work great now.
ModernRevolutions
12-29-2008, 07:44 PM
YAY!!!!!!! OMG!!! thanks guys :)
I'm glad to help anytime.
Snookerman
12-29-2008, 07:46 PM
You're welcome, happy to help! Good luck with your page!
ModernRevolutions
12-30-2008, 12:30 AM
One last question lol Right now im trying to make a new theme but i cant move the navigation on just one theme. How would i do that? Ive tried giving the div an id which worked to move it but it also move it in every other theme. Any suggestions?
Snookerman
12-30-2008, 01:05 AM
I'm not sure I understand what you are trying to do, could you please elaborate?
boogyman
12-30-2008, 04:34 AM
One last question lol Right now im trying to make a new theme but i cant move the navigation on just one theme. How would i do that? Ive tried giving the div an id which worked to move it but it also move it in every other theme. Any suggestions?
if you are trying to make a section of the site not appear on one theme or skin or portion of the site, assign the
display:none
style to that element in that specific stylesheet
ModernRevolutions
12-30-2008, 02:16 PM
what im trying to do is make a div id code and put it in the stylesheet so i can move the div around and not affect all the other themes.
i tried using this code:
div#navigationdiv{position:absolute!important;left:200px!important; top:400px; width:430px!important;}
however when i move it around it works for the Mila Kunis theme but all the other navigations are out of whack. and when i try putting the code above in all the other stylesheets the div wont move. So im looking for a way to move the Mila Kunis navigation without moving the navigation on the other themes. If you go to my site and look at the navigation on either the Rachel Bilson, Kristen Bell, or Anne Hathaway you can see the navigation is on the left side (and in the Rachel Bilson on its underneath the content box)
ModernRevolutions
12-30-2008, 02:21 PM
oh... i got it lol i have no idea why it wasnt working yesterday but its perfect today :) thanks anyway guys :) I dont know what i would do without these forums lol
ModernRevolutions
12-31-2008, 11:39 AM
If have to come to this post one more time i think im going to punch my computer.
Ok huge dilemma! When you view my site in IE the default stylesheet is all messed up. but when you click another theme its fine. But if you try and go back to the defualt one its all haywire. Can someone please help? for a demonstration please view my site in IE. http://www.modernrevolutions.net
Snookerman
12-31-2008, 12:00 PM
It looks fine for me in IE7, have you tried clearing your cache?
ModernRevolutions
12-31-2008, 07:23 PM
Oh ok. thanks :) And btw is there anyway to check and see how something looks in all browsers without actually downloading all the browsers and checking?
Snookerman
12-31-2008, 07:56 PM
Yup: http://browsershots.org/ (http://browsershots.org/)
ModernRevolutions
02-18-2009, 06:02 AM
Okay, im trying to add this to my site. again! lol well here is my site: http://www.modernrevolutions.vivid-avenue.net. What did I do wrong or forget to add. Trust me it won't be as bad this time lol
Snookerman
02-18-2009, 08:16 AM
I'm guessing you are referring to the alternate styles? In that case, change this:
<link type="text/css" rel="alternative" title="Bell"
<link type="text/css" rel="alternate stylesheet" title="Bell"
Good luck!
ModernRevolutions
02-18-2009, 06:43 PM
oh god not this again lol. Okay, I did what you said however its not switching the stylesheets :/ blah! lol
Snookerman
02-18-2009, 07:37 PM
Hmm.. I don't see any alternative stylesheet on the page you posted before, did you put them on a different page? If so, please post that link.
ModernRevolutions
03-10-2009, 08:59 PM
Im confused. I tried to reread this so I can put it back up on my site but Im confused haha. Can you please tell me.
-The code i need in my stylesheet (if any)
-The code I need in my header, and how to make the links.
it would be much appreciated :D Thanks
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.