Color Coded Stylesheet Help

General Category => General => Topic started by: simply sibyl on December 11, 2007, 02:08:33 pm



Title: How to Make tabs using Color Codes
Post by: simply sibyl on December 11, 2007, 02:08:33 pm
The code for the main and mirrortab section is after the instructions.

Instructions:

To change the background color of the main and mirror tabs:

Look for the following in the codes for the main and mirror tabs :
        background:  #5F81A0;   
Replace the color code with your own.


To change the border color of the main and mirror tabs:

Look for the following in the code for each of the main and mirror tabs and replace the color code with your own.
(note:  not all tabs will contain all 3 of these)
 
       border-left:  1px solid #696969;
       border-right:  1px solid #696969;
       border-bottom:  1px solid #696969;


To change the background color of the main and mirror active tabs

Look for the following in the codes for the main and mirror active tabs : 
       background: #98B2CB;   
Replace the color code with your own.


To change the border color of the main and mirror active tabs:

Look for the following in the code for each of the main and mirror active tabs and replace the color code with your own.
(note:  not all tabs will contain all 3 of these)
 
      border-left:  1px solid #696969;
      border-right:  1px solid #696969;
      border-top:  1px solid #696969;

Save it at this point to be sure you have the background and borders as you want them.
Once that is done go back in and go thru to change the color codes for the fonts.

* Keep in mind that although this does work the tabs will have a flat appearance to them because they are not graphic images and will look like this:

(http://img181.imageshack.us/img181/8913/image5gd1.png)




Replace the ENTIRE main and mirror tabs section with the following code:
(WARNING:   This is not the entire css.  This is ONLY the css for the tabs)

Code:

/* definitions for the main tab, active means the tab reflects which page is displayed */
.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last
{
color: white;
text-transform: uppercase;
vertical-align: top;
}
.maintab_back, .maintab_active_back
{
color: white;
text-decoration: none;
font-size:  9px;
vertical-align: top;
padding: 2px 6px 6px 6px;
font-family: tahoma, sans-serif;
}

.maintab_first
{
background: #5F81A0;
             border-left:  1px solid #696969;
             border-bottom:  1px solid #696969;
width: 10px;
}
.maintab_back
{
background: #5F81A0;
             border-bottom:  1px solid #696969;
}
.maintab_last
{
background: #5F81A0;
             border-right: 1px solid #696969;
             border-bottom: 1px solid #696969;
width: 8px;
}
.maintab_active_first
{
background: #98B2CB;
             border-left:  1px solid #696969;
             border-bottom:  1px solid #696969;
width: 6px;
}
.maintab_active_back
{
background: #98B2CB;
              border-bottom:  1px solid #696969;
             
}
.maintab_active_last
{
background: #98B2CB;
             border-right:  1px solid #696969;
             border-bottom: 1px solid #696969;
width: 8px;
}

/* how links behave in main tab. */
.maintab_back a:link , .maintab_back a:visited, .maintab_active_back a:link , .maintab_active_back a:visited
{
color: white;
text-decoration: none;
}

.maintab_back a:hover, .maintab_active_back a:hover
{
color: #e0e0ff;
text-decoration: none;
}
/* definitions for the mirror tab */
.mirrortab_first, .mirrortab_back, .mirrortab_last, .mirrortab_active_first, .mirrortab_active_back, .mirrortab_active_last
{
color: white;
text-transform: uppercase;
vertical-align: top;
}
.mirrortab_back, .mirrortab_active_back
{
color: white;
text-decoration: none;
font-size: 9px;
vertical-align: bottom;
padding: 6px 6px 2px 6px;
font-family: tahoma, sans-serif;
}

.mirrortab_first
{
background: #5F81A0;
             border-top:  1px solid #696969;
             border-left:  1px solid #696969;
width: 10px;
}
.mirrortab_back
{
background: #5F81A0;
             border-top:  1px solid #696969;
}
.mirrortab_last
{
background: #5F81A0;
             border-top:  1px solid #696969;
             border-right:  1px solid #696969;
width: 6px;
}
.mirrortab_active_first
{
background: #98B2CB;
             border-top:  1px solid #696969;
             border-left:  1px solid #696969;
width: 6px;
}
.mirrortab_active_back
{
background: #98B2CB;
             border-top:  1px solid #696969;
}
.mirrortab_active_last
{
background: #98B2CB;
             border-top:  1px solid #696969;
             border-right: 1px solid #696969;
width: 8px;
}

/* how links behave in mirror tab. */
.mirrortab_back a:link , .mirrortab_back a:visited, .mirrortab_active_back a:link , .mirrortab_active_back a:visited
{
color: white;
text-decoration: none;
}

.mirrortab_back a:hover, .mirrortab_active_back a:hover
{
color: #e0e0ff;
text-decoration: none;
}