Skip navigation.

Opera User Style Sheets & Customizations

Inserted & Deleted Text

Explanation

Here is some CSS to help you find inserted and deleted text by highlighting it. Generally speaking, you shouldn't need it, because the context should be obvious enough, but just incase the author decided to hide it, it should come in handy.

del{border:solid red 1px;background-color:#ffcccc}
ins{border:solid green 1px;background-color:#ccffcc}

Sample Text

What is mine is mine and what is yours is yours mine.

computertext.css

Copyright Eugene TS Wong 2004

Have you ever browsed computer documentation, & found it hard to find the parts that tell you what to type? Did you ever have trouble finding certain portions of computer code? I've had times where I knew what I was looking for, but couldn't use search tools because I couldn't remember the exact spelling of a chunk of text.

With this user style sheet, you should be able to do it a little more easily.

var{ /* instance of a variable or program arguement */
background:#eeeeee;
color:#0000ff;
}

code{ /* a fragment of computer code */
background:#eeeeee;
color:#000000;
}

kbd{ /* text to be entered by user with the keyboard */
background:#000000;
color:#00ff00;
}

samp{ /* a sample of output from programs, scripts, etc. */
background:#777777;
color:#ffff00;
}

All I did was change the background of the text & the colour of the lettering, so it should work in most browsers.

There should be a link on the right side of this journal that takes you to a tutorial on how to use user style sheets.

If you have any questions, then don't hesitate to ask.

Next Journal Entry: using CSS to customize tables.

headersblink.css

Copyright Eugene TS Wong 2004

In the last journal entry, I showed you how to customize slashdot.org a bit <http://my.opera.com/eugenetswong/journal/1>. Today we move on to being a bit more practical by showing you how to make it easier to skim through the headers of a document.

I personally recommend that people use blinking to highlight the headers. Blinking attracts attention. This is why companies like to make blinking images. So, without further ado, here is the code.

h1,h2,h3,h4,h5,h6{text-decoration:blink}

It's a little simpler than I origninally anticipated. Before I came up with the blinking idea, I used style sheets to remove all text except the header text. I thought that this would allow me to make a good outline, & it did for the documents that I wrote, but the problem is that other documents use HTML in a different way. As a result, this wasn't very useful.

In the next journal entry, I'll show you some styles that will help you read computer documentation more easily. This is important for computer people, & especially those who write documentation. Too often I see people writing without using proper HTML.

slashdot.css

Copyright Eugene TS Wong 2004

Update: I added 1 more line to the code to remove the grey images which represent neutral.

To get us started, here is a style sheet that will remove those annoying images [ie: "friend of a friend" & "foe of a friend"] on slashdot.org. It also gets rid of the main title logo & the right hand column, which always seems to contain useless information. If you have any questions, don't hesitate to ask.

[width|="230"],
img[src|="http://images.slashdot.org/title.gif"],
img[src|="http://images.slashdot.org/slc.gif"],
img[src|="http://images.slashdot.org/neutral.gif"],
img[src|="http://images.slashdot.org/fof.gif"],
img[src|="http://images.slashdot.org/eof.gif"] {
display:none
}

In future journal entries, I'd like to share user style sheets that help us to:

* skim through a page & find the headers
* read computer documentation more easily
December 2009
S M T W T F S
November 2009January 2010
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31