Opera Sticky Notes

A way to add sticky notes to certain websites using JavaScript inside CSS.

15th July 2004 · Last updated: 5th October 2016

I have managed to create a test page that adds a sticky note to a website using CSS. Amazingly, you can add JavaScript to a stylesheet and it'll be parsed! Luckily it works in Opera. You can hence add the code to your user stylesheet so it overrides the styles on a web page.

Here's the standalone demo - the sticky note is not in the HTML, but entirely generated from CSS.

Note how it works: JavaScript creates a new div and adds it to the page. It then adds a unique ID of "note" to the tag, so it can be styled. 'InnerHTML' is used to add the text inside the div.

To try it out, download this stylesheet and save it in the directory given in your Opera Preferences for Page Style, where it says "My style sheet". (You might need to create the "styles" folder first.) Make sure you then click "Configure Modes" and tick "My style sheet" in the Author Mode list. Click "Apply" also to make it work. (Note: if you change the user style, untick and tick it again and re-apply it to show the changes.)

Now refresh the main page of this site, as I've used a CSS Signature - a unique site reference in the body tag. Any sites that use these should also work. Here's a screenshot of what you should see.