Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Tab Content script, individual tab colours needed

  1. #1
    Join Date
    Aug 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Tab Content script, individual tab colours needed

    1) Tab Content Script (v 2.0)

    2) http://www.dynamicdrive.com/dynamici...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?

  2. #2
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.

  3. #3
    Join Date
    Aug 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin View Post
    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.

  4. #4
    Join Date
    Aug 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by ddadmin View Post
    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 ?

  5. #5
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Quote Originally Posted by Dazza30 View Post
    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 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:

    Code:
    #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:

    Code:
    <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>

  6. #6
    Join Date
    Aug 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks ddadmin your a star!

    Ill give it a go in the morning thanks again.

    Quote Originally Posted by ddadmin View Post
    Sure. Using the first example 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:

    Code:
    #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:

    Code:
    <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>

  7. #7
    Join Date
    Aug 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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);
    }
    Last edited by Dazza30; 02-15-2008 at 11:48 AM.

  8. #8
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.

  9. #9
    Join Date
    Aug 2006
    Posts
    116
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  10. #10
    Join Date
    Aug 2004
    Posts
    10,140
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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:

    Code:
    #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:

    Code:
    #tab2style a{
    background: white url(shadeblue.gif) top left repeat-x;
    }
    
    #tab2style.selected a{ /*selected main tab style */
    background-image: url(shadeblueactive.gif);
    }

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •