OcUK Blue Theme

OcUK Grey Theme

Last year there was a thread on OcUK (a forum I frequent) about modifying the default vBulletin theme that is used, changing it from blue to grey. The original idea and CSS was all the idea of Rob Miller. Since then, people have been adding bits to it and finding ways of doing it in both Firefox and Opera.

I didn’t really take that much notice of it to start with, mainly because I was quite happy with the default blue theme. I only got involved once people couldn’t get hold of an extension Rob Miller had made for Firefox that included extra buttons to go with the new colour scheme. So, I took the original CSS, made some new buttons, hosted them and made the new code available so people could have the new theme complete with matching buttons.

After that, I thought that a lot of the old vBulletin icons didn’t really fit in with the grey theme. I took some of the silk icons from FamFamFam, made by Mark James, and started to add them into the theme. I also started to modify some of the default vBulletin icons, changing their colour so that they would fit in with the new grey theme.

A few revisions later and there was a much better looking vBulletin theme for OcUK. That was until another user pointed out that the method I was using to hide the old images/icons wasn’t working very well within Opera. That was simply rectified by adding vertical padding as well as the horizontal padding to each hidden image/icon. That still left one pixel of the original images and icons, but it was a big improvement.

A further revision was made after another member, Augmented, suggested the use of base64 to store the small icon files within the CSS file. Making the new theme far more portable, while also saving me the need to host the images for everyone. Along with a few more changes to make the drop down menus in the reply box readable, a tentative final version was released.

If you use either Firefox or Opera and want to modify the default theme for OcUK, then you will need the Grey Theme CSS file.

Firefox Users

  1. Download and install Stylish extension then restart Firefox
  2. Open Stylish by clicking the small icon in the bottom right corner of Firefox
  3. Go to “Manage Styles”
  4. Choose “Write”
  5. Give the new style a name, I used OcUK Grey Icons
  6. Paste the contents of the Grey Theme CSS file into the main text area
  7. Click save. Your changes should appear immediately

Opera Users

  1. You need to save the Grey Theme CSS file somewhere on your computer
  2. Open the CSS file and remove the first and last lines;
    @-moz-document domain( {
  3. Go to the website you’re applying the style to in Opera
  4. Right click on the page and choose “Edit Site Preferences”
  5. Go to the “display” tab
  6. From the “My style sheet” box, use the “choose” button to browse your hard drive and find the file you just created
  7. Press “ok”. Your changes should appear immediately

That’s it. It enjoy it to your hearts content.