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:
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.
Further Reading
- moose's user css documentation
- OperaUserCSS - a wiki tutorial about UserCSS.
- CSS Beginners guide — learn how to write and understand CSS for creating your own styles.