Log in

View Full Version : A little help with Style Sheet Switcher 1.1


rhlblue
01-26-2008, 05:29 AM
1) Script Title: Style Sheet Switcher 1.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

3) Describe problem: Well, there is only one problem which is that its messing my XHTML :(



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Team Beyond Productions</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" title="default" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="blue.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="green-theme" href="green.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="orange-theme" href="orange.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="pink-theme" href="pink.css" />

<script type="text/javascript" src="styleswitch.js">

/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
</head>

<body>
<div id="container-page">
<div id="openholder">
<a id="openPanel" name="top" href="javascript:void(0);"><img src="images/open.png" alt="Open" /></a>
<a id="closePanel" href="javascript:void(0);" style="display:none;"><img src="images/close.png" alt="Close" /></a> </div>

<div id="top_panel" align="center" style="margin:0 auto;"><div id="myPanel" class="fluid" align="center">
<a href="javascript:chooseStyle('none', 60)" checked="checked" id="style_links"><img src="images/pick_black.gif" alt="Black" title="Black" /></a>
<a href="javascript:chooseStyle('blue-theme', 60)"><img src="images/pick_blue.gif" alt="Blue" title="Blue" /></a>
<a href="javascript:chooseStyle('green-theme', 60)"><img src="images/pick_green.gif" alt="Green" title="Green" /></a>
<a href="javascript:chooseStyle('orange-theme', 60)"><img src="images/pick_orange.gif" alt="Orange" title="Orange" /></a>
<a href="javascript:chooseStyle('black-theme', 60)"><img src="images/pick_pink.gif" alt="Pink" title="Pink" /></a>

</div>
<br />
</div>

<div id="wrapper" class="fluid">
<div id="header"><a href="index.html" id="logo" title=""></a>

<div id="slogan">
<h1>Test</h1>
</div></div>
<div id="main">All Rights Reserved</div><div id="sidebar">All Rights Reserved</div>
</div>

</div>
<div id="footer"><a name="bottom" href="#top">TOP</a><p>All Rights Reserved</p></div>


</body>
</html>



There is only 1 error in my code and which is this :

http://i25.tinypic.com/25ev6dc.jpg

Please can anyone help me ? , this is the first time I'm able to make a valid page lol....and i don't wanna blow it up :P


Part 2 : I would also like to know few more things about this script !

1) Script Title: Style Sheet Switcher 1.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

3) Describe problem: I have like five different colors for the same image, its a pattern....so right now i'm using the option to change the color of the pattern....But now i also want to change the pattern this time....means like 5 different colors and 3 patterns, and all 3 patterns in 5 colors :

Example :

Select Color :

1) Blue
2) Green
3) Orange
4) Yellow
5) White
----------

Select Background Image :

1) Pattern 1
2) Pattern 2
3) Pattern 3
-----------

Now I can make all 3 background images (patterns) in 5 colors.....but how can i configure the links and style css to output the right thing ?

like for random, color blue pattern 3, or color yellow and patter 1 ?

Is that possible :D

Thanks a lot :)
rhlblue
01-26-2008, 11:36 PM
Me wanna cry :(
Master_script_maker
01-26-2008, 11:40 PM
try removing the:

checked="checked"
rhlblue
01-28-2008, 01:26 AM
yea thanks it worked :)

I have a valid page now :D

But why is there btw ?

and yea....what about the second question xD ?
rhlblue
01-30-2008, 03:50 AM
Ok so if anyone missed it then I'll post again :

1) Script Title: Style Sheet Switcher 1.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...etswitcher.htm

3) Describe problem: I have like five different colors for the same image, its a pattern....so right now i'm using the option to change the color of the pattern....But now i also want to change the pattern this time....means like 5 different colors and 3 patterns, and all 3 patterns in 5 colors :

Example :

Select Color :

1) Blue
2) Green
3) Orange
4) Yellow
5) White
----------

Select Background Image :

1) Pattern 1
2) Pattern 2
3) Pattern 3
-----------

Now I can make all 3 background images (patterns) in 5 colors.....but how can i configure the links and style css to output the right thing ?

like for random, color blue pattern 3, or color yellow and patter 1 ?

Is that possible

