Style the admin panel with CSS

[Kier]

... that you can completely customize your Administrator and Moderator Control Panels using the small cp.css file, which lives in the base of your vBulletin installation?

One of the major changes that happened with my control panel changes for vB2 Release Candidate 1 was the change to an entirely CSS-based style system for the control panel.

To customize your own control panel, you can simply open up the cp.css file in any text editor, and get busy entering your own custom colors and fonts using standard CSS definitions.

This is how the control panel for my own forums looks right now:



For some good reference on CSS, check out Microsoft's MSDN section on CSS Attributes: http://msdn.microsoft.com/workshop/author/css/reference/attributes.asp

[Kier]

Vinnie's post moved here (http://161.58.84.213/forum/showthread.php?s=&threadid=19444)

[CoolaShacka]

Thanks Kier.

That's mine:

[s.molinari]

Kier,

You really have a great eye for graphics. Very artistic you are! (Or did somebody else do it? ;))

Scott

[Kier]

Originally posted by s.molinari
Kier,

You really have a great eye for graphics. Very artistic you are! (Or did somebody else do it? ;))

Scott Did someone else do it... :rolleyes: I don't get paid to do this stuff in order to get someone else to do it ;)

[Jake Bunce]

ooooooo... pretty.

give me your cp.css file! :D

[s.molinari]

Originally posted by Kier
Did someone else do it... :rolleyes: I don't get paid to do this stuff in order to get someone else to do it ;)

I didn't want to compliment the wrong person. :) Therefore, the compliment goes to you. ;)

By the way, good work on the vB HTML also.


Scott

[chrispadfield]

Originally posted by Kier
Did someone else do it... :rolleyes: I don't get paid to do this stuff in order to get someone else to do it ;)

shame, that would be one cool job :)

[Mike Sullivan]

Originally posted by Kier
I don't get paid to do this stuff in order to get someone else to do it ;) Well actually, he does it, but I get paid for it. ;)

[Joshs]

Can people please post their admin css files? Especially, kier ;)

[Jake Bunce]

ALL YOUR CSS FILE ARE BELONG TO ME!!!

[tubedogg]

I hate to rain on everybody's parade, but there are some hardcoded colors still in the admin files...namely announcement.php, avatar.php, icon.php, smilie.php, user.php, and usergroup.php. (If anyone wants line numbers I'd be more than happy to provide them.)

[Kier]

Yeah, I know about those... I'll be getting rid of them for the next release.

[Thomas P]

Looks gr8!
Neat idea & good that it'll be made more comprehensive,
cu,
-Tom

[Valkyre]

Very nice Kier, thanks to you I'll be up all night customizing my control panel :D

[c-prompt]

Ignore

[mbcguru]

Awesome! That looks great. I was just going to ask about how to change things in there. Since only 2 people see it -- my co-mod & myself -- I don't feel like it needs to be fancy (maybe when I have some time just for fun!), but the preset color scheme is a little dark for my eyes and need to be changed. I'm gonna see what I can do with it. Thank. :)

[fury]

Gee, thanks a lot :rolleyes:

Now I won't be able to rest until the control panel looks exactly like the board. LOL

Thanks Kier :)

[JJR512]

It's good to know...but I don't really think it's worth the effort right now. Only myself and one or two other people can actually see the admin cp. Especially if some of the colors are hard-coded. I mean, nice work and all, I just don't see the point, that's all. Well, maybe if there were an ultra-easy way of changing the look, like some style settings just for the CP, then I might change the look.

But why can't the admin cp colors be based on the board's colors? Doesn't that make sense to anybody else?

Here's another question: What about the moderator's control panel? Does this CSS file affect that, too, or is it a different file?

[JamesUS]

I believe this file is for both Mod and Admin CP.

The hard coded colors have all been sorted for the next release (I'm fairly certain of this)

[tubedogg]

The rogue colors have been sorted for 2.0.2. The file affects both the Mod CP and Admin CP.

[Chen]

Will someone here post their CSS file? I hate the look of the cp and I wanna make it prettier. :)

Thanks

[Kier]

There's another thread in this forum with several CSS examples :)

[Chen]

Yeah, I just saw it, sorry.

