Style Classic vBulletin 3 skin --- development log

[Adam Howard]

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.

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.

 

[Adam Howard]

Coloring for node titles and category titles

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

 

[Adam Howard]

Coloring for node list

.node .nodeInfo.primaryContent, .node .nodeInfo.secondaryContent {
background: #D9DAE6 !important;
}

 

[Adam Howard]

Last post box on node (forum) list color

.node .nodeLastPost {
background: #D9DAE6 !important;
}

 

[Adam Howard]

Link node (forum) colors

.nodeList .categoryForumNodeInfo, .nodeList .forumNodeInfo, .nodeList .pageNodeInfo, .nodeList .linkNodeInfo {
background-color: #D9DAE6 !important;
border-bottom: 1px solid black !important;
}

 

[Adam Howard]

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

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

^ I hate this "global". And I call it a global setting because this also changes the help page.

 

[Adam Howard]

This is basically just (only) the discussion list colors (think thread list colors)

.discussionListItem {
background: #D9DAE6 !important;
}

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

 

[Adam Howard]

This is basically just (only) the discussion list colors (think thread list colors)

.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

border-bottom: 1px solid black !important;

So the end results is thus

.discussionListItem {
background: #D9DAE6 !important;
border-bottom: 1px solid black !important;
}

 

[Adam Howard]

This changes the body color or as I call it the outside body when you have dividing "frames" that give you inside bodies.

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).

 

[Adam Howard]

Officially the page content, but I like to think of it as mid-way.

#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)

 

[Adam Howard]

This is basically just (only) the discussion list colors (think thread list colors)

.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.

.discussionListItem .posterAvatar, .discussionListItem .stats {
background-color: #D9DAE6 !important;
}

 

[Adam Howard]

Message content color

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

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

 

[Adam Howard]

Title bar color

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

.titleBar h1 {
color: white !important;
}

 

[Adam Howard]

Notice back ground color

.PanelScroller .panel .noticeContent, .PanelScrollerOff .panel .noticeContent {
background-color: #FFEB90 !important;
}

The border around it

.PanelScroller .scrollContainer, .PanelScrollerOff .panel {
background-color: rgb(0, 0, 0) !important;
}

 

[Adam Howard]

Again, I do jump around. LoL

This is the color for the signature background

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

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

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

 

[James]

Did you consider the style properties system, or was it easier to just create the CSS manually?

 

[Adam Howard]

section header for thread list headers or discussion list header, whichever you prefer to call them (I simply say threads)

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

 

[Adam Howard]

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.

 

[Adam Howard]

All the user details below the avatar (back ground colors) on the thread display

.messageUserBlock h3.userText {
background-color: #BCC1D3 !important;
}

 

[Adam Howard]

The background color for the avatar on the thread display

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