Style Classic vBulletin 3 skin --- development log

[Adam Howard]

Revisited this and change a little coloring for the text and the sidebar header coloring.

.sidebar .section .primaryContent h3, .sidebar .section .secondaryContent h3, .profilePage .mast .section.infoBlock h3 {
background-color: #757E9D !important;
color: white !important;
}

View attachment 36913

Glossy changes the above into this, adding 1 xenforo default image for the sidebar to match the category headers and overall layout

.sidebar .section .primaryContent h3, .sidebar .section .secondaryContent h3, .profilePage .mast .section.infoBlock h3 {
background: #757E9D url('styles/default/xenforo/gradients/category-23px-light.png') repeat-x top !important;
color: white !important;
}

This is the only difference in code between the two versions.

 

[Adam Howard]

Changes the background color for the author description in LN Blogs

.lnblogEntryAboutAuthor {
background-color: #D9DAE6 !important;
}

Changes the background color for the "edit link" in the top right corner (LN Blogs)

.lnblogTitleEditLink {
background-color: #D9DAE6 !important;
}

Originally I wanted to only change the link color, but this is impossible as this link seems to hook into the general link global color... ie... Can't change this without changing

a:link, a:visited

Which is something I don't want to do. So the compromise was to just change the background.

 

[Adam Howard]

Changes text color in moderator bar

#moderatorBar a, #moderatorBar .itemCount {
color: white !important;
}

Also important for compatibility for 8thos Bar
http://xenforo.com/community/resour...floating-menu-with-avatar-and-search-box.809/

 

[0xym0r0n]

I know this is your development log for the style, but I'm just saying this is also useful for those who are unaware of how to change certain things in the CSS files. You describe what it changes and it's searchable I like!

 

[Adam Howard]

I know this is your development log for the style, but I'm just saying this is also useful for those who are unaware of how to change certain things in the CSS files. You describe what it changes and it's searchable I like!

I'm glad it seems mildly educational.

Almost finished. I think I'll spit out some node icons for this and call it day.

 

[Adam Howard]

Final "code" edits.... Adding the comment divider

You want something to wrap around the skin / style / theme (whichever you prefer to call it) source code.

This is because I've done something in extra.css and other people will most likely add their own customizations or add-ons which will require you to edit / add things to extra.css

Some of those things may require being place on top and others may require to be add at the very end. But most of the time it will not matter. However, you should plan for both and you don't want the skin code getting lost among whatever else someone else may add.

The classic argument of less is more is seemingly invalid when it comes between the classic argument of error between user and keyboard. Or the administrator who wants to do things "on the fly" .... ie .... quickly.

So while most developers will wrap their skin code with something small and basic such as

/*--- Start of skin code ---*/

/*--- End of skin code ---*/

This gets lost. Very easily.

And if I have more than 1 custom skin installed (most likely); I'm not going to exactly remember the wording for this to do a quick search for it (as every developers wording is different). And as I said, most people are either looking to do this quickly, if not carelessly.

Keep it mind it will also get lost as other add-ons or developers or even yourself add your own notes.

Myself for example, I scroll down faster than I can read the code something. And before you think I'm alone... You're just wrong. You don't have to like it, you're just wrong. Unless you're one of those picky people who feel you have the time to read line by line to find something.... The majority of people want to find it NOW. By now I mean, yesterday (if not last year).

So to wrap your skin code and make is fast, easy, and noticeable to find (when blindly scrolling down), even for the blind......

/*---  ---*/
/*---  ---*/
/*---  ---*/
/*---  ---*/
/*-------------  START of Skin Code ------------*/
/*---  ---*/
/*---  ---*/
/*---  ---*/
/*---  ---*/

/*---  ---*/
/*---  ---*/
/*---  ---*/
/*---  ---*/
/*------------  END of Skin Code ------------*/
/*---  ---*/
/*---  ---*/
/*---  ---*/
/*---  ---*/

The point of it is you want it to stand out. If it looks like an eyesore to the inner developer who wants everything clean and orderly and it's not something you can ignore .... You're doing it right.


This is also a good place to include a small copyright, other small notes, or even a shout-out to someone if you want.

 

[Adam Howard]

Name change

vBulletin Flat - vBulletin Flat (unchanged)

vBulletin Glossy - vBulletin Frosty



ALL DONE

Decided to keep default node icons. Working on new style called, Black Abyss.

 

[Adam Howard]

Released
http://xenforo.com/community/resources/vbulletin-inspired.1246/

 

[DRE]

After skim-reading this thread I just realized that the very first skin I posted on Xenforo, is actually a knock off of a vBulletin 3 skin that I tried to emulate but I didn't do any EXTRA.CSS changes.

http://xenforo.com/community/resources/qapla-com-seastone-fluid-and-fixed.103/