Modifying OcUK

MarcLister · 21 Aug 2007 at 13:56

K. Any idea what the problem is? I could see if I can work out anything here.

Mr_L · 21 Aug 2007 at 14:41

I've got a bit of a solution, although, it's not perfect. Instead of a lot of the old OcUK images popping through, there is now only one pixel. I guess it depends if you're willing to live with it.

Opera users, use the following code:

Code:

	/* 
	** 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; }
	/*
	* The images and icons follow. Modify the URL of each one if you wish to host it yourself.
	*/
	img[src$="vBulletin_logo7.gif"] { background: url('http://ceefourbee.co.uk/ocuk-buttons/header.png'); width: 0; height: 0; overflow: hidden; padding: 84px 0 0 240px;}
	img[src$="rating_1.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/rating_1.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 12px 0 0 60px;}
	img[src$="rating_2.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/rating_2.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 12px 0 0 60px;}
	img[src$="rating_3.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/rating_3.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 12px 0 0 60px;}
	img[src$="rating_4.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/rating_4.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 12px 0 0 60px;}
	img[src$="rating_5.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/rating_5.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 12px 0 0 60px;}
	img[src$="forum_new.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/new-posts.png')  no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
	img[src$="forum_old.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/old-posts.png')  no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
	img[src$="forum_old_lock.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/old-posts-locked.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
	img[src$="user_offline.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/user-offline.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
	img[src$="user_online.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/user-online.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
	img[src$="multipage.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/multipage.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
	img[src$="sticky.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/sticky.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
	img[src$="lastpost.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/last-post.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
	img[src$="firstnew.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/collapsed.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
	img[src$="menu_open.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/collapsed.png') no-repeat bottom; width: 0; height: 0; overflow: hidden; padding-left: 16px; margin-top: 3px; padding-top: 16px;}
	img[src$="collapse_thead_collapsed.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/collapsed.png') no-repeat; width: 0; height: 0; overflow: hidden; padding-left: 16px;padding-top: 16px;}
	img[src$="collapse_tcat_collapsed.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/collapsed.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
	img[src$="collapse_thead.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/collapse.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
	img[src$="collapse_tcat.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/collapse.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
	img[src$="edit.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/edit-post.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 67px;}
	img[src$="quote.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/quote-post.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 67px;}
	img[src$="trust.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/users-trust.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 67px;}
	img[src$="reply.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/reply-to-post.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 19px 0 0 99px;}
	img[src$="newthread.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/start-new-thread.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 19px 0 0 99px;}

And follow these instructions:

Applying the Stylesheets

Create a your CSS file with the changes you want to apply to the site. Save it somewhere on your computer and name it with the title of the site and a .css extension. You'll probably want to create a special folder on your hard drive for all your user stylesheets.

Go to the site you're applying the style to in Opera

Right click on the page or press F12 and choose "Edit Site Preferences"

Go to the "display" tab

From the "My style sheet" box, use the "choose" button to browse you hard drive and find the file you just created.

Press "ok". Your changes should appear immediately

MarcLister · 21 Aug 2007 at 14:47

That looks a lot better thanks. Can hardly notice the pixel really.

Any idea why the images for the buttons sometimes don't load for me? They are on my website. I have to refresh and they load up 2nd time round.

Mr_L · 21 Aug 2007 at 14:53

Doesn't happen to me in Firefox or Opera. They should be cashed, so that might be your problem.

Have you got the latest version of Opera?

Mr_L · 21 Aug 2007 at 16:51

**Current version now in post #139.**

I think this will be the final version. Unless someone asks nicely and can persuade me to change some other icons.

Works with both Firefox and Opera. See post #122 for instructions for Opera. You *MUST* use the code from this post if you want the final version.

List of changes:

OcUK Header
Menu open icons, collapse/collapsed forum icons, go to first new post icon, go to last new post icon and assort thread order icon
Sticky, rating and multi-page thread icons
Thread status icons
Forum status icons
Start new thread and reply to post buttons
Trust, edit and quote buttons
User on/offline icons
MSN icon

Preview:

Code:

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; }
    /*
    * The images and icons follow. Modify the URL of each one if you wish to host it yourself.
    */
    img[src$="vBulletin_logo7.gif"] { background: url('http://ceefourbee.co.uk/ocuk-buttons/header.png'); width: 0; height: 0; overflow: hidden; padding: 84px 0 0 240px;}
    img[src$="im_msn.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/msn.png')  no-repeat; width: 0; height: 0; overflow: hidden; padding: 17px 0 0 17px;}
    img[src$="thread_lock_new.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/new-thread-locked.png')  no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
    img[src$="thread_hot_lock.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/hot-thread-locked.png')  no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
    img[src$="thread_dot_hot.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/hot-dot-thread.png')  no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
    img[src$="thread_new.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/thread-new.png')  no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
    img[src$="thread.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/thread.png')  no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
    img[src$="thread_lock.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/thread-locked.png')  no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
    img[src$="thread_hot.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/hot-thread.png')  no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
    img[src$="thread_dot.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/thread-dot.png')  no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
    img[src$="rating_1.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/rating_1.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 12px 0 0 60px;}
    img[src$="rating_2.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/rating_2.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 12px 0 0 60px;}
    img[src$="rating_3.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/rating_3.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 12px 0 0 60px;}
    img[src$="rating_4.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/rating_4.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 12px 0 0 60px;}
    img[src$="rating_5.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/rating_5.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 12px 0 0 60px;}
    img[src$="forum_new.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/new-posts.png')  no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
    img[src$="forum_old.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/old-posts.png')  no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
    img[src$="forum_old_lock.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/old-posts-locked.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
    img[src$="user_offline.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/user-offline.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
    img[src$="user_online.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/user-online.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
    img[src$="multipage.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/multipage.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
    img[src$="sticky.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/sticky.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
    img[src$="lastpost.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/last-post.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
    img[src$="firstnew.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/collapsed.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
    img[src$="menu_open.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/collapsed.png') no-repeat bottom; width: 0; height: 0; overflow: hidden; padding-left: 16px; margin-top: 3px; padding-top: 16px;}
    img[src$="sortasc.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/collapsed.png') no-repeat bottom; width: 0; height: 0; overflow: hidden; padding-left: 16px; padding-top: 16px;}
    img[src$="sortdesc.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/collapse.png') no-repeat; width: 0; height: 0; overflow: hidden; padding-left: 16px;padding-top: 16px;}
    img[src$="collapse_thead_collapsed.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/collapsed.png') no-repeat; width: 0; height: 0; overflow: hidden; padding-left: 16px;padding-top: 16px;}
    img[src$="collapse_tcat_collapsed.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/collapsed.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
    img[src$="collapse_thead.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/collapse.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
    img[src$="collapse_tcat.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/collapse.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}
    img[src$="edit.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/edit-post.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 67px;}
    img[src$="quote.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/quote-post.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 67px;}
    img[src$="trust.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/users-trust.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 67px;}
    img[src$="reply.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/reply-to-post.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 19px 0 0 99px;}
    img[src$="newthread.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/start-new-thread.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 19px 0 0 99px;}
}

And again, just copy and paste into userContent.css, which should be okay now that I've disabled hot linking on the OcUK forum domain. But if you'd like to save me some bandwidth, you can download the images and host them yourself (right click, save link as). You'll obviously have to modify the URLs for all 36 images/icons in the above code so that it points to yours.

Just change the highlighted parts if you host it yourself:

Code:

img[src$="vBulletin_logo7.gif"] { background: url('http://[B]yourdoman.tld[/B]/ocuk-buttons/header.png'); width: 0; height: 0; overflow: hidden; padding: 84px 0 0 240px;}
img[src$="im_msn.gif"]{background: url('http://[B]yourdoman.tld[/B]/ocuk-buttons/msn.png')  no-repeat; width: 0; height: 0; overflow: hidden; padding: 17px 0 0 17px;}
img[src$="thread_lock_new.gif"]{background: url('http://[B]yourdoman.tld[/B]/ocuk-buttons/new-thread-locked.png')  no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 16px;}

And so on...

MarcLister · 21 Aug 2007 at 17:38

Lovely job. I still get the spare pixel on some parts of the page.

The buttons seem to be cached OK now. Did you update the buttons in your last post?

GeForce · 21 Aug 2007 at 18:00

Awesome

Thanks again mate

Mr_L · 21 Aug 2007 at 19:35

MarcLister said:
The buttons seem to be cached OK now. Did you update the buttons in your last post?

I haven't changed them since last night.

Mr_L · 24 Aug 2007 at 21:31

I just spotted this, and I can't be having that!

So I've done another button to replace it. You only need to insert an extra line of code into what you already have.

Code:

img[src$="threadclosed.gif"]{background: url('http://ceefourbee.co.uk/ocuk-buttons/thread-closed.png') no-repeat; width: 0; height: 0; overflow: hidden; padding: 19px 0 0 99px;}

I've put the extra button in the rar, too.

Augmented · 24 Aug 2007 at 22:26

Looks great Mr_L, like it.

For extra portability, and to save bandwidth, you can base64 the small icon files and put them straight in the stylesheet instead of having to host them somewhere. Have changed the css appropriately, and it's in a text file over here (too many chars to post).

Mr_L · 24 Aug 2007 at 22:33

Very cool, Augmented. :cool:

I've not seen base64 before, it looks very interesting.

Augmented · 24 Aug 2007 at 22:41

Mr_L said:
I've not seen base64 before, it looks very interesting.

Yeah. It's handy for little icons and the like as it can potentially save a load of extra HTTP requests for only a marginal increase in CSS filesize.
Though, as a general rule, I don't personally use it in the wild, just for user-CSS etc. to make it less of a hassle to share around.

Mr_L · 25 Aug 2007 at 14:18

Another little change because of the forum update. It just replaces the following icon for viewing a quoted post:

Just copy and paste the contents of this text file into the userContent file. Alternatively, if you're using Stylish extension for Firefox, just copy and paste it into that.

MarcLister · 25 Aug 2007 at 14:20

Cheers for the update Mr_L. Award winning stuff this.

marc2003 · 25 Aug 2007 at 19:23

good work. you can also set the username to use a bold font - a common complaint about the new style - the classname is .bigusername - also changing the font so it isn't white = win.

any ideas what's causing the odd "quote post" button in the editor?

edit: i think i've fixed this. change

Code:

img[src$="quote.gif"]{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAQAgMAAAAwviq5AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAMUExURQAAAP/+/hUVFTMzM1NMD7kAAAAEdFJOU////wBAKqn0AAAAeElEQVQYlWP4jwb+MFBN5B93tx53wwb9H9wP9jEd2A8U+REk4BEkyur/MeioToioPVDkI4uAI0tLiz6IZmrZDxM5chSoRsAj+Mh/uMgR/Y/cAh4sYJEfQP1BIDX2rYpBYJF/LA/2cT96oP9j/4Md3I/A7nlEDV8AALVI1raprzKCAAAAAElFTkSuQmCC') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 67px;}

to

Code:

img[src$="images/buttons/quote.gif"]{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAQAgMAAAAwviq5AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAMUExURQAAAP/+/hUVFTMzM1NMD7kAAAAEdFJOU////wBAKqn0AAAAeElEQVQYlWP4jwb+MFBN5B93tx53wwb9H9wP9jEd2A8U+REk4BEkyur/MeioToioPVDkI4uAI0tLiz6IZmrZDxM5chSoRsAj+Mh/uMgR/Y/cAh4sYJEfQP1BIDX2rYpBYJF/LA/2cT96oP9j/4Md3I/A7nlEDV8AALVI1raprzKCAAAAAElFTkSuQmCC') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 67px;}

Richard Slater · 25 Aug 2007 at 20:50

To make the username bold add the following text in a line on its own below:

Code:

.vbmenu_popup { border: 1px solid #ccc !important; }

Code:

.bigusername { font-weight: bold !important; }

To fix the post icon in the editor, search for "quote.gif" and replace with "buttons/quote.gif" so the line would read:

Code:

img[src$="buttons/quote.gif"]{background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAAQAgMAAAAwviq5AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAMUExURQAAAP/+/hUVFTMzM1NMD7kAAAAEdFJOU////wBAKqn0AAAAeElEQVQYlWP4jwb+MFBN5B93tx53wwb9H9wP9jEd2A8U+REk4BEkyur/MeioToioPVDkI4uAI0tLiz6IZmrZDxM5chSoRsAj+Mh/uMgR/Y/cAh4sYJEfQP1BIDX2rYpBYJF/LA/2cT96oP9j/4Md3I/A7nlEDV8AALVI1raprzKCAAAAAElFTkSuQmCC') no-repeat; width: 0; height: 0; overflow: hidden; padding: 16px 0 0 67px;}

To change the colour of the white text change the line:

Code:

	* { color:#fff !important;}

to

Code:

	* { color:#[B]RRGGBB[/B] !important;}

where RRGGBB is a colour code that you can generate from here

MTA99 · 25 Aug 2007 at 21:49

Superb work gentlemen!! Loving the redesign of the redesign of the redesign

marc2003 · 26 Aug 2007 at 08:42

Richard Slater said:
<snip>

hehe, i'd already sorted out the editor button problem just before you posted - you didn't see it in time.

and it looks like we need a new button for quick reply. it currently uses the normal button for reply but it's a bit wonky.

Mr_L · 26 Aug 2007 at 11:18

**Current version of OcUK Grey with Icons**

Nice work guys. I've done another button for the return of the quick reply:

I've also fixed the font/background colours for the drop down menu's in the reply box:

All available in the super-duper text file.

MarcLister · 26 Aug 2007 at 11:22

Lovely thanks!