Modifying OcUK

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:
Soldato
OP
Joined
26 Dec 2003
Posts
16,522
Location
London
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; }
}
 

sfx

sfx

Associate
Joined
13 Dec 2004
Posts
926
I cannot get the images to work. I have: var base = "file://C:\buttons\";

Is this right?

Thanks,

sfx
 
Soldato
OP
Joined
26 Dec 2003
Posts
16,522
Location
London
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.
 

sfx

sfx

Associate
Joined
13 Dec 2004
Posts
926
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.
That does something but it still does not work. If I used either of those paths, no images show at all. Any ideas?

sfx
 

sfx

sfx

Associate
Joined
13 Dec 2004
Posts
926
robmiller said:
Yeah, that's what I get too. Really strange, I can't think of any reason why it would happen :(
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
 
Soldato
OP
Joined
26 Dec 2003
Posts
16,522
Location
London
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".
 
Soldato
Joined
18 Oct 2002
Posts
6,751
Location
Cambridge
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
 
Soldato
OP
Joined
26 Dec 2003
Posts
16,522
Location
London
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


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 :)
 
Soldato
Joined
11 May 2004
Posts
4,790
Location
Gloucester
Nice mods, I like the colour scheme and buttons.

One thing I've been working on in greasemonkey is the return of an old friend:

quickreply.png


It's not working quite right yet though.
 
Back
Top Bottom