Style Classic vBulletin 3 skin --- development log

Adam Howard

Well-known member
I figure it would be worth logging my development step by step as I generate a skin.

The skin will be based inspired by my skin on vBulletin.org ( http://www.vbulletin.org/forum/showthread.php?t=275621 ) which was released on December 18, 2011. But may take on a different direction in the end.

As a starter base, I'll be starting out with Naked XenForo ( http://xenforo.com/community/resources/naked-xenforo.1216/ ) which is a stripped down version of XenForo's Default skin.

Every tweak and edit will be done here for everyone to see and the code will be non-exclusive open source so anyone (and everyone) is free to take snips of code for them self as I progress the development. (y)

Advise: You may not want to subscribe to this thread as things will update fairly quickly and close together.

I'm also still being moderated and so don't be all to surprised if suddenly a dozen or more replies sudden come out of thin air.
 
Coloring for node titles and category titles

PHP:
.nodeList .categoryStrip {
color: white !important;
background-color: #757E9D !important;
border-top: 1px solid rgb(0, 0, 0) !important;
border-bottom: 1px solid rgb(0, 0, 0) !important;
border-bottom-color: rgb(0, 0, 0) !important;
}

.nodeList .categoryStrip .nodeTitle a {
color: white !important;
}
 
Coloring for node list

PHP:
.node .nodeInfo.primaryContent, .node .nodeInfo.secondaryContent {
background: #D9DAE6 !important;
}
 
Link node (forum) colors

PHP:
.nodeList .categoryForumNodeInfo, .nodeList .forumNodeInfo, .nodeList .pageNodeInfo, .nodeList .linkNodeInfo {
background-color: #D9DAE6 !important;
border-bottom: 1px solid black !important;
}
 
While this is technically called "section main" .... I've always called this the "inside body" (There is another simply non-tech English term for it, but it escaped me at the moment)

This is the coloring for it

PHP:
.sectionMain {
background-color: #757E9D !important;
}

^ I hate this "global". And I call it a global setting because this also changes the help page. :mad:
 
This is basically just (only) the discussion list colors (think thread list colors)

PHP:
.discussionListItem {
background: #D9DAE6 !important;
}

I'm breaking it down a little for those who may want to change things and get creative.
 
This is basically just (only) the discussion list colors (think thread list colors)

PHP:
.discussionListItem {
background: #D9DAE6 !important;
}

I'm breaking it down a little for those who may want to change things and get creative.

For a nice clean divided look we're adding this

PHP:
border-bottom: 1px solid black !important;

So the end results is thus :)


PHP:
.discussionListItem {
background: #D9DAE6 !important;
border-bottom: 1px solid black !important;
}
 
This changes the body color or as I call it the outside body when you have dividing "frames" that give you inside bodies.

PHP:
body {
background-color: #576288 !important;
}


This is where XenForo and I like to kick and scream at one another. It really should not be so global as it is, but I've come to find (from my past experience) that this changes a few small details here and there in the past (I often forget where).

But if memory services me correct, this is also the only way to get the desired result. So in the end I may have to track down 1 or 2 small items to correct later.

It's good it you use this to put this on top (I like to find it quickly).
 
Officially the page content, but I like to think of it as mid-way.

PHP:
#content .pageContent {
background-color: #576288; !important
}

You can get creative and change this to something else, but for simplicity and to keep with the vBulletin inspired look; for now I'll keep it "as is". vBulletin didn't have so many page bodies (I know there is another tech term, but I forget it all the time. I make for a poor teacher in the I know how to do and can show, but don't ask what you call it. LoL)
 
This is basically just (only) the discussion list colors (think thread list colors)

PHP:
.discussionListItem {
background: #D9DAE6 !important;
}
I'm breaking it down a little for those who may want to change things and get creative.

As explained earlier; I'm breaking this up a little so other can learn some. Although I admit I jump around sometimes.

This takes care of the background color for the avatar on your discussion (thread) list. It also takes care of that little box that shows how many replies and such.
PHP:
.discussionListItem .posterAvatar, .discussionListItem .stats {
background-color: #D9DAE6 !important;
}
 
Message content color

Basically this will be the background color for the very text your are reading now (this very moment).

PHP:
.message .messageContent {
background-color: #D9DAE6;
}
 
Title bar color

Basically those larger than life titles you see above every thread or on your home page, the title of your site.

PHP:
.titleBar h1 {
color: white !important;
}
 
Notice back ground color
PHP:
.PanelScroller .panel .noticeContent, .PanelScrollerOff .panel .noticeContent {
background-color: #FFEB90 !important;
}

The border around it
PHP:
.PanelScroller .scrollContainer, .PanelScrollerOff .panel {
background-color: rgb(0, 0, 0) !important;
}
 
Again, I do jump around. LoL :p

This is the color for the signature background

PHP:
.message .signature {
background-color: #C0C5D6 !important;
}

The message info is where all those little tools such as reply, quote, edit, ip, ect....ect...

PHP:
.message .messageInfo {
background-color: #C0C5D6 !important;
}
 
section header for thread list headers or discussion list header, whichever you prefer to call them (I simply say threads)

PHP:
.discussionList .sectionHeaders {
color: white !important;
background-color: #767f9e !important;
border-top: 0px !important;
border-bottom: 0px !important;
}

.discussionList .sectionHeaders a {
color: white !important;
background-color: #767f9e !important;
}
 
Did you consider the style properties system, or was it easier to just create the CSS manually?
In the past, yes. But not everything is covered in the style properties. There are just somethings that XenForo does not have properties for.

Style properties for XenForo is much like vBulletin in that X says 1 thing, but often does another or does 5 other things; when you just wanted that 1 thing.

I wish the style properties were more clear on what they did, there was more of them, and less global properties (x should not do 5 or more thing).

All these edits are only in extra.css though. So technically no actual template edit as really been made.

Although I do find that the properties are good to cleaning up all the small borders.... Which I'll most likely do at the end and will note here which ones.
 
All the user details below the avatar (back ground colors) on the thread display

PHP:
.messageUserBlock h3.userText {
background-color: #BCC1D3 !important;
}
 
The background color for the avatar on the thread display

PHP:
.messageUserBlock div.avatarHolder {
background-color: #D9DAE6 !important
}
 
Top Bottom