How to create html/CSS modification script for font, line height, width?

[Ben]

How can I write a script which let me modify some html/css values?

There are a couple of web pages from certain sites which have an ugly
font, or a BIG line height or a small width value. Before printing I
want to change them.

Instead of editing it all the time in the html/Css code manually I
would appreciate to have a prepared script which I can select (e.g.
through menu) and which is applied to the current page.

Edit statements in this script should be able to modify the font, line
height and width values as desired.

Is this possible (in the next release) ?

Thank you
Ben

[Mr Warper]

Ben wrote:
> How can I write a script which let me modify some html/css values?

I'd say the most direct way is to use a text editor.

> There are a couple of web pages from certain sites which have an ugly
> font, or a BIG line height or a small width value. Before printing I
> want to change them.
>
> Instead of editing it all the time in the html/Css code manually I
> would appreciate to have a prepared script which I can select (e.g.
> through menu) and which is applied to the current page.
>
> Edit statements in this script should be able to modify the font, line
> height and width values as desired.
>
> Is this possible (in the next release) ?

This is already possible, I've done that to a lot of sites and I'd say it's kind
of the most expectable use of GreaseMonkey. The point is, you need to know a
pinch of Javascript to be able to do it. If you do, then GM takes care of the rest.

If you want to have a look at some scripts of mine, drop me a line.

Regards,

[ArmEagle]

> --
> You received this message because you are subscribed to the Google Groups
> "greasemonkey-users" group.
> To post to this group, send email to greasemon...@googlegroups.com.
> To unsubscribe from this group, send email to
> greasemonkey-us...@googlegroups.com.
> For more options, visit this group at
> http://groups.google.com/group/greasemonkey-users?hl=en.
>
>

Aren't there more suitable 'custom css' extensions for that? Though
you specifically mention you want to apply it before printing. So you
might not want it changed when you're just viewing it normally. Though
GreaseMonkey would apply it on a normal view also.

[Dave Land]

Ben,

> How can I write a script which let me modify some html/css values?
>
> There are a couple of web pages from certain sites which have an ugly
> font, or a BIG line height or a small width value. Before printing I
> want to change them.

If it's something you're going to want to do "on demand", as before
printing, then a bookmarklet may be more what you're looking for. This
is not to disrespect GM — an old friend for half a decade — but to try
to answer your question as helpfully as I can.

You can inject a little CSS in a page from a bookmarklet very easily:

javascript:p=document.createTextNode("p{width:
400px
;}");s
=
document
.createElement
("style");s.appendChild(p);b=document.getElementsByTagName("head")
[0];void(b.appendChild(s))

This very, very simple one is called "Narrographs" on my machine: it
forces all paragraphs on a page (usually a news page, which tend to be
long stories set way too wide for easy reading). You can put whatever
CSS you'd like in the textnode "p".

Of course, this is just one way to do it. Others may look at this and
shake their heads, sadly, wondering why I did it this way. But it
gets the job done. It's a pattern I've used with success for years.

A geekier, version prompts you for whatever CSS you might want to insert
in the page. If you cancel, it doesn't insert anything. If you just
click "OK" or press Enter, it does exactly what the script above does,
if you edit the CSS, you can do whatever you want.

javascript:if(c=prompt("CSS to insert:","p{width:400px;}")
{p
=
document
.createTextNode
(c
);s
=
document
.createElement
("style");s.appendChild(p);b=document.getElementsByTagName("head")
[0];void(b.appendChild(s))}

Of course, exactly what CSS you need depends on the page you're
fixing.

Dave

[Ben]

Hmm, I am a bit confused about your descriptions.

Lets assume I have the following piece of CSS code (=part of a bigger
CSS stylesheet):

.articleContent .module .text p {
font-family: Arial,Verdana,Helvetica,sans-serif;
}
.articleContent .module .text p {
font-size: 14px;
line-height: 23px;
}

Now I want to automatically change it to:

.articleContent .module .text p {
font-family: Verdana;
}
.articleContent .module .text p {
font-size: 12px;
line-height:14px;
}


How exactly would a greasemonkey script look like?

Ben

[Anthony Lieuallen]

On 02/14/11 11:23, Ben wrote:
> How exactly would a greasemonkey script look like?

A call to GM_addStyle() with the CSS you want passed as the only
argument. Use of "!important" might make overriding the page easier.

E.G.
http://arantius.com/misc/greasemonkey/thesixtyone-ui-cleaner.user.js#

[Ben]

> A call to GM_addStyle() with the CSS you want passed as the only
> argument.  Use of "!important" might make overriding the page easier.

Very intersting. Thank you.

But is GM_addStyle()m also suitable for REPLACING existing CSS styles?
Or is there a separate
GM_replaceStyle() function?

In other words can write for my example two previous postings above:

GM_addStyle(.articleContent .module .text p {

font-family: Verdana; }
.articleContent .module .text p {
font-size: 12px;
line-height:14px; }

);

Do I have to use TWO separate GM_addStyle() sections/instructions or
can I put two or even more CSS instructions into ONE GM_addStyle()?

[sizzlemctwizzle]

GM_addStyle(".articleContent .module .text p {" +
"font-family: Verdana !important; }" +
".articleContent .module .text p {" +
"font-size: 12px !important;" +
"line-height:14px !important; }");