Modifying OcUK

robmiller · 14 Jan 2007 at 02:22

Dunno how Opera's custom CSS works, but you'd just find out how to load a custom stylesheet and put this code in it:

Code:

/*
** OcUK colour scheme changer 
** By Rob Miller
*/
* { color:#000 !important; }
textarea, input { background:#ddd !important; }
body, .page, .thead, .tfoot, .alt2, .alt2Active, .panel { background-color: #fff !important; }
.alt1, .alt1Active, .panelsurround, .vbmenu_option { background-color: #fff !important; }
.alt2 { background:#dfdfdf !important; }
.vbmenu_control, .vbmenu_control *, .vbmenu_hilite, .vbmenu_hilite *, .tcat, .tcat * { background-color: #006598 !important; color:#fff !important; }
.vbmenu_popup { border: 1px solid #ccc !important; }

Not sure if it lets you limit the CSS to certain domains or what-have-you.

Edit: It tells you how to do site-specific user CSS here:

http://operawiki.info/OperaUserCSS

georges · 14 Jan 2007 at 11:19

Awesome, that's brilliant.

Thanks a lot

Messiah Khan · 14 Jan 2007 at 12:17

Wow, how easy is it to do in Opera.

Great work robmiller.

Messiah Khan · 14 Jan 2007 at 12:31

Right, ive stolen your grey colour theme at the start of this thread rob. It looks great, but I don't seem to get a mouse over effect on links. Im also trying to include;
http://pwnt.co.uk/uploads/files/1/main.js
in the same css file. Where would I nest this in the file? I tried adding it at the end, but it doesn't seem to work. Im using Opera 9.01 btw.

Edit; and the Trust, Quote and Post etc buttons are still appearing as the origional blue. How do I go about changing this?

Augmented · 14 Jan 2007 at 12:57

messiah khan said:
Im also trying to include;
http://pwnt.co.uk/uploads/files/1/main.js
in the same css file. Where would I nest this in the file? I tried adding it at the end, but it doesn't seem to work. Im using Opera 9.01 btw.

You can't do that in CSS. Looks like you need to use Opera's UserJS feature.

Edit; and the Trust, Quote and Post etc buttons are still appearing as the origional blue. How do I go about changing this?

This is because they are referenced in main.js via chrome:// URIs - which are Firefox's way of organising browser UI content, and I'm not sure Opera's got an equivalent. To switch the graphics you'll need to change the following line:

Code:

item.src = item.src.replace("http://forums.overclockers.co.uk/images/buttons/", "[COLOR=Yellow]chrome://ocuk/content/[/COLOR]").replace(".gif", ".png");

replacing the highlighted part to point to wherever you're storing the graphics e.g. you could upload the graphics somewhere and change the chrome:// url to point to them - http://www.foo.com/ocuk/).

Messiah Khan · 14 Jan 2007 at 13:15

Cheers Aug. Does the graphics location have to be online, or can i simply point it at a folder?

Edit; If i need a folder full of javascripts, do i simply copy the code into a wordpad document and rename the extension? If so, what is the extension I need?

joeyjojo · 14 Jan 2007 at 13:54

khan how have you got the colours working? "Site preferences" method or "user mode" method? I can't get it working with site preferences which is a bit annoying.

Messiah Khan · 14 Jan 2007 at 14:18

joeyjojo said:
khan how have you got the colours working? "Site preferences" method or "user mode" method? I can't get it working with site preferences which is a bit annoying.

I used the site preferences method. I simply made a wordapd document, copied and pasted robmillers css code into it, renamed the file to .css then selected it in the site preferences and hit F5.

joeyjojo · 14 Jan 2007 at 14:57

messiah khan said:
I used the site preferences method. I simply made a wordapd document, copied and pasted robmillers css code into it, renamed the file to .css then selected it in the site preferences and hit F5.

Not working, tried everything :/ Think I've fiddled with it too much and broken it

Edit working now :confused:

joeyjojo · 14 Jan 2007 at 15:33

Strangely it's the @-moz-document domain(forums.overclockers.co.uk) { ... } which kills it.

Got a tasty lime green sorta thing happening now

Code:

	* { color:#000 !important; }
	textarea, input, body, .page, .thead, .tfoot, .alt2Active, .panel { background:#fff !important; }
	.alt1, .alt1Active, .panelsurround, .vbmenu_option { background:#f1fbdd !important; }
	.vbmenu_control, .vbmenu_hilite, .tcat { background-color: #bcec47 !important; }
	.vbmenu_popup { border: 1px solid #ccc !important; }
	.alt2 { background-color: #bcec47 !important; }
	select, option { background:#f1fbdd !important; }
	a:hover, strong:hover { color:#f6b14e !important; }

Messiah Khan · 14 Jan 2007 at 16:09

Eugh, joeyjojo mate.. thats far to bright.

How about a nice gentle brown, to match the new Area04 theme;

Code:

/* 
	** OcUK colour scheme changer 
	** By Rob Miller
	*/
	* { color:#000000 !important; }
	textarea, input, body, .page, .thead, .tfoot, .alt2, .alt2Active, .panel { background:#776539 !important; }
	.alt1, .alt1Active, .panelsurround, .vbmenu_option { background:#8c7746 !important; }
	.vbmenu_control, .vbmenu_hilite, .tcat { background-color: #61542d !important; }
	.vbmenu_popup { border: 1px solid #ff228a !important; }
}

Is there a way to recolour the black dividing lines?

joeyjojo · 14 Jan 2007 at 17:04

Eugh, nasty poo brown

I've got the thing sorted now.
Preferences > advanced > content > style options - points to user.css which doesn't exist
Right click > edit site preferences > display - points to user/ocuk.css

So now I click the author/user mode toggle to change colours instantly.

You can mess with some of the borders by doing this sort of thing

Code:

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

Most of the stuff isn't classed though so you have to refer to it relative to another class, eg .tborder tr td for cells inside rows inside .tborder.

Augmented · 14 Jan 2007 at 17:26

Don't forget that both Opera and Firefox have excellent selector support, so you can go crazy with attribute, sibling and child selectors etc. without having to worry about the lack of classes or IDs to hook onto.

Like this:

Code:

div[id*="postmenu"] > a[href="member.php?u=149"]:after {
  content: ' is the best!' !important;
  font-size: 150% !important;
  color: magenta !important;
  font-weight: bold !important;
}

joeyjojo · 14 Jan 2007 at 17:28

Didn't realise you could do most of the things in there. Excellent. Must add to my css skillz

Love the pink, very manly

georges · 14 Jan 2007 at 20:50

I'll recommend the "stylish" extension from the firefox site mentioned earlier. Lets you instantly change and preview changes by rightclicking in the status bar the icon, with saved css being on a list for that site or global ones.

Messiah Khan · 15 Jan 2007 at 09:29

Augmented said:
Don't forget that both Opera and Firefox have excellent selector support, so you can go crazy with attribute, sibling and child selectors etc. without having to worry about the lack of classes or IDs to hook onto.

Like this:

Code:

div[id*="postmenu"] > a[href="member.php?u=149"]:after { content: ' is the best!' !important; font-size: 150% !important; color: magenta !important; font-weight: bold !important; }

Where does all that fit into Opera then? Any chance you could give me an idiots guide to fitting it in please.

robmiller · 15 Jan 2007 at 09:47

georges said:
I'll recommend the "stylish" extension from the firefox site mentioned earlier. Lets you instantly change and preview changes by rightclicking in the status bar the icon, with saved css being on a list for that site or global ones.

Neat. Do changes persist or are they just for a single pageview, á la Firefox's built-in style switcher?

Augmented · 15 Jan 2007 at 10:00

messiah khan said:
Where does all that fit into Opera then? Any chance you could give me an idiots guide to fitting it in please.

Well that's just an example of another CSS rule you could use, and would be placed in the same place as the other CSS code you're using for the site i.e. rob's OcUK code above. I wouldn't bother using that particular rule unless you really want ' is the best!' appearing after my username in large, bright-pink letters on every page

.

I just wanted to point out the freedom to do complex things with CSS in Firefox and Opera (no need to support IE). Here's one I've done for del.icio.us that I call 'Web 2 Point Faux':

Lots more @ userstyles.org.

You might like to have a look at writing CSS if you're not familiar with it (http://www.htmldog.com/guides/cssbeginner/ for example).

robmiller said:
Neat. Do changes persist or are they just for a single pageview, á la Firefox's built-in style switcher?

Persist. It's just a nice, live wrapper for usercontent.css. Anything you can do with @-moz-document works - so current URI, domain, subdomain etc. Very handy. (/edit - n.b. doesn't actually modify usercontent.css, uses stylish.rdf in the profile folder).

robmiller · 15 Jan 2007 at 10:27

Augmented said:
Persist. It's just a nice, live wrapper for usercontent.css. Anything you can do with @-moz-document works - so current URI, domain, subdomain etc. Very handy. (/edit - n.b. doesn't actually modify usercontent.css, uses stylish.rdf in the profile folder).

Neateroonosity.

georges · 15 Jan 2007 at 17:29

robmiller said:
Neat. Do changes persist or are they just for a single pageview, á la Firefox's built-in style switcher?

They carry on, eg:

PHP:

@-moz-document domain(forums.overclockers.co.uk) {
	/*
	** OcUK colour scheme changer 
	** By Rob Miller
	*/
	* { color:#000 !important; }
	textarea, input { background:#ddd !important; }
	body, .page, .thead, .tfoot, .alt2, .alt2Active, .panel { background-color: #fff !important; }
	.alt1, .alt1Active, .panelsurround, .vbmenu_option { background-color: #fff !important; }
...
..etc

In one of the custom styles, when activated once will work for every single page on forums.overclockers.co.uk,e very time you load it