The Daily UserScript: Userscripts.org Expand Main Content Area

This userscript will expand the #main content field at userscripts.org with some simple CSS.

The Unpleasantry:

Currently the #main content div has a width set to 750px, which squeezes the little room the text I want to read has, leaves a ton of white space, and looks disgusting overall on a widescreen monitor.

The Alleviation:

The "Userscripts.org Expand Main Content Area" UserScript simply adds a little css to the page to allow the #main content div's width to automatically adjust to the size of your screen, which should help you read the page, and generally make pages shorter.

The Daily UserScript: Remove Print CSS (WYSIWYG)

This userscript removes all CSS that is only for media="print", and makes the media="..screen.." into media="...screen..., print" so that what you see on the screen is what you will get for your print out of the page.

The Unpleasantry:

Currently if you print a webpage (or go to print preview) you may notice that most sites do not look the same as they do on the screen when you try to print one of their pages. This is because the page has CSS specifically designated for media="screen" which is different than the CSS they use for media="print".

The Alleviation:

Once you install the "Remove Print CSS (WYSIWYG)" UserScript there will be a Greasemonkey menu command that you can use called 'Remove Print CSS' which removes the media="print" CSS and makes the media="...screen..." CSS media="...screen..., print" CSS, which means that the same CSS used for your screen will be used when you try to print a page.

[More]

Greasemonkey Tip: Adding CSS With GM_addStyle

Adding style to a webpage with Greasemonkey is extremely easy, but I have noticed a lot of userscript code that either ignores the GM_addStyle( css ) api method, or doesn't use E4X which would save the author's time typing, and save the reader's time reading. So the following are some tips when adding CSS to a webpage with Greasemonkey.

Tip 1: Use GM_addStyle( css )

Don't add multiple style attributes, don't use that code you have that adds a style tag to the page, use the built-in GM_addStyle( css ) api method; usually you should only need to call this method it once.

Tip 2: Use E4X

Typically when your adding css to a page, there are quite a few lines, and you don't want to escape every newline character, or join a bunch of partial strings together; the simplest way to go is to use E4X like so:

GM_addStyle((<><![CDATA[
   body { color: white; background-color: black }
   img { border: 0 }
   .footer {width:875px;}
]]></>).toString());
© Erik Vold 2007-2010. Contact Erik Vold. Top ^