Modifying OcUK

robmiller

robmiller

robmiller

Soldato
Joined
26 Dec 2003
Posts
16,522
Location
London
Just before Christmas, I posted some CSS that Firefox users could insert into their userContent.css file in order to change the forums' colour scheme to something they preferred.

Here's some example CSS that I use to turn the forums a dark grey colour:

Code: 
@-moz-document domain(forums.overclockers.co.uk) {
	/* 
	** OcUK colour scheme changer 
	** By Rob Miller
	*/
	* { color:#fff !important; }
	textarea, input, body, .page, .thead, .tfoot, .alt2, .alt2Active, .panel { background:#222 !important; }
	.alt1, .alt1Active, .panelsurround, .vbmenu_option { background:#333 !important; }
	.vbmenu_control, .vbmenu_hilite, .tcat { background-color: #444 !important; }
	.vbmenu_popup { border: 1px solid #ccc !important; }
}

You'll see I colour all the text white, give most things - including form inputs - a dark background of #222, give a few select elements a lighter background of #333, and give some headings an even lighter background of #444.

(To make these changes yourself, browse to your profile folder and open the userContent.css file in the chrome folder. Edit it, and paste the above code anywhere.)

Now the problem lies in the fact that the forums' images, particularly the buttons, are an ugly blue colour which hardly fits well with our brand spanking new colour scheme. So, if you'd like to replace the icons, simply install this extension that I wrote, et voila :)

Here's a quick screenshot of what my setup looks like:

ocuk-modified.png


If anyone else has any other customisations they've made to the forums, post them here!

Also, AFAIK these changes will work with absolutely any vBulletin forum, so simply add more domains to the include section of the Greasemonkey user script and to the CSS domain matcher to have them appear on other sites.
 
Last edited:
You just need to change the colours. It's even shorter if you want to make everything the same background color/text colour.

Anyway, here's your all-white background, all-black text:

Code: 
@-moz-document domain(forums.overclockers.co.uk) {
	/* 
	** OcUK colour scheme changer 
	** By Rob Miller
	*/
	* { color:#000 !important; background:#fff !important; }
}
 
I cannot get the images to work. I have: var base = "file://C:\buttons\";

Is this right?

Thanks,

sfx
 
Weird, it doesn't seem to like local URLs. I presumed they'd work fine, since they're totally valid as src attributes of images.

You should have typed it as

Code: 
var base = "file:///C:/buttons/";

or

Code: 
var base = "file:///C:\\buttons\\";

...but even when typed properly it doesn't seem to want to work. How strange.
 
robmiller said:
Weird, it doesn't seem to like local URLs. I presumed they'd work fine, since they're totally valid as src attributes of images.

You should have typed it as

Code: 
var base = "file:///C:/buttons/";

or

Code: 
var base = "file:///C:\\buttons\\";

...but even when typed properly it doesn't seem to want to work. How strange.
Click to expand...
That does something but it still does not work. If I used either of those paths, no images show at all. Any ideas?

sfx
 
robmiller said:
Yeah, that's what I get too. Really strange, I can't think of any reason why it would happen :(
Click to expand...
No worries rob, I have uploaded the images to my web server and it is working a treat. :)

I will have a play about with local image support to see if I can get it working, as you say there is no reason why it should not work.

Thanks,

sfx
 
Another little modification, although it'll be of little use unless everyone uses it. This one simply makes the background colour of PHP code white, so that the syntax highlighting shows up:

ocuk-modified4.png


Make sure you've got Greasemonkey installed, then right click this link and choose "Install User Script".
 
I don't think you need Greasemonkey to change the images - I managed to change the OcUK logo in the top left corner to the Google one purely in CSS before I formatted, using something like this:

Code: 
img[src$="vBulletin_logo7.gif"] { background-image: url('http://www.google.co.uk/intl/en_uk/images/logo.gif'); width: 0px; height: 110px; overflow: hidden; padding-left: 276px; }

Obviously that's a bit of a fiddly way of doing it but for a fixed and smallish set of images (e.g. the buttons) it should be relatively straightforward to do. It's how I did it anyway :)

arty
 
arty said:
I don't think you need Greasemonkey to change the images - I managed to change the OcUK logo in the top left corner to the Google one purely in CSS before I formatted, using something like this:

Code: 
img[src$="vBulletin_logo7.gif"] { background-image: url('http://www.google.co.uk/intl/en_uk/images/logo.gif'); width: 0px; height: 110px; overflow: hidden; padding-left: 276px; }

Obviously that's a bit of a fiddly way of doing it but for a fixed and smallish set of images (e.g. the buttons) it should be relatively straightforward to do. It's how I did it anyway :)

arty
Click to expand...


Yep, that works, but I just thought it was a bit clunky since you have to manually specify each and every image. Neat little trick with the padding, though :)
 
You must log in or register to reply here.
Back
Top Bottom