Thanks a lot
Strangeplant
01-30-2008, 03:02 PM
You can set these in your css sheets, the ones for your alternate styles. In the properties definitions for the element you want to use (I'll use class="artsy"), add the line(s) that define the background color, background image, image repeat and positioning you want different in each alternate style sheet. Like this:
background: #907090 url(snazzybackgnd.gif) no-repeat fixed center;or spread out like this:
.artsy {
background-color: #907090;
background-image: url(snazzybackgnd.gif)
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}

Don't put apostrophe or quote marks around the url path inside the parenthesis.

BTW, as far as the url goes, the path of it is relative to the location of the CSS sheet and NOT to the html page. Hope this helps.
rhlblue
01-30-2008, 05:39 PM
Hi mate, thanks for ur help

But I'm still confused :(

What i want is 2 different textures in 5 different colors

So that means a total of 10 images. I'm not going to use colors for background, everything is in images.....including the colors and the textures !

this is the test page :

http://www.styletest.freedias.com/

As you can see that it works fine, I have 5 background images and they change fine :)
But the image also has a texture on it.....now if i want to change the texture then i need more images....

So now i have 5 more images for a new texture
but i also want them to change the colors also....so how can i do that ?


= 2 textures, 5 colors for each texture, total images 10.

when someone opens the site he has the option to select the color from 5 options and textures from 2 options....

The color option works fine, but how to implement the change texture system ?

I think it has something to do with Maths + Javascript :o

sorry, but i'm only 16 :D

Thanks :)
Strangeplant
01-31-2008, 03:08 PM
An image (for example a gif or png) can have transparency, then the background color can be viewed because the image non-transparent areas are overlayed onto the color background. So you can have a set of background images that can be applied to a set of background colors - that multiplies the total. The color does not have to be defined in the image alone. Transparent gif's can be made in Adobe Photoshop and instructions are on the web (not all correct, BTW, so if you have problems, just create a new transparent document of the right size, then drag the image layer from your old file to the new one, export it as a gif, select that its on a transparent background and save it for PRINT (not for the web), interlaced, and you will be fine.) Note that in Photoshop, your image should ALWAYS be made on a separate layer and NEVER on the background layer, or you can't do this.

Then you can set each combination of background-color and background-image in a separate style sheet where you select one of your set of colors and one of your transparent images using the example in my previous post. That means you have two image files and the rest is in the (1+9) style sheets (but they are tiny files) and you then have two rows of 5 buttons. Each button can be given the same background-image and background-color as in your style sheets, making it easy for people to choose what they want.

If you want to use the pull-down menu when you have lots of choices instead of buttons, you can add class=".artsy", as an example for one line, to each of your <option value=> statements and that would show a mini-example of the background for each.
rhlblue
01-31-2008, 06:39 PM
thanks for your help mate :)

I'm quite good in ps so I understand what you mean!
I will make the images in png format!

Although I will still not be able to get what i want :(
because what if i use a single big image of a custom made design by me ?
i can make it in x colors and use the style switcher to change the image...
but actually i have 2 totally different designs in 1600x1200 size but both are in same 5 colors.......

so this way the background color and transference thing won't help :(

I will show u my style sheets :

Main :


body
{
background-image: url('images/bg_black_design1.jpg');
background-position: top left;
background-color:#454545;
background-repeat: no-repeat;
background-attachment:fixed;
text-align: left;
color: #ffffff;
height:100%;
font-size:12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
* {
margin:0;
padding:0;
}

Blue


body { background-image: url('images/bg_blue_design1.jpg');}

a {
color:#21a6fa;
text-decoration:none;
}

Green


body { background-image: url('images/bg_green_design1.jpg');}

a {
color:#67A400;
text-decoration:none;
}

Orange :


body { background-image: url('images/bg_orange_design1.jpg');}

a {
color:#f1b809;
text-decoration:none;
}

Pink :


body { background-image: url('images/bg_pink_design1.jpg');}

a {
color:#f070d6;
text-decoration:none;
}


As you can see there is no background color, because the image is gonna take up all the space....and it can't be transparent because its a vector design !

Now this system works fine.....but I want to change the image also..

so this is the design 2 css :

Main :


body
{
background-image: url('images/bg_black_design2.jpg');
background-position: top left;
background-color:#454545;
background-repeat: no-repeat;
background-attachment:fixed;
text-align: left;
color: #ffffff;
height:100%;
font-size:12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
* {
margin:0;
padding:0;
}

Blue


body { background-image: url('images/bg_blue_design2.jpg');}

a {
color:#21a6fa;
text-decoration:none;
}

Green


body { background-image: url('images/bg_green_design2.jpg');}

a {
color:#67A400;
text-decoration:none;
}

Orange :


body { background-image: url('images/bg_orange_design2.jpg');}

a {
color:#f1b809;
text-decoration:none;
}

Pink :


body { background-image: url('images/bg_pink_design2.jpg');}

a {
color:#f070d6;
text-decoration:none;
}


--------------------------

Now how can i put the design 2 option also ?

people will get the option to select 2 background images and both in 5 colors each......so in total 10 images !

This is my last try !:o

thanks ;)
rhlblue
02-02-2008, 02:25 PM
I'm sooo sad :(