twm's homepage logo
From someone who traveled abroad to learn appreciating his own country ...
An Opera User Style Sheet for del.icio.us
Deutsch English
Google
Search dummzeuch.de
Search WWW

Introduction

You might have read about user style sheets in Opera and probably wondered what the heck they are good for. You might even have seen some user style sheets that others have made available for download (AdBlocker.css is one I particularly like). But did you really use one yet? Not? Then this might be for you.

What is a stylesheet?

A style sheet or rather Cascading Style Sheets are a feature of newer html versions and recent web browers for defining the way a web page looks independently from its content. The html file is no longer cluttered with code for setting font styles, colours and other stuff but it contains only the text and some markup code for it. It then refers to a style sheet which contains all the nitty little bits about how to actually display it.

What is a user stylesheet?

Opera (and probably other browsers) lets you define a user style sheet which it uses together with the author's style sheet.

What is del.icio.us?

http://del.icio.us is some kind of bookmarks on steroids. If you don't know it yet, I strongly encourage you to have a go at it. I use it daily and like it very much.

How do I define a user stylesheet?

Opera does not come with a canned user style sheet but as mentioned above there are quite a few available for download which have been made by Opera users. To tell Opera which file to use for the user stylesheet, select it under Tools / Preferences / Advanced / Content / Style optins / My Style Sheet. You also probably want to select "User Mode" as the default mode.

What is it good for?

Lets assume some webpage has a - hm - sub optimal - design. The author might be a fan of yellow text on red background (yes, I have seen that). You on the other hand might find that rather difficult to read. A user style sheet might help you here (let's assume for a moment that the webpage actually has some interesting content, otherwise: Why bother?) Use your favourite text editor to create a text file with the following content:

                      
body {
	background-color:white !important;
	color:black !important;
}
                    

Now select this file as your user stylesheet and load the webpage. It should now display in black on white. Unfortunately this does not only apply to this particular web page but to all of them. So we need some kind of filter to apply it only to a particular page or site. I won't try to present a way that works for any website but only one that works for del.icio.us.

What is wrong with del.icio.us?

One word: Design. I just don't like the look of it. I find it very difficult to work with it because the presentation is rather confusing. If you don't have this problem, you can stop reading. ;-) Unless of course you are interested in what I did from a purely technical point of view.

What did You do about it?

If you haven't guessed yet: I wrote a user style sheet for it. It turns out that del.icio.us makes this very easy by

  • using style sheets themselves for formatting
  • adding an id="delicious" tag to every html page they generate
So there we get a simple way of only changing the pages from them without affecting any other page.

A User Style Sheet for del.icio.us

The following is the user style sheet I use for del.icio.us.

                    
/* del.icio.us starts all its webpages with
   <html id="delicious"> which
   makes it easy to define formats for them only */

html#delicious body {
	background-color:#EEEEEE !important 
}

html#delicious div.banner {
	border-style: solid !important;
	border-width: 0px 0px 1px 0px !important;
	border-color: black !important;
}

html#delicious li.post {
	background-color:#CBD8DE !important; 
	margin: 0px 0px 10px !important;
	padding: 5px 5px 7px 40px !important;
	border-width: 0px 1px 1px 0px !important;
	border-style: solid !important;
	border-color: #6C8B9B !important;
}

html#delicious li.post h3.desc {
	padding: 5px 5px 5px 5px !important;
	font-size:100% !important;
	font-weight:bold !important;
}

html#delicious li.post div.extended {
	padding: 5px 5px 5px 5px !important;
}

html#delicious li.post div.meta a:link {
	color:#000090 !important; 
}

html#delicious li.post div.meta a:visited {
	color:#000060 !important; 
}

html#delicious div.right {
	border-style: solid !important;
	border-width: 1px !important;
	border-left-color: white;
	border-top-color: white;
	border-right-color: black;
	border-bottom-color: black;
	background-color: #DDDDDD !important;
}
                  

If you want to try it, just copy and paste it into a file (e.g. delicious.css) and set that file as user style sheet in Opera. I think with this style sheet del.icio.us is much easier to read. Your mileage may, of course, vary.

What if I already use a user style sheet?

Yes, that's a good question. I myself use four user style sheets:

  • AdBlock.css for blocking all this annoying advertising stuff
  • rss.css for displaying a rss file as webpage (Which unfortunately is not as usefull as it used to be because Opera insists of handing rss files itself.)
  • linksstyle.css which forces all links to be underlined and have a mouse over effect
  • delicious.css which this is all about
But Opera only allows me to specify one file and even worse, it does not allow to use the @import statement to combine them. So what I have done is writing a very complicated shell script which combines those files. And I am even generous enough to share it with you.

Ready for some very sophisticated shell programming?

Here it comes:

                  
#!/bin/sh
rm combined.css
cat *.css > combined.css
                

Now that is some difficult to understand code, isn't it? ;-))

Ok, just for the record:

  • the first line defines that it is a shell script
  • the second line deletes the existing "combined.css" file
  • the third line concatenates all *.css file to a single "combined.css" file

In Opera I specify the "combined.css" file as the user style sheet.

I have put this script into the same directory as the style sheets.

But I am a Windows user!

That's too bad, then this shell script won't work for you. Try something like this as a batch file:

                
del combined.css
copy *.css combined.css
              

(Beware: This is untested!)

Conclusion

I hope you find this information usefull. This is just one of the little things about Opera that I like and that make me prefer it over other browsers.

Links



This document was generated using AFT v5.096

last updated: 2012-10-14 twm
Post to del.icio.us Best Viewed With Open EyesValid XHTML 1.0!