Style Classic vBulletin 3 skin --- development log

[Adam Howard]

I honestly do not use the help page and so I typically do not style it. Seriously, we hide it on our site.

But I really hate styling it because it is never straight forward. Or far to many globals.(Honestly)

Coloring for it thus far.... (still tweaking)

.baseHtml {
background-color: #BCC1D3 !important;
}
 
.helpContent {
background-color: #BCC1D3 !important;
}
 
.dataTable tr.dataRow th {
background: #757E9D !important;
border-bottom: 1px solid black;
border-top: 1px solid black;
color: white;
}

May edit these later........

 

[Adam Howard]

.bbCode dl dd {
background-color: #BCC1D3 !important;
}

^ More tweaking on the help page

 

[Adam Howard]

Finished or otherwise wrapped up the help page coloring.

.primaryContent {
background-color: #DDDEE9 !important;
}

^ This is what I call a "global" .... something that changes a dozen or more things else where.

But in this case it happens to work for me so, I can live with it.... But not always.

 

[Adam Howard]

I honestly do not use the help page and so I typically do not style it. Seriously, we hide it on our site.

But I really hate styling it because it is never straight forward. Or far to many globals.(Honestly)

Coloring for it thus far.... (still tweaking)

.baseHtml {
background-color: #BCC1D3 !important;
}
 
 
.helpContent {
background-color: #BCC1D3 !important;
}
 
.dataTable tr.dataRow th {
background: #757E9D !important;
border-bottom: 1px solid black;
border-top: 1px solid black;
color: white;
}

May edit these later........

Removed this global

.baseHtml {
background-color: #BCC1D3 !important;
}

It's always the final small details that I hate... Those last little things that look so small, so simple, and yet royally f*ck up everything else.

 

[Adam Howard]

Coloring for input forums .... In this case the search page (and a few other places)

.xenForm .ctrlUnit {
background-color: #DDDEE9 !important;
color: black !important;
}
 
.ctrlUnit dd .explain {
color: #576288 !important;
font-weight: bold;
}

 

[Adam Howard]

I think I found all the little gray text

(You know the small, almost invisible, and god help you if you have a large monitor and try to read it type text.... Ya, that stuff)

.ctrlUnit dd .explain {
color: #576288 !important;
font-weight: bold;
}
 
.ctrlUnit dt dfn, .ctrlUnit dt .error, .ctrlUnit dt a {
color: #576288 !important;
font-weight: bold;
}
 
.ctrlUnit dd li .hint {
color: #576288 !important;
font-weight: bold;
}
 
.trophy .info .description {
color: #576288 !important;
font-weight: bold;
}
 
.profilePage .primaryUserBlock .userStatus .DateTime {
color: #576288 !important;
font-weight: bold;
}
 
.searchResult .meta {
color: #576288 !important;
font-weight: bold;
}
 
.searchResult .contentType {
color: #576288 !important;
font-weight: bold;
}

 

[Adam Howard]

Beta 1
(Still a few tweaks needed)

 

[Adam Howard]

Page navigation or in short, the little numbers on pages.

.PageNav a {
color: black !important;
background-color: #BCC1D3;
border-color: black !important;
}

 

[Adam Howard]

.pageNavHeader {
color: white !important;
}

 

[Adam Howard]

.Popup .PopupControl, .Popup.PopupContainerControl {
color: white;
}

 

[Adam Howard]

More small gray text....

.... In this case the "edit" link on the thread view list

body .faint, body a.faint, body .faint a {
color: #576288 !important;
}

 

[Adam Howard]

Text coloring on the thread view within the forums (nodes)

.discussionList .sectionFooter .contentSummary {
color: white;
}

 

[Adam Howard]

More text coloring fixing.

.sectionFooter a {
color: white;
}

 

[Adam Howard]

As it says.... This changes the coloring background and text for the Discussion List Options Handle

In simple English... The little small nub at the bottom of the thread view that allows you to selection all those little options.

#DiscussionListOptionsHandle a {
color: black !important;
background-color: #D9DAE6 !important;
}

 

[Adam Howard]

Coloring for the sub headings... Or in this case the menu category titles on the settings page.

.subHeading {
background-color: #757E9D;
color: white;
border-color: black;
}

 

[Adam Howard]

More gray text

(this in the recent activity on the profile)

.event .content .description {
color: black !important;
}

.event .content .DateTime {
color: #576288 !important;
font-weight: bold;
}

 

[Adam Howard]

More gray text

On the trophy awarded page

.trophy .awarded {
color: #576288 !important;
font-weight: bold;
}

 

[Adam Howard]

Revisited section footer and added some coloring to the text

.sectionFooter {
background-color: #767F9E !important;
color: white;
font-weight: bold;
}

 

[Adam Howard]

A few lose ends before releasing something into the wild

Text coloring, profile navigation tabs, button coloring

.button {
color: black !important;
}

.larger.textHeading, .xenForm .sectionHeader {
color: white;
}

.textHeading, .xenForm .sectionHeader {
color: white;
}

.profilePage .tabs.mainTabs {
background-color: #BCC1D3 !important;
}

.profilePage .tabs.mainTabs li a {
background-color: #576288;
color: white;
}

.profilePage .tabs.mainTabs li.active a {
background-color: #DDDEE9 !important;
color: black;
}

 

[Adam Howard]

More removing gray text..... blah!

.ipInfo .host {
color: #576288 !important;
}