Styling Web Pages, an Introduction

Most web pages use something called cascading style sheets (CSS) to control the way the page looks (the colours, the positioning, the fonts used and so on). Normally the web page author has complete control over how the page looks; Opera however has a very powerful mechanism (UserCSS) for changing the styling on any page — it allows layering your styles onto the page, or replacing the authors styles completely. Thus if you prefer only your paragraph font size to be larger for all pages, then Opera allows you to do this. You can toggle such user styles on and off too. This means you can start to take control of the way you view information on the web.

One problem with this was being able to specify changes to parts of just one web site. With the release of Opera 8 this situation has improved. Using user javascript (UserJS), we can rewrite each page to include a signature; a unique identifier that then allows our styles to have ultimate control. As an exercise, we will restyle the Google search page.

Setting up the User Javascript

To start with, we need to install our user javascript (you don't need to understand how this works) that adds a unique signature to each page. The javascript code is shown below (many thanks to Moose and Tarquin who wrote the code):

// ==UserScript==
// @exclude http://mail.google.com
// ==/UserScript==
function myRootSignature() {
 var d=document.documentElement;	
 var locHost = location.hostname.replace(/^www\./g,'').replace(/\./g,' ');//replaces dots with space	
 locHost = locHost.replace(/[^\w- ]/g,'');//removes IDN characters	
 locHost = locHost.replace(/\b(\d)/g,'_$1');//prepends leading numbers with underscore
 d.className = (d.className?(d.className+' '):'') + 'mycss' + ' ' + locHost;
 //alert(document.documentElement.className);
}
var myDoneNums = 0;
var myCheckNode = setInterval('myDoneNums++;if(document.documentElement){clearInterval(myCheckNode);myRootSignature();}else if(myDoneNums>6){clearInterval(myCheckNode);document.addEventListener("load",myRootSignature,false);}',200);

To install this in a fresh install of Opera 8 we need to do the following:

Create a directory somewhere to store our user javascripts. Making a scripts directory in your Opera profile directory is probably most sensible (use Help » About opera to find where your profile (Opera) directory is).
Download the javascript file: rootsig.js and save it in the directory you just created.
Go to Preferences » Advanced » Content » Javascript options » My javascript files and choose the directory you created.

To test that this is working, you can edit the rootsig.js file and remove the comment in front of the alert line:

//alert(document.documentElement.className);

into

alert(document.documentElement.className);

Now if we load up a page, we should see an alert box showing us the signature for the page (once we have confirmed the script is working, we can add back the // to that line, otherwise we will get annoying alerts on every page we visit!)

Adding a User stylesheet

The next part requires us to install a user CSS file, and this file will be able to hook into the signature our pages now have.

Download this css file: mystyles.css and save in the styles subfolder of your usersettings folder. If the folder doesn't exist, create it.
Restart Opera.
Now follow this animation to see how to activate the CSS:

Show me the action...

A note on the CSS

As you may notice, the script adds the domain name seperated by spaces as CSS classes to the HTML element of each web page. So if we vist google.com the assigned classes become mycss google com; and if we visit gmail.google.com they become mycss gmail google com. Therefore we can use the following syntax to target the pages specifically:

html.mycss.google {background-color: red !important; padding: 50px;}
html.mycss.google body {background-color: yellow !important;}

html.mycss.gmail.google {background-color: green !important; padding: 50px;}
html.mycss.gmail.google body {background-color: blue !important;}

This will make the background of google.com red/yellow, but gmail.google.com will go green/blue.

comment6, <a href= www.atfreeforum.com/freeamateursext > try amateur casero de foto gratis sexo </a>, [url=www.atfreeforum.com/freeamateursext]try amateur casero de foto gratis sexo[/url], www.atfreeforum.com/freeamateursext try amateur casero de foto gratis sexo, pip, <a href= www.phpbber.com/phpbb/adultamateurcou.html > try amateur sex video clip </a>, [url=www.phpbber.com/phpbb/adultamateurcou.html]try amateur sex video clip[/url], www.phpbber.com/phpbb/adultamateurcou.html try amateur sex video clip, >:DDD, <a href= www.setbb.com/amateursexphoto > try amateur sexy models.com </a>, [url=www.setbb.com/amateursexphoto]try amateur sexy models.com[/url], www.setbb.com/amateursexphoto try amateur sexy models.com, >:-P, <a href= www.makephpbb.com/phpbb/amateurhomemade.html > free amateur home sex pic </a>, [url=www.makephpbb.com/phpbb/amateurhomemade.html]free amateur home sex pic[/url], www.makephpbb.com/phpbb/amateurhomemade.html free amateur home sex pic, 539, <a href= www.freeyabb.com/phpbb/amateurgangbang.html > free amateur british movie sex </a>, [url=www.freeyabb.com/phpbb/amateurgangbang.html]free amateur british movie sex[/url], www.freeyabb.com/phpbb/amateurgangbang.html free amateur british movie sex, cuo, <a href= s8.createphpbb.com/amateurrealsexs > try amateur sex photo gallery </a>, [url=s8.createphpbb.com/amateurrealsexs]try amateur sex photo gallery[/url], s8.createphpbb.com/amateurrealsexs try amateur sex photo gallery, :-((, <a href= www.makephpbb.com/phpbb/amateurmatchsex.html > try amateur fuck sexy </a>, [url=www.makephpbb.com/phpbb/amateurmatchsex.html]try amateur fuck sexy[/url], www.makephpbb.com/phpbb/amateurmatchsex.html try amateur fuck sexy, 1094,

205.178.184.113 (2008-08-05 20:57:27)

uIHWFe It`s really useful! Looking through the Internet you can mostly observe watered down information, something like bla bla bla, but not here to my deep surprise. It makes me happy..!!

193.105.210.170 (2012-02-10 23:09:42)

An impressive share, I just given this onto a colealgue who was doing a little analysis on this. And he in fact bought me breakfast because I found it for him smile. So let me reword that: Thnx for the treat! But yeah Thnkx for spending the time to discuss this, I feel strongly about it and love reading more on this topic. If possible, as you become expertise, would you mind updating your blog with more details? It is highly helpful for me. Big thumb up for this blog post!

184.169.141.213 (2012-07-10 09:06:28)

Opera Browser Wiki : StylingWebPages

Page Information

Search

Styling Web Pages, an Introduction

Setting up the User Javascript

Adding a User stylesheet

A note on the CSS

Further Reading

Categories

Backlinks

Comments [Hide comments/form]