Zombie Skin > Villain Skin (vBulletin)

Thanks to Sorciere_NA's work in this post I learned about Stylish, which is a Firefox plug-in which allows one to take over the style sheet of a web site or forum. This enables one to tweak the way this vBulletin Board looks. In the link above, I linked a classic villain style version style-sheet to mimic the old villain skin of the UBB Board. However, I tweaked the villain skin a lot to something which I think just looks a whole lot better, which I'm dubbing... ZombieSkin, which is an alternative to the default villain skin.

Here is the Villain Skin CSS script to cut and paste into Stylish.

There's a villain skin and hero skin. Zombie Skin (villains) looks like this:



Here's what Zombie Hero Skin looks like:



And here you can find the Zombie Hero Skin CSS script to cut and paste into Stylish.

As you can see, a lot of the colors were tweaked to 'go together.' The font is also one size larger for readability and Verdana has replaced Arial. The gradient colors are gone. Extraneous underlining has been removed except for links. The grey avatar border is gone (making alpha channel transparencies work).

Of course, anything you don't like you can tweak, the style sheet is annotated.

Thanks to Sorciere_NA, Aggelakis, and Devian for their contributions.

Chrome Users: I've been told by a Chrome user that these Stylish Scripts will work if you remove the initial and ending curly brackets: { }

Opera Users: Use the plugin "Include CSS" and these Stylish Scripts will work if you remove the initial and ending curly brackets: { }

To complete the skinning, I recommend wholeheartedly Sharrow's GreaseMonkey script to strip out pics from sigs; and Diellan's GreaseMonkey script to move the Sticky Icon from the right to in front of the thread title and delete the 'STICKY:' prefix.

Edit: I used this post to get the pics of what the two skins look like. Nothing to see here.

Now people will want a hero skin version. You've dug your own grave, Zombie

Nice. I took it and did significant editing for my own use, but your base code was fabulous to work off. Thanks!

Quote:

Originally Posted by Dispari I don't know why Dink thinks she's not as sexy as Jay was. In 5 posts she's already upstaged his entire career.

Now, you need to figure out how to make this work with other browsers such as IE8.

Firefox has other problems on the new forums that will keep me using IE most of the time on here.

Change the New Posts Image!



Woohoo! I have been twiddling with this all day long, so here's a great tidbit I've finally figured out!

Copy and paste one of the first two blocks of code to the bottom of the CSS file Z_Man gave above:

http://docs.google.com/View?id=dcv379dz_0d6r8hcgn

You only need to copy the top one (villain theme) OR bottom one (hero theme), unless you switch between themes.

This gets rid of that tiny, tiny new posts image (8x9 pixels), and replaces it with something a little more substantial (20x20 pixels). You can, of course, edit the code to call any image you prefer, if you want an even bigger image or if you want a different colored image. Just replace "http://i32.tinypic.com/33ur9eo.png" with the URL of your preferred image.

Change the Last Post Image!



The second block of code changes the little right-arrow by the name/timestamp in the "Last Post" column (between Rating and Replies). Half the time I ended up clicking the person's name instead of the arrow, so I got tired of it.

Again, you only need to copy the top one (villain theme) OR bottom one (hero theme), unless you switch between themes.




Utilizing this, you can change just about every image that the webpage calls, as long as you know the exact src= call (found in the page's View Source).

Quote:

Originally Posted by Dispari I don't know why Dink thinks she's not as sexy as Jay was. In 5 posts she's already upstaged his entire career.

Got some weird error messages that I was not allowed to cut and paste when I setup the hero style. I'll keep an eye on things. This is really great, thank you, Zombie.

Here's one that I found useful - new/updated posts don't have a great deal of contrast in the thread view; this rule will target them.

td.alt1 a[style*="font-weight"] {
color: red !important;
}


Edit: The HTML generated by this board is atrocious.

In Social Groups, folks with avatars have nothing shown. That's no problem with me. But folks without avatars have a giant question mark--and when I updated to the hero style, the question mark is actually bigger and extends over the edge of any posts making them fairly hard to read. Is there any way to disable that question mark in the style?

Is there a way to decrease the font a user's name is shown in?

If so, would you be so kind as to post the code so I can copy/paste it into the skin?

Thank you in advance,

Hey there, been using Stylish for awhile, and I just updated my own stylesheet on userstyle.org last night as well. Please take a look and let me know what you think of it! The same style sheet is compatible with both the Hero and Villain skins.

Edit: Link in sig!

Also, feel free to upload all custom style sheets to userstyle.org! One-click installs for Stylish is pretty awesome =D

I might work on a custom color stylesheet as well, but from what I've seen so far, there's a good amount of inline CSS coded into the board, thus making CSS selecting a PITA. I'm sure you've seen the code on the two left TDs of each post.

WoW,Thank you so much for this.Makes using the board so much better and easier.