Admin panel CSS examples

[samtha25]

We are embarking on an adventure to move our forums to vBulletin as part of a major site overhaul. This is particularly an adventure for us, because while we aren't dumb, we know little about Web coding yet. So, I thought I would recount my first experience as your average clueless one.

The first thing I had to do was change the colors in the admin panel after getting an email from fellow, chief volunteer saying he couldn't read the options in the menu. I agreed. Since there is no mention of a template for the admin panel in the templates list, I checked here where I found messages saying that the cp.css had to be edited. Ah ha!

I found the cp.css. So far, so good. Having read some stuff about CSS, I understand the basic principles, but how to discern which settings control which elements of the page display. I spent quite a long time, couple hours maybe, simply trying to determine the relationship between what was in the cp.css and what I saw on the page. Since I don't intuitively know what color a hex code represents, I had to translate the codes into colors to figure out what went with what. This is made a bit more difficult by the fact that some of the purples are very close. Finally, I got a better idea of what needed to be changed, but I still needed to trial-and-error through a couple versions of the cp.css, changing colors and font sizes, to figure it out enough to make the simple changes I wanted.

After mostly figuring out what in cp.css controlled what in the display, it took probably another couple hours of trying changes to finally get something readable. As I couldn't find a way to create a facsimile of the page on my PC, I could only try the changes by uploading a new cp.css to the server each time. Not a big deal, just a bit more time consuming.

Anyway, from the time I started on the quest to find out how to change the colors and font sizes in the admin panel to the time I finished took about 7 hours. Time flies when you're having fun. A mention in the user guide of how to change the basic display of the admin panel and/or a few more lines of comments in the cp.css would have been very welcome.

[JamesUS]

Yes I agree with that - I haven't yet tried to change my CP colors but I might give it a shot fairly soon.

[samtha25]

If you just want to make the admin panel more readable, you can try mine. It increases the font size a bit, changes the color of the menu items from the pale purple/grey to the yellow used elsewhere in the admin panel, and changes the hover/active link accordingly. I deleted the section dealing with scroll bar attributes, as they are only work with IE5+.



