Color Coded Stylesheet Help
October 21, 2021, 10:48:01 am
Welcome, Guest. Please login or register.

Login with username, password and session length
 
  Home Help Search Arcade Gallery Links Staff List Calendar Members Login Register  

How to Make tabs using Color Codes

Pages: [1]
  Print  
Author Topic: How to Make tabs using Color Codes  (Read 341 times)
simply sibyl
Administrator
*****
Posts: 35



View Profile
« 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:






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;
}

Report Spam   Logged

Share on Facebook Share on Twitter

Pages: [1]
  Print  
 
Jump to:  

Bookmark this site! | Upgrade This Forum
SMF For Free - Create your own Forum
Powered by SMF | SMF © 2016, Simple Machines
Privacy Policy