• Welcome to The Cave of Dragonflies forums, where the smallest bugs live alongside the strongest dragons.

    Guests are not able to post messages or even read certain areas of the forums. Now, that's boring, don't you think? Registration, on the other hand, is simple, completely free of charge, and does not require you to give out any personal information at all. As soon as you register, you can take part in some of the happy fun things at the forums such as posting messages, voting in polls, sending private messages to people and being told that this is where we drink tea and eat cod.

    Of course I'm not forcing you to do anything if you don't want to, but seriously, what have you got to lose? Five seconds of your life?

How does one make a style for a website (to use in a style switcher?)

Pikachu

Pikachu

Kelp is good! Yum yum!
Pronoun
he
Just like the thread title says, how does one make a style using CSS?

Any tutorials?
 
Well I need help making the banners change when someone changes the style.

Here's the default style:
Code: 
body {
color:#000000;
font-family:verdana, sans-serif;
font-size:10pt;
background:#FFFF00;
margin:0;
padding:0;
}

a:link, a:visited {
text-decoration:underline;
color:#000000;
}

a:active, a:hover {
text-decoration: underline;
color:#000000;
background:#00CC00
}

img {
border:0px;
}

#header {
text-align:center;
height:150px;
}

#header img {
margin:auto;
}

#container {
position:relative;
width:100%;
}

#content {
margin-left:175px;
margin-right:155px;
padding:5px;
}

#leftmenu {
position:absolute;
left:0;
top:0;
width:150px;
padding:5px;
text-align:center;
       
}

#rightmenu {
position:absolute;
right:0;
top:0;
width:150px;
padding:5px;
text-align:center;
}

#leftmenu ul, #rightmenu ul {
list-style-type:none;
margin:0;
padding:0 5px;
color:#FF3300;
background:#990000;

}

td, tr {
background: #fff;
font-size: 12px;
font-family: verdana;
}

.title1 {
background: #FF3300;
font-weight: bold;
text-align: center;
font-size: 14px;
}

.title2 {
background: #D3D3D3;
font-weight: bold;
}

and here's the alternate style:
Code: 
body {
color:#FFFFFF;
font-family:verdana, sans-serif;
font-size:10pt;
background:#000000;
margin:0;
padding:0;
}

a:link, a:visited {
text-decoration:underline;
color:#000000;
}

a:active, a:hover {
text-decoration: underline;
color:#FFFFFF;
background:#CCCCCC
}

img {
border:0px;
}

#header {
text-align:center;
height:150px;
}

#header img {
margin:auto;
}

#container {
position:relative;
width:100%;
}

#content {
margin-left:175px;
margin-right:155px;
padding:5px;
}

#leftmenu {
position:absolute;
left:0;
top:0;
width:150px;
padding:5px;
text-align:center;
       
}

#rightmenu {
position:absolute;
right:0;
top:0;
width:150px;
padding:5px;
text-align:center;
}

#leftmenu ul, #rightmenu ul {
list-style-type:none;
margin:0;
padding:0 5px;
color:#000066;
background:#990099;

}

td, tr {
background: #fff;
font-size: 12px;
font-family: verdana;
}

.title1 {
background: #A2A2A2;
font-weight: bold;
text-align: center;
font-size: 14px;
}

.title2 {
background: #D3D3D3;
font-weight: bold;
}

The thing that's confusing me is how to get the banners to change.
 
Make the banners the background of your #header rather than a separate image in the HTML.

eta: oh and you'll want to set #header dimensions to the size of your banner, so it positions properly
 
Thanks. Wait I have another question:

I use images for categories like Site, Pokemon, etc. How do I get them to change when a different style is selected?
 
Do the same thing as the banner; set those images as the background of #site, #pokemon, etc. That's what I do, at least.

Edit: Furretsu, you beat me to it. xD
 
Are they different images for each category or just one image and you manually add the text on top in the HTML document? If it's the latter, you can use a div class instead--something like .menuheader--and add the image as the background of that just once instead.
 
Ok for some reason that works with my second style but with my first style. I mean, one image works and there rest don't appear.

Here's the code for the first style:

Anything wrong?
I have uploaded all the images that are needed for the style and they still dont work.

EDIT: Here's the new code.

Code: 
body {
color:#000000;
font-family:verdana, sans-serif;
font-size:10pt;
background:#FFFF00;
margin:0;
padding:0;
}

a:link, a:visited {
text-decoration:underline;
color:#000000;
}

a:active, a:hover {
text-decoration: underline;
color:#000000;
background:#00CC00
}

img {
border:0px;
}

#header {
text-align:center;
height:150px;
background-image: url('http://pikachusplaza.awardspace.com/ppb1.PNG');
background-repeat:no-repeat;
background-position:center;
}

#header img {
margin:auto;
}

#container {
position:relative;
width:100%;
}

#content {
margin-left:175px;
margin-right:155px;
padding:5px;
}

#leftmenu {
position:absolute;
left:0;
top:0;
width:150px;
padding:5px;
text-align:center;
       
}

#rightmenu {
position:absolute;
right:0;
top:0;
width:150px;
padding:5px;
text-align:center;
}

#leftmenu ul, #rightmenu ul {
list-style-type:none;
margin:0;
padding:0 5px;
color:#FF3300;
background:#990000;
}

td, tr {
background: #fff;
font-size: 12px;
font-family: verdana;
}

.title1 {
background: #FF0033;
font-weight: bold;
text-align: center;
font-size: 14px;
}

.title2 {
background: #D3D3D3;
font-weight: bold;
}

#disclaimer {
text-align:center;
height:29px;
background-image: url('http://pikachusplaza.awardspace.com/Bar4.PNG');
background-repeat:no-repeat;
background-position:center;
}

#disclaimer img {
margin:auto;
}

#pokemon {
text-align:center;
height:29px;
background-image: url('http://pikachusplaza.awardspace.com/Bar2.PNG');
background-repeat:no-repeat;
background-position:center;
}

#pokemon img {
margin:auto;
}

#legenoh {
text-align:center;
height:29px;
background-image: url('http://pikachusplaza.awardspace.com/Bar7.PNG');
background-repeat:no-repeat;
background-position:center;
}

#legenoh img {
margin:auto;
}

#site {
text-align:center;
background-image: url('http://pikachusplaza.awardspace.com/Bar1.PNG');
height:29px;
background-repeat:no-repeat;
background-position:center;
}

#site img {
margin:auto;
)

#affiliate {
text-align:center;
background-image: url('http://pikachusplaza.awardspace.com/Bar5.PNG');
height:29px;
background-repeat:no-repeat;
background-position:center;
}

#affiliate img {
margin:auto;
)

I got four images to work and then for some reason the "#affliate" doesn't work. I used
Code: 
<div id="affiliate"></div>
.
and it still doesn't work. HELP!!!
 
Last edited:
You must log in or register to reply here.
Back
Top Bottom