/* Modified */
BODY {BACKGROUND-COLOR: #BBBBBB; COLOR: #000000; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px}

UL {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px}
LI {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px}
P {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px}
TD {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px}
TR {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px}

/* color for links */
A:LINK {COLOR: #000000; TEXT-DECORATION: none}
A:VISITED {COLOR: #000000; TEXT-DECORATION: none}
/* hover color for links (Internet Explorer only) */
A:HOVER {COLOR: #FFFFFF; BACKGROUND-COLOR: #40364d)
A:ACTIVE {COLOR: #FFFFFF; BACKGROUND-COLOR: #40364d}

FORM {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px}
SELECT {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; COLOR: #51485F; FONT-SIZE: 12px}
INPUT {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; COLOR: #51485F; FONT-SIZE: 12px}
TEXTAREA {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; COLOR: #51485F; FONT-SIZE: 12px}

/* style for submit/reset buttons */
#submitrow INPUT {BACKGROUND-COLOR:#40364d; COLOR: #f5d300; FONT-WEIGHT: bold}
/* first alternating table background color */
.firstalt {BACKGROUND-COLOR: #D0D0D0}
/* second alternating table background color */
.secondalt {BACKGROUND-COLOR: #C5C5C5}
/* table header background and text color */
.tblhead {BACKGROUND-COLOR: #40364D; COLOR:#F5D300; FONT-SIZE:12px}
/* table border color */
.tblborder {BACKGROUND-COLOR: #51485F}

/* extra styles for top and left frames */
#navbody {COLOR: #3F3849; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px; BACKGROUND-COLOR: #51485F}
#navbody TD {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px}
#navbody A:LINK {COLOR: #F5D300; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px}
#navbody A:VISITED {COLOR: #F5D300; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif}
#navbody A:HOVER {COLOR: #FFFFFF; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif}
#navbody A:ACTIVE {COLOR: #FFFFFF; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif}
#navbody .tblhead {COLOR: #BCB6CD; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px}

/* global and custom color definitions */
.gc {COLOR: darkgreen} /* global color */
.cc {COLOR: darkblue} /* custom color */

[The Prohacker]

I thought some people might want a darker css, so this is the cp.css I use on a majority of my sites:



BODY {BACKGROUND-COLOR: #000000; COLOR: #a0a0a0; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px;
/* this attribute sets the basis for all the other scrollbar colors (Internet Explorer 5.5+ only) */
SCROLLBAR-BASE-COLOR: #3F3F3F;
/* all scrollbar attriblutes following are not required, but you can set them if you wish. */
SCROLLBAR-ARROW-COLOR: #a0a0a0;
SCROLLBAR-HIGHLIGHT-COLOR: #606060;
}

UL {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px}
LI {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px}
P {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px}
TD {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px}
TR {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px}

/* color for links */
A:LINK {COLOR: #a0a0a0; TEXT-DECORATION: none}
A:VISITED {COLOR: #a0a0a0; TEXT-DECORATION: none}
/* hover color for links (Internet Explorer only) */
A:HOVER {COLOR: #a0a0a0; BACKGROUND-COLOR: #000000}
A:ACTIVE {COLOR: #a0a0a0; BACKGROUND-COLOR: #000000}

FORM {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 10px}
SELECT {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; COLOR: #303030; FONT-SIZE: 10px}
INPUT {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; COLOR: #303030; FONT-SIZE: 10px}
TEXTAREA {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; COLOR: #303030; FONT-SIZE: 10px}

/* style for submit/reset buttons */
#submitrow INPUT {BACKGROUND-COLOR:#000000; COLOR: #2B54A2; FONT-WEIGHT: bold}
/* first alternating table background color */
.firstalt {BACKGROUND-COLOR: #2F2F2F}
/* second alternating table background color */
.secondalt {BACKGROUND-COLOR: #3A3A3A}
/* table header background and text color */
.tblhead {BACKGROUND-COLOR: #303030; COLOR:#2B54A2; FONT-SIZE:10px}
/* table border color */
.tblborder {BACKGROUND-COLOR: #000000}

/* extra styles for top and left frames */
#navbody {COLOR: #a0a0a0; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 10px; BACKGROUND-COLOR: #000000}
#navbody TD {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 10px}
#navbody A:LINK {COLOR: #a0a0a0; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 10px}
#navbody A:VISITED {COLOR: #a0a0a0; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif}
#navbody A:HOVER {COLOR: #a0a0a0; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; BACKGROUND-COLOR: #000000}
#navbody A:ACTIVE {COLOR: #a0a0a0; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; BACKGROUND-COLOR: #000000}
#navbody .tblhead {COLOR: #a0a0a0; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif}

/* global and custom color definitions */
.gc {COLOR: darkgreen} /* global color */
.cc {COLOR: darkblue} /* custom color */

[Wayne Luke]

Here is my cp.css. It basically just recolors the control panel to match the forums.



BODY {BACKGROUND-COLOR: #FFFFFF; COLOR: #000000; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px;}

UL {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px}
LI {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px}
P {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px}
TD {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px}
TR {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 12px}

/* color for links */
A:LINK {COLOR: #0000BB; TEXT-DECORATION: none}
A:VISITED {COLOR: #003366; TEXT-DECORATION: none}
/* hover color for links (Internet Explorer only) */
A:HOVER {COLOR: #FFFFFF; BACKGROUND-COLOR: #0000BB}
A:ACTIVE {COLOR: #FFFFFF; BACKGROUND-COLOR: #0000BB}

FORM {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 10px}
SELECT {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; COLOR: #000000; FONT-SIZE: 10px}
INPUT {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; COLOR: #000000; FONT-SIZE: 10px}
TEXTAREA {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; COLOR: #000000; FONT-SIZE: 10px}

/* style for submit/reset buttons */
#submitrow INPUT {BACKGROUND-COLOR:#FB8821; COLOR: #FFFFFF; FONT-WEIGHT: bold}
/* first alternating table background color */
.firstalt {BACKGROUND-COLOR: #EBF1F7}
/* second alternating table background color */
.secondalt {BACKGROUND-COLOR: #CDDEED}
/* table header background and text color */
.tblhead {BACKGROUND-COLOR: #FB8821; COLOR:#FFFFFF; FONT-SIZE:10px}
/* table border color */
.tblborder {BACKGROUND-COLOR: #FB8821}

/* extra styles for top and left frames */
#navbody {COLOR: #000000; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 10px; BACKGROUND-COLOR: #EBF1F7}
#navbody TD {FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 10px}
#navbody A:LINK {COLOR: #0000BB; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; FONT-SIZE: 10px}
#navbody A:VISITED {COLOR: #003366; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif}
#navbody A:HOVER {COLOR: #FFFFFF; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; BACKGROUND-COLOR: #0000BB;}
#navbody A:ACTIVE {COLOR: #FFFFFF; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; BACKGROUND-COLOR: #0000BB}
#navbody .tblhead {COLOR: ##FB8821; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif}

/* global and custom color definitions */
.gc {COLOR: darkgreen;font-weight:bold;} /* global color */
.cc {COLOR: darkblue;font-weight:bold;} /* custom color */

[Kier]

This is the CSS I use for the 3DFrontier.com control panel:


BODY {
BACKGROUND: #FFFFFF URL(/images/misc/cpbg.gif);
COLOR: #000000;
FONT-FAMILY: Tahoma;
FONT-SIZE: 12px;
SCROLLBAR-BASE-COLOR: #113274;
SCROLLBAR-ARROW-COLOR: #FFFF00;
}
UL,LI,P,TD,TR {
FONT-FAMILY: Tahoma;
FONT-SIZE: 12px
}
A:LINK,A:VISITED,A:ACTIVE {
COLOR: #000066;
TEXT-DECORATION: none;
BACKGROUND-COLOR: #FFFFFF;
FONT-SIZE: 11px
}
.firstalt A:LINK,.firstalt A:VISITED,.firstalt A:ACTIVE,.secondalt A:LINK,.secondalt A:VISITED,.secondalt A:ACTIVE {
BACKGROUND-COLOR: transparent
}
A:HOVER {
COLOR: #FFFF00;
BACKGROUND-COLOR: #113274
}
FORM {
FONT-FAMILY: Tahoma;
FONT-SIZE: 10px
}
SELECT {
FONT-FAMILY: Tahoma;
COLOR: #000000;
FONT-SIZE: 11px;
BACKGROUND-COLOR: #EEFFFF
}
INPUT {
FONT-FAMILY: Tahoma;
COLOR: #000000;
FONT-SIZE: 11px
}
TEXTAREA {
FONT-FAMILY: Verdana;
COLOR: #000000;
FONT-SIZE: 10px;
BACKGROUND-COLOR: #EEFFFF
}
#submitrow INPUT {
BACKGROUND-COLOR: #153D8C;
COLOR: #FFFFFF;
FONT-WEIGHT: bold;
BORDER-COLOR: #FFFFFF;
BORDER-WIDTH: 1px;
BORDER-STYLE: solid
}
.secondalt {
BACKGROUND-COLOR: #CCEEEE
}
.firstalt {
BACKGROUND: #BBDDDD URL(/images/corelite/texture_bg.gif)
}
.tblhead {
BACKGROUND-COLOR: #113274;
COLOR:#FFFFFF;
FONT-SIZE:11px
}
.tblborder {
BACKGROUND-COLOR: #113274
}

/* ************************* */

#navbody {
COLOR: #FFFFFF;
FONT-FAMILY: Tahoma;
FONT-SIZE: 11px;
BACKGROUND: #113274 URL(/images/corelite/dev_stripes.gif)
}
#navbody TD {
FONT-FAMILY: Tahoma;
FONT-SIZE: 11px
}
#navbody A:LINK, #navbody A:VISITED, #navbody A:ACTIVE {
BACKGROUND-COLOR: transparent;
COLOR: #FFFFFF;
FONT-FAMILY: Tahoma;
FONT-SIZE: 11px
}
#navbody A:HOVER {
BACKGROUND-COLOR: #113274;
COLOR: #FFFF00;
FONT-FAMILY: Tahoma
}
#navbody .tblhead td {
BORDER-STYLE: solid;
BORDER-WIDTH: 1px;
BORDER-COLOR: #BBDDDD
}
#navbody .tblhead {
COLOR: #FFFFFF;
FONT-FAMILY: Verdana;
FONT-SIZE: 10px
}
HR {
COLOR: #113274
}
.gc {
COLOR: darkgreen;
FONT-SIZE: 11px;
BACKGROUND-COLOR: #FFFFFF
}
span.gc {
FONT-WEIGHT: bold;
}
.cc {
COLOR: darkblue;
FONT-SIZE: 11px;
BACKGROUND-COLOR: #FFFFFF
}
span.cc {
FONT-WEIGHT: bold;
}
.buttons INPUT {
BACKGROUND-COLOR: #CCEEEE; COLOR: #000000;
FONT-SIZE: 11px; FONT-WEIGHT: bold;
BORDER-COLOR: #113274; BORDER-WIDTH: 1px; BORDER-STYLE: solid
}
.uhoh {
COLOR: #FF0000;
BACKGROUND-COLOR: #EEEEEE
}There are a few extra classes in there, for some of my extra special features that aren't public yet... :)

[Kier]

... and this is how it styles the control panel:



:)

[snyx]

kier whats the pending items I see? just out of curiosity?

[Kier]

Oh, that's not actually the vBulletin control panel... it's the main control panel for the whole site... it's just built on vBulletin code :)

[eva2000]

Originally posted by Kier
Oh, that's not actually the vBulletin control panel... it's the main control panel for the whole site... it's just built on vBulletin code :) nifty :D

[snyx]

Like the 7-11 of Control Panels. Nice.

[Chen]

Wow! I just used it, and re-produced the images from the screen shot, made my own logo, and it looks spankin'! :D
(call it stealing, but I just LOVE that look)

Thanks Kier!

[lichtflits]

hi kier.
I'like your style, but I have the images that u are using
would you post that images? please??

cpbg.gif
texture_bg.gif
dev_stripes.gif

[Chen]

There you go. :)

Be sure to change "corelite" to "misc".

[floleb7]

My cp with kier's css




BODY {
BACKGROUND: #414468 URL(/images/misc/cpbg.gif);
COLOR: #CCCCCC;
FONT-FAMILY: verdana;
FONT-SIZE: 12px;
SCROLLBAR-BASE-COLOR: #414468;
SCROLLBAR-ARROW-COLOR: #FFC05E;
}
UL,LI,P,TD,TR {
FONT-FAMILY: verdana;
FONT-SIZE: 12px
}
A:LINK,A:VISITED,A:ACTIVE {
COLOR: #FFC05E;
TEXT-DECORATION: none;
FONT-SIZE: 11px
}
.firstalt A:LINK,.firstalt A:VISITED,.firstalt A:ACTIVE,.secondalt A:LINK,.secondalt A:VISITED,.secondalt A:ACTIVE {
BACKGROUND-COLOR: transparent
}
A:HOVER {
COLOR: #FF9B00;
}
FORM {
FONT-FAMILY: verdana;
FONT-SIZE: 10px
}
SELECT {
FONT-FAMILY: verdana;
COLOR: #CCCCCC;
FONT-SIZE: 11px;
BACKGROUND-COLOR: #4A4E74;
}
INPUT {
FONT-FAMILY: verdana;
COLOR: #4A4E74;
FONT-SIZE: 11px
}
TEXTAREA {
FONT-FAMILY: Verdana;
COLOR: #CCCCCC;
FONT-SIZE: 10px;
BACKGROUND-COLOR: #4A4E74;
}
#submitrow INPUT {
BACKGROUND-COLOR: #4A4E74;
COLOR: #CCCCCC;
FONT-WEIGHT: bold;
BORDER-COLOR: #FFFFFF;
BORDER-WIDTH: 1px;
BORDER-STYLE: solid
}
.secondalt {
BACKGROUND-COLOR: #4A4E74;
}
.firstalt {
BACKGROUND: #404364 URL(/images/corelite/texture_bg.gif)
}
.tblhead {
BACKGROUND-COLOR: #FFC05E;
COLOR: #000000;
FONT-SIZE:11px
}
.tblborder {
BACKGROUND-COLOR: #404364;
}

/* ************************* */

#navbody {
COLOR: #FFC05E;
FONT-FAMILY: verdana;
FONT-SIZE: 11px;
BACKGROUND: #414468 URL(/images/corelite/dev_stripes.gif)
}
#navbody TD {
FONT-FAMILY: verdana;
FONT-SIZE: 11px
}
#navbody A:LINK, #navbody A:VISITED, #navbody A:ACTIVE {
BACKGROUND-COLOR: transparent;
COLOR: #CCCCCC;
FONT-FAMILY: verdana;
FONT-SIZE: 11px
}
#navbody A:HOVER {
COLOR: #FF9B00;
FONT-FAMILY: verdana
}
#navbody .tblhead td {
BORDER-STYLE: solid;
BORDER-WIDTH: 1px;
BORDER-COLOR: #BBDDDD
}
#navbody .tblhead {
COLOR: #000000;
FONT-FAMILY: Verdana;
FONT-SIZE: 10px
}
HR {
COLOR: #FFC05E
}
.gc {
COLOR: darkwhite;
FONT-SIZE: 11px;
BACKGROUND-COLOR: #414468
}
span.gc {
FONT-WEIGHT: bold;
}
.cc {
COLOR: darkred;
FONT-SIZE: 11px;
BACKGROUND-COLOR: #414468
}
span.cc {
FONT-WEIGHT: bold;
}
.buttons INPUT {
BACKGROUND-COLOR: #4A4E74; COLOR: #000000;
FONT-SIZE: 11px; FONT-WEIGHT: bold;
BORDER-COLOR: #113274; BORDER-WIDTH: 1px; BORDER-STYLE: solid
}
.uhoh {
COLOR: #FF0000;
BACKGROUND-COLOR: #EEEEEE
}

[Billy]

Just wondering,what is the hex color of the sidebars background(the graphic) in Kiers CP.It looks nice.

[YourHostSucks]

Nice Kier,

Billy, it is 2 colors

Darker Color: #103073

and

Light Color: #396DAD

[Paul J]

Here's my grey and blueish one

[Mr. X]

Here is my theme:

BODY {
BACKGROUND-COLOR: #FFFFFF;
COLOR: #000000;
FONT-FAMILY: Arial,Helvetica,sans-serif;
FONT-SIZE: 12px;
/* this attribute sets the basis for all the other scrollbar colors (Internet Explorer 5.5+ only) */
SCROLLBAR-BASE-COLOR: #40364d;
/* all scrollbar attriblutes following are not required, but you can set them if you wish. */
SCROLLBAR-ARROW-COLOR: #F5D300;
SCROLLBAR-HIGHLIGHT-COLOR: #90869E;
/* attributes we aren't using at the moment
SCROLLBAR-3DLIGHT-COLOR: #87789E;
SCROLLBAR-FACE-COLOR: #40364d;
SCROLLBAR-SHADOW-COLOR: #2F4261;
SCROLLBAR-DARK-SHADOW-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #51485F;
*/
}
UL, LI, P, TD, TR {
FONT-FAMILY: Arial,Helvetica,sans-serif;
FONT-SIZE: 12px;
}
/* color for links */
A:LINK, A:VISITED, A:ACTIVE {
COLOR: #42437D;
}
/* hover color for links (Internet Explorer only) */
A:HOVER {
COLOR: #F0F0F0;
BACKGROUND-COLOR: #2C303A;
}
/* style for links made with makelinkcode() */
.lc {
FONT-SIZE: 11px;
}
FORM {
FONT-FAMILY: Arial,Helvetica,sans-serif;
FONT-SIZE: 10px;
}
SELECT, INPUT, TEXTAREA {
FONT-FAMILY: Arial,Helvetica,sans-serif;
COLOR: #7B8488;
FONT-SIZE: 10px;
}

/* style for submit/reset buttons */
#submitrow INPUT {
BACKGROUND-COLOR:#DDDDDD;
COLOR: #000000;
FONT-WEIGHT: bold;
}
/* first alternating table background color */
.firstalt {
BACKGROUND-COLOR: #D1D1D1;
}
/* second alternating table background color */
.secondalt {
BACKGROUND-COLOR: #D1D1D1;
}
/* table header background and text color */
.tblhead {
BACKGROUND-COLOR: #636B7E;
COLOR:#FFFFFF;
FONT-SIZE:10px;
}
/* table border color */
.tblborder {
BACKGROUND-COLOR: #6C6C6C;
}

/* extra styles for top and left frames */
#navbody {
COLOR: #E2E2E2;
FONT-FAMILY: Arial,Helvetica,sans-serif;
FONT-SIZE: 10px;
BACKGROUND-COLOR: #E5E5E5;
}
#navbody TD {
FONT-FAMILY: Arial,Helvetica,sans-serif;
FONT-SIZE: 10px;
}
#navbody A:LINK, #navbody A:VISITED, #navbody A:ACTIVE {
COLOR: #000000;
FONT-FAMILY: Arial,Helvetica,sans-serif;
FONT-SIZE: 10px;
FONT-WEIGHT: normal;
TEXT-DECORATION: none;
}
#navbody A:HOVER {
COLOR: #FFFFFF;
FONT-FAMILY: Arial,Helvetica,sans-serif;
BACKGROUND-COLOR: #333333;
FONT-WEIGHT: normal;
TEXT-DECORATION: none;
}
#navbody .tblhead {
COLOR: #FFFFFF;
FONT-FAMILY: Arial,Helvetica,sans-serif;
}

/* global and custom color definitions */
.gc { /* global color */
COLOR: darkgreen;
}

.cc { /* custom color */
COLOR: darkblue;
}

Here is a screenshot of it

[pgowder]

Where do you go to edit your cp.css?

[neal007]

I don't think there is physically a css file, if you click on STYLES from the admin control panel (hence cp meaning control panel) and look at the boxes at the top, you'll see one that has the CSS information written in it.

[pgowder]

Ok, I clicked on modify styles, I have a two, default and ubb??

[Chen]

Actually there is a cp.css file - located right in your forum's folder.
Replace its contents with whatever Style Sheet you want from here, save and upload.

[pgowder]

Thanks!

[Etcher]

That is MUCH better... Thanks for your help guys...