But I want yours goddamnit, I want yours! :(
(without all of the funky stuff we don't have)

[Kier]

Er... mine is already in that thread :rolleyes:

[Chen]

Yeah I know, but it has all of the edits you added, so I dunno how to use it.

[Kier]

copy, paste, save.

[TraXter]

haha here look at this. i totally like it!
take a look at the site (http://www.tactical-ops.de) and then take a look at my cp. :) this is soooooooooo spacy :) only the image at the top isnt very detailed, will do one later! Tell me what you think plz !

The URL to the forums is http://forums.tactical-ops.de btw....

[Flare945]

what did you do to get the editboxes + buttons flat like that? (2d)

[TraXter]

with CSS !

[Fryzid]

TraXter Nette Antwort.

Flare945 Just type cp.css after the forum url and you can download his cp.css and examine it. ( http://forums.tactical-ops.de/cp.css )

[TraXter]

@Fryzid: sorry, bin da grad aufgestanden und hatte keine Lust noch längere Erklärungen zu machen. Lernen muss er allerdings noch selber :):

@Flare945: get my cp.css and edit it. you can find all parameters and possible values here: http://www.w3.org/Style/CSS/

[RaptoR|PuF]

BODY {
BACKGROUND-COLOR: #CCCCCC;
COLOR: #3F3849;
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: #6F7E95;
/* all scrollbar attriblutes following are not required, but you can set them if you wish. */
SCROLLBAR-ARROW-COLOR: #EEEEEE;
SCROLLBAR-HIGHLIGHT-COLOR: #8D99AB;
/* attributes we aren't using at the moment
SCROLLBAR-3DLIGHT-COLOR: #87789E;
SCROLLBAR-FACE-COLOR: #6F7E95;
SCROLLBAR-SHADOW-COLOR: #2F4261;
SCROLLBAR-DARK-SHADOW-COLOR: #000000;
SCROLLBAR-TRACK-COLOR: #CCCCCC;
*/
}
UL, LI, P, TD, TR {
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
FONT-SIZE: 12px;
}
/* color for links */
A:LINK, A:VISITED, A:ACTIVE {
COLOR: #3F3849;
}
/* hover color for links (Internet Explorer only) */
A:HOVER {
COLOR: #EEEEEE;
BACKGROUND-COLOR: #6F7E95;
}
/* style for links made with makelinkcode() */
.lc {
FONT-SIZE: 11px;
}
FORM {
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
FONT-SIZE: 10px;
}
SELECT, INPUT, TEXTAREA {
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
COLOR: #222222;
FONT-SIZE: 10px;
}

/* style for submit/reset buttons */
#submitrow INPUT {
BACKGROUND-COLOR:#6F7E95;
COLOR: #EEEEEE;
FONT-WEIGHT: bold;
}
/* first alternating table background color */
.firstalt {
BACKGROUND-COLOR: #D6DAE6;
}
/* second alternating table background color */
.secondalt {
BACKGROUND-COLOR: #BFC5D3;
}
/* table header background and text color */
.tblhead {
BACKGROUND-COLOR: #6F7E95;
COLOR:#EEEEEE;
FONT-SIZE:10px;
}
/* table border color */
.tblborder {
BACKGROUND-COLOR: #455164;
}

/* extra styles for top and left frames */
#navbody {
COLOR: #3F3849;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
FONT-SIZE: 10px;
BACKGROUND-COLOR: #bbbbbb;
}
#navbody TD {
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
FONT-SIZE: 10px;
}
#navbody A:LINK, #navbody A:VISITED, #navbody A:ACTIVE {
COLOR: #000033;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
FONT-SIZE: 10px;
FONT-WEIGHT: normal;
TEXT-DECORATION: none;
}
#navbody A:HOVER {
COLOR: #EEEEEE;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
BACKGROUND-COLOR: #6F7E95;
FONT-WEIGHT: normal;
TEXT-DECORATION: none;
}
#navbody .tblhead {
COLOR: #FFFFFF;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
}

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

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

[IDN]

im missing out in admin styles.. bring pictures back!

[Floris]

Talking about bringing back old topics *ggeeez* :)
I would love to see those [x] images appear as working ones again. How about an update kier and the rest? Currently, I reset my .css after upgrading to 2.2.6rc to default vbulletin, so not much to show right now.

[Kamex]

Is there a way I can get it to load a style from a certain location off the user's computer?

[Darkwaltz4]

you can upload a style from your computer, and this thread is for vb2 i believe, considering the last post age was 21 months ago :-p