Creating CSS rules with Dragonfly?

Creating CSS rules with Dragonfly?

I just discovered the Dragonfly in Opera and noticed I can customize webpages "on the fly". However, I couldn't figure out how to save the result so it loads it every time I visit the page. In my case that would mean omitting few parts of a website by default. How do I do that? It would be super awesome to be able to do that.

I just had the same wish a few days ago. This would be awesome, +1000!

I think what's good for you is to use userscript

Make a new file.js, and put in your Userscript folder.

Paste this text in your file.js

// ==UserScript==
// @name		Your new userscript
// @description		your description
// @include		http://thewebpage.com/blah/*
// @exclude		http://maybe-optional.com/*

// ==/UserScript==

window.addEventListener('DOMContentLoaded', function blahblah()
{

// For hide the elements:
	css = document.styleSheets[0].insertRule("#XXXXX, .YYYY {display:none !important; blah: yadda !important }",0);

// For delete elements:
	crap_element = document.getElementById("crap_element_id");
	if (crap_element) { crap_element.parentNode.removeChild(crap_element); }

}, false);

Sorry my bad English.

Originally posted by beiren:

...
However, I couldn't figure out how to save the result so it loads it every time I visit the page. In my case that would mean omitting few parts of a website by default. How do I do that? It would be super awesome to be able to do that.

What you want/need is 'usercss'.
It allows you to overrule the page css with some of your own.
See http://www.opera.com/docs/usercss/

Example:
To make the (Dutch) site http://teletekst.nos.nl/tekst/101-01.html more readable I made a file 'TeletekstNos.css' with

pre {
	font-size: 18px !important;  }
font[color="blue"] {
	color: #0AF;  }
pre {
	margin-right: 0.5em !important;  }

Edit the site preferences for the site (Display | My stylesheet) and link 'teletekst.nos.nl' to 'TeletekstNos.css'.

Regards, a3ano

Originally posted by FFFUUUFox:

I think what's good for you is to use userscript

Make a new file.js, and put in your Userscript folder.

Paste this text in your file.js

// ==UserScript==
// @name		Your new userscript
// @description		your description
// @include		http://thewebpage.com/blah/*
// @exclude		http://maybe-optional.com/*

// ==/UserScript==

window.addEventListener('DOMContentLoaded', function blahblah()
{

// For hide the elements:
	css = document.styleSheets[0].insertRule("#XXXXX, .YYYY {display:none !important; blah: yadda !important }",0);

// For delete elements:
	crap_element = document.getElementById("crap_element_id");
	if (crap_element) { crap_element.parentNode.removeChild(crap_element); }

}, false);

Sorry my bad English.

Wow! This is awesome! Thanks!