Tab Content script, individual tab colours needed

[Dazza30]

1) Tab Content Script (v 2.0)

2) http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

3) Ive been looking for a way of giving each tab an individual colour is this possible. Ive tried to give each indiviual line a style using css but with no luck.

Example

<li class="selected"><a href="#" rel="tcontent1" class="style13">Specs</a></li>
<li><a href="#" rel="tcontent2" class="style14">Voda</a></li>
<li><a href="#" rel="tcontent3class="style15">O2</a></li>
<li><a href="#" rel="tcontent4">Tmob</a></li>
<li><a href="#" rel="tcontent5">Orange</a></li>
<li><a href="#" rel="tcontent6">Virgin</a></li>
<li><a href="#" rel="tcontent7">Three</a></li>
</ul>

Ive taken a look in the tabcontent.css file and unless i can give each line its own style i cant see how this can be done.

Can anyone help?

[ddadmin]

It really depends on how you're actually "coloring" your tabs to begin with. For example, the DD demos all use a background image to give it color, meaning that if you wish to individually color each tab, that means creating alternate versions of the default background image first before anything else.

[Dazza30]

It really depends on how you're actually "coloring" your tabs to begin with. For example, the DD demos all use a background image to give it color, meaning that if you wish to individually color each tab, that means creating alternate versions of the default background image first before anything else.


Thanks for your reply.

Ive decided to use images instead.

[Dazza30]

It really depends on how you're actually "coloring" your tabs to begin with. For example, the DD demos all use a background image to give it color, meaning that if you wish to individually color each tab, that means creating alternate versions of the default background image first before anything else.

It turns out i still need to look into this as a solution.

So supposing id made new versions of the background images how do i apply them to each tab ?

[ddadmin]

It turns out i still need to look into this as a solution.

So supposing id made new versions of the background images how do i apply them to each tab ?

Sure. Using the first example (http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm) on the Script Page (the green shaded tabs) as an example, lets say you wish the 2nd tab to be blue shaded instead, using an alternate version of the green images (2 in total, one for normal, the other, when the tab is selected), you'd just do this:

1) Inside tabcontent.css, at the very bottom, add the new CSS rules to be applied to the 2nd tab that differs from the default, for example:


#tab2style a{
background: white url(shadeblue.gif) top left repeat-x;
}

#tab2style a.selected{ /*selected main tab style */
background-image: url(shadeblueactive.gif);
}

Then in your HTML, apply this style to the 2nd tab like so:


<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li id="tab2style"><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

[Dazza30]

Thanks ddadmin your a star!

Ill give it a go in the morning thanks again.


Sure. Using the first example (http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm) on the Script Page (the green shaded tabs) as an example, lets say you wish the 2nd tab to be blue shaded instead, using an alternate version of the green images (2 in total, one for normal, the other, when the tab is selected), you'd just do this:

1) Inside tabcontent.css, at the very bottom, add the new CSS rules to be applied to the 2nd tab that differs from the default, for example:


#tab2style a{
background: white url(shadeblue.gif) top left repeat-x;
}

#tab2style a.selected{ /*selected main tab style */
background-image: url(shadeblueactive.gif);
}

Then in your HTML, apply this style to the 2nd tab like so:


<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li id="tab2style"><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

[Dazza30]

Hi i followed the instructions given. I had to remove this section of the css to get tabsyle2 to show.

@media print {
.tabcontent {
display:block!important;
}

Ive created the two images and called them shadeblue.gif & shadeblueactive.gif.
The problem im now having is shadeactive.gif doesnt display when the tab is pressed.

Heres the html with tabstyle2 included

<li class="selected"><a href="#" rel="tcontent1">Features</a></li>
<li id="tab2style"><a href="#" rel="tcontent2">O2</a></li>
<li><a href="#" rel="tcontent3">Vodafone</a></li>
<li><a href="#" rel="tcontent4">Orange</a></li>
<li><a href="#" rel="tcontent5">Tmobile</a></li>
</ul>


Heres the css with the new tabstyle in red, what do you think the problem is?



.shadetabs{
padding: 0px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
padding: 0px 4px;
margin-right: 0px;
border: 1px solid #778;
color: #ffffff;
background: white url(shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li.selected{
position: relative;
top: 1px;
}

.shadetabs li.selected a{ /*selected main tab style */
background-image: url(shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}
.tabcontentstyle{ /*style of tab content oontainer*/
border: 0px solid gray;
width: 400px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block!important;
}
#tab2style a{
background: white url(shadeblue.gif) top left repeat-x;
}

#tab2style a.selected{ /*selected main tab style */
background-image: url(shadeblueactive.gif);
}

[ddadmin]

Hmmm it works for me without any additional changes in both IE7 and FF2.x There could be something else in your CSS overriding the added styles. Please post a link to the page on your site that contains the problematic script so we can check it out.

[Dazza30]

I havent got a page thats been published with the new shadetab yet but here's a link to a page that i would use it on.

http://www.dream4mobiles.co.uk/lg-ku990.html


Thanks for all the help youve given me.

[ddadmin]

I think I see the problem. Right now you're specifying that the ".selected" class should be applied to the LI element of the selected tab, versus the default A tag. Due to this, instead of:


#tab2style a{
background: white url(shadeblue.gif) top left repeat-x;
}

#tab2style a.selected{ /*selected main tab style */
background-image: url(shadeblueactive.gif);
}

as described above, you'd have this instead:


#tab2style a{
background: white url(shadeblue.gif) top left repeat-x;
}

#tab2style.selected a{ /*selected main tab style */
background-image: url(shadeblueactive.gif);
}

[Dazza30]

Thanks alot ddadmin.

It works great.

Im supprised as to how versatile this script seems to be, thanks again!