A Windows XP help forum. PCbanter

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

Go Back   Home » PCbanter forum » Microsoft Windows XP » General XP issues or comments
Site Map Home Register Authors List Search Today's Posts Mark Forums Read Web Partners

OT: Controlling webpages in Firefox



 
 
Thread Tools Display Modes
  #1  
Old May 7th 19, 03:32 PM posted to alt.comp.os.windows-10,alt.windows7.general,microsoft.public.windowsxp.general
Mayayana
external usenet poster
 
Posts: 5,347
Default OT: Controlling webpages in Firefox

Using the userContent.css file in FF to change webpage display.
------------------------------------------------------------

There was a brief discussion about page rendering in the FF
thread but I thought this separate post might be useful to some.

Many people have trouble with pages not displaying correctly
or with obnoxious popovers. The former is especially a problem
for people disabling script. The second is one of the problems
that comes with enabling script.

In FF, any webpage element can be edited using userContent.css
in the app data folder. You can override all links, for instance, and
make them purple if you want to. Where this really comes in handy
is that CSS can be applied based on class or ID. Class and ID are
are functionally the same. They identify elements in a webpage.

Class is denoted in CSS with a period and ID with a hash sign:

..TopMenu
#TopMenu

One can find those details by right-clicking the element in Firefox,
then clicking "Inspect Element" on the context menu. A view of
the HTML will open with the code for that element highlighted.
(Assuming you have the Web Tools installed with FF.)

Examples of usage:

Many pages use an overlay to force enabling script. It's often
of class "overlay". So to make it disappear:

..overlay {display: none !important;}

Bostonglobe.com recently started showing a left-side slide-out
menu that's broken without script, covering half the page. So I
checked out the code and came up with this to make it disappear:

..secondary-nav-screen-container {display: none !important;}
..secondary-nav-options-container {display: none !important;}
..navigation-sidebar {display: none !important;}

The first two lines are for Boston Globe. The 3rd is a generic entry
that works for many other sites.

I have lots of these custom settings. It can sometimes be tedious
to find the right class or ID, but often one fix will work for many
pages. The way it works is that most webmasters don't entirely
know coding. They use libraries like jquery to simplify the job. Then
they trade snippets of code with other webmasters to get particular
functionality. No normal person would use a class name in CSS like
"secondary-nav-screen-container". Most would probably call it
something like "menu-left", "PopoutMenu", etc. They have those
ridiculously technical names because they're generic inventions that
get passed around, used by partially educated commercial webmasters
who are mainly working with WYSIWYG tools.

The same problem of webmaster fads that breaks so many pages
also sometimes makes it possible to fix them en masse.

Here's another one to stop motion/animation, slideshows, etc that's
still present after script is disabled:

* {transform: none !important;
-moz-transform: none !important;
transition-property: none !important;
-moz-transition-property: none !important;
-moz-transition-duration: none !important;
animation: none !important;
-moz-animation: none !important;
:before {display: none !important;}
:after {display: none !important;}

:before and :after are especially obnoxious. Kids use them
to do things like make the first letter in a sentence drip with
green slime. They allow any element to have styles specified
for just in front and just after that element. The lines above
block all uses of :before and :after.

Here's what I've used to remove Twitter quotes from virtually
all webpages:

#divRawLinkBackRow {display: none !important;}
#sharebar_fixed {display: none !important;}
#sharebar_fixed_social {display: none !important;}
..twitter-tweet {display: none !important;}

Some people may like Twitter quotes. I find them intrusive.
They're virtually always trite and serve as a way for journalists
to not do their job. If an article isn't relevant without tweets
from pop stars or politicians then I probably don't want to be
spending my time reading it.

This can also be used for whole elements:

EMBED {display: none !important;}
VIDEO {display: none !important;}
MARQUEE {display: none !important;}

(Marquee are those obnoxious scrolling animations that
scroll text.)

Knowwledge of HTML and CSS is necessary to write these, but
many of them can also be found online, or offered as samples
by Mozilla.


Ads
  #2  
Old May 7th 19, 04:04 PM posted to alt.comp.os.windows-10,alt.windows7.general,microsoft.public.windowsxp.general
J. P. Gilliver (John)[_4_]
external usenet poster
 
Posts: 2,589
Default OT: Controlling webpages in Firefox

In message , Mayayana
writes:
Using the userContent.css file in FF to change webpage display.
------------------------------------------------------------


Does it matter where in that file you put all these code snippets? (For
example, can I just add them onto its end?)
[]
Many people have trouble with pages not displaying correctly
or with obnoxious popovers. The former is especially a problem
for people disabling script. The second is one of the problems
that comes with enabling script.

In FF, any webpage element can be edited using userContent.css
in the app data folder. You can override all links, for instance, and


Can it be edited while Firefox is running?
[]
Class is denoted in CSS with a period and ID with a hash sign:

.TopMenu
#TopMenu


So if you want to do something (such as block), do you have to duplicate
any code, one with . one with #?
[]
functionality. No normal person would use a class name in CSS like
"secondary-nav-screen-container". Most would probably call it
something like "menu-left", "PopoutMenu", etc. They have those


Can you make the same (in effect) kill code apply to lots of the
above-type names, or do you have to duplicate it for every one you find?

ridiculously technical names because they're generic inventions that
get passed around, used by partially educated commercial webmasters
who are mainly working with WYSIWYG tools.

The same problem of webmaster fads that breaks so many pages
also sometimes makes it possible to fix them en masse.


(-:
[]
:before {display: none !important;}
:after {display: none !important;}

:before and :after are especially obnoxious. Kids use them
to do things like make the first letter in a sentence drip with
green slime. They allow any element to have styles specified


I don't think I've ever encountered that one!

for just in front and just after that element. The lines above
block all uses of :before and :after.

Here's what I've used to remove Twitter quotes from virtually


What's a Twitter quote?

all webpages:

#divRawLinkBackRow {display: none !important;}
#sharebar_fixed {display: none !important;}
#sharebar_fixed_social {display: none !important;}
.twitter-tweet {display: none !important;}

Some people may like Twitter quotes. I find them intrusive.
They're virtually always trite and serve as a way for journalists
to not do their job. If an article isn't relevant without tweets
from pop stars or politicians then I probably don't want to be
spending my time reading it.

This can also be used for whole elements:

EMBED {display: none !important;}
VIDEO {display: none !important;}
MARQUEE {display: none !important;}

(Marquee are those obnoxious scrolling animations that
scroll text.)

Knowwledge of HTML and CSS is necessary to write these, but
many of them can also be found online, or offered as samples
by Mozilla.


I suppose the underlying concern about all of these kill scripts is that
you - or I, at least - would certainly forget which ones I'd installed,
and then, somewhat later, be bemused why something wasn't/isn't working.
For example, some while ago someone posted how to block IFRAMEs, which I
did, as I thought there were lots of them I would be happy not seeing;
subsequently, I found "Verified by Visa" didn't work. It didn't show a
little icon showing it was blocked, or otherwise indicate something was
missing: it just didn't appear. **Which meanst I didn't know it was
missing.** That's what I'm concerned about with your (and others') tweak
scripts: the fact that, months or even years later, something may just
not appear, and I have little chance of knowing why it isn't. Rather in
the same way most here warn against using registry cleaners.
--
J. P. Gilliver. UMRA: 1960/1985 MB++G()AL-IS-Ch++(p)[email protected]+H+Sh0!:`)DNAf

Listen, three-eyes, don't you try to out-wierd me, I get stranger things than
you free with my breakfast cereal. (Zaphod Beeblebrox in the link episode)
  #3  
Old May 7th 19, 04:52 PM posted to alt.comp.os.windows-10,alt.windows7.general,microsoft.public.windowsxp.general
Mayayana
external usenet poster
 
Posts: 5,347
Default OT: Controlling webpages in Firefox

"J. P. Gilliver (John)" wrote

| Does it matter where in that file you put all these code snippets? (For
| example, can I just add them onto its end?)

There's no structure. Like a .css file for a webpage, each line
is independent. However, al ater line will overrule an earlier
line that conflicts.

| Can it be edited while Firefox is running?

Yes. But it won't apply until you close all instances and reload.

| So if you want to do something (such as block), do you have to duplicate
| any code, one with . one with #?

It depends on the webpage code. CSS works by giving
elements uniquie identifiers. Class is used for a group, ID
for a single element. But they work the same way. Example:

TD CLASS="TD1" ID="TDa"

You can refer to that element with .TD1 or #TDa.
Some elements have a class. Some have an ID.
Some have both. The only difference for you would be
the application. There might be 20 TDs of class TD1
but only one of ID TDa. So if you want only the one
to have, say, more padding, you can use:

#TDa {padding: 10px !important;}

If you want all 20 to have more padding you can specify
the class:

..TD1 {padding: 10px !important;}

(Important gives it priority.)

It can also show as multiples:

TD CLASS="TD1 TD2 TD3"

That indicates this TD is a member of all 3 classes. That
might be the result of sloppy, bloated, auto-generation
of HTML. Or there might actually be 3 different subsets
of TDs that overlap. Usually you don't need to get into
details like that.

| functionality. No normal person would use a class name in CSS like
| "secondary-nav-screen-container". Most would probably call it
| something like "menu-left", "PopoutMenu", etc. They have those
|
| Can you make the same (in effect) kill code apply to lots of the
| above-type names, or do you have to duplicate it for every one you find?

I think I explained that above. If you set...

#PopupMenu {display: none !important;}

....it will hide all items with ID PopupMenu on all webpages.
userContent.css is applied to every page you visit, as
though it were a CSS file that's part of the webpage.

But that line won't hide an item with a class PopupMenu.
And it won't hide an item with ID PoupMenu1.

| :before {display: none !important;}
| :after {display: none !important;}
|
| :before and :after are especially obnoxious. Kids use them
| to do things like make the first letter in a sentence drip with
| green slime. They allow any element to have styles specified
|
| I don't think I've ever encountered that one!
|
I encountered it once. And I encountered an unexpected
slideshow once. With script disabled I expect a static
page, so both times I was shocked and immediately had
to figure out what the problem was. So I don't know how
common :before and :after are now. I don't see it. I'd
guess that it's fairly common but that such obnoxious usage
is not so common. It's like black background wiith chartreuse
font. Only a small subset of teenagers think that looks clever.

| Here's what I've used to remove Twitter quotes from virtually
|
| What's a Twitter quote?
|
I'd give you a link, but I can't see them.

It's become typical in news media. They report on a
dustup between Taylor Swift and Beyonce, or between
Trump and Pelosi, and the article is composed of little
more than provocative tweets. They have a particluar
layout, visually interrupting the article, like an image.
They all have the same appearance and seem to all
have class "twitter-tweet". Maybe the CSS comes from
Twitter. They also all seem to link to widget.js, a script
package loaded from Twitter. It's a cooperative effort.

So an article might say Beyonce fans attacked Taylor
Swift today.... Then that would be followed by a couple
of tweets. Then the article will explain that "Swifites"
fired back... A couple more tweets. The "journalist" has
their article written for them.

| I suppose the underlying concern about all of these kill scripts is that
| you - or I, at least - would certainly forget which ones I'd installed,
| and then, somewhat later, be bemused why something wasn't/isn't working.

That copuld happen, but it's not likely when using unique classes
or IDs.

| For example, some while ago someone posted how to block IFRAMEs, which I
| did, as I thought there were lots of them I would be happy not seeing;
| subsequently, I found "Verified by Visa" didn't work.

Yes. That's blocking the whole element. I do that in PM
but not in Firefox. Paul once pointed out that hiding
them doesn't block cross-site-scritping dangers or
cookies in iframes, so in PM I actually block frames
via prefs. But with that you do have to know the
implications. I can't get Google captchas to work at
all on my machine. Even with script and frames. It seems
to be something else I'm blocking that's more obscure.
Fortunately, I almost never actually need to deal with
a Captcha. But it can be confusing when you don't even
know it's there.

| That's what I'm concerned about with your (and others') tweak
| scripts: the fact that, months or even years later, something may just
| not appear, and I have little chance of knowing why it isn't. Rather in
| the same way most here warn against using registry cleaners.

Suit yourself. It's not a 1-click solution. It does
require some effort and understanding of how the
code works.


  #4  
Old May 7th 19, 07:11 PM posted to alt.comp.os.windows-10,alt.windows7.general,microsoft.public.windowsxp.general
J. P. Gilliver (John)[_4_]
external usenet poster
 
Posts: 2,589
Default OT: Controlling webpages in Firefox

In message , Mayayana
writes:
"J. P. Gilliver (John)" wrote

| Does it matter where in that file you put all these code snippets? (For
| example, can I just add them onto its end?)

There's no structure. Like a .css file for a webpage, each line
is independent. However, al ater line will overrule an earlier
line that conflicts.


Thanks for all this. You should write a book on it.
[]
| So if you want to do something (such as block), do you have to duplicate
| any code, one with . one with #?

[]
TD CLASS="TD1 TD2 TD3"

That indicates this TD is a member of all 3 classes. That
might be the result of sloppy, bloated, auto-generation
of HTML. Or there might actually be 3 different subsets
of TDs that overlap. Usually you don't need to get into
details like that.

| functionality. No normal person would use a class name in CSS like
| "secondary-nav-screen-container". Most would probably call it
| something like "menu-left", "PopoutMenu", etc. They have those
|
| Can you make the same (in effect) kill code apply to lots of the
| above-type names, or do you have to duplicate it for every one you find?

I think I explained that above. If you set...

#PopupMenu {display: none !important;}

...it will hide all items with ID PopupMenu on all webpages.
userContent.css is applied to every page you visit, as
though it were a CSS file that's part of the webpage.

But that line won't hide an item with a class PopupMenu.
And it won't hide an item with ID PoupMenu1.


So I'd have to duplicate it for each one - simple enough (though
tedious) if it's only one line, but bit bloatish if it's several.
[]
is not so common. It's like black background wiith chartreuse
font. Only a small subset of teenagers think that looks clever.


Indeed! I don't mind a dark background occasionally, but the text must
be white or yellow.

| Here's what I've used to remove Twitter quotes from virtually
|
| What's a Twitter quote?
|
I'd give you a link, but I can't see them.

(-:

It's become typical in news media. They report on a

[]
So an article might say Beyonce fans attacked Taylor
Swift today.... Then that would be followed by a couple
of tweets. Then the article will explain that "Swifites"
fired back... A couple more tweets. The "journalist" has
their article written for them.


Sounds like more effort than just quoting them, to me!

| I suppose the underlying concern about all of these kill scripts is that
| you - or I, at least - would certainly forget which ones I'd installed,
| and then, somewhat later, be bemused why something wasn't/isn't working.

That copuld happen, but it's not likely when using unique classes
or IDs.


I thought you were suggesting this because you said they all tend to use
the same classes or IDs.

| For example, some while ago someone posted how to block IFRAMEs, which I
| did, as I thought there were lots of them I would be happy not seeing;
| subsequently, I found "Verified by Visa" didn't work.

Yes. That's blocking the whole element. I do that in PM
but not in Firefox. Paul once pointed out that hiding
them doesn't block cross-site-scritping dangers or
cookies in iframes, so in PM I actually block frames
via prefs. But with that you do have to know the
implications. I can't get Google captchas to work at
all on my machine. Even with script and frames. It seems
to be something else I'm blocking that's more obscure.


But you've forgotten what. That's what I'm afraid of!

Fortunately, I almost never actually need to deal with
a Captcha. But it can be confusing when you don't even
know it's there.


That's the trap! (Or one of them.)

| That's what I'm concerned about with your (and others') tweak
| scripts: the fact that, months or even years later, something may just
| not appear, and I have little chance of knowing why it isn't. Rather in
| the same way most here warn against using registry cleaners.

Suit yourself. It's not a 1-click solution. It does
require some effort and understanding of how the
code works.

I just about understand how it works, but it's the matter of remembering
what I've done that I'd find difficult.

--
J. P. Gilliver. UMRA: 1960/1985 MB++G()AL-IS-Ch++(p)[email protected]+H+Sh0!:`)DNAf

/Downton Abbey/ presented a version of the past that appealed to anyone who
had ever bought a National Trust tea towel. - Alison Graham, RT 2015/11/7-13
  #5  
Old May 7th 19, 08:03 PM posted to alt.comp.os.windows-10,alt.windows7.general,microsoft.public.windowsxp.general
Mayayana
external usenet poster
 
Posts: 5,347
Default OT: Controlling webpages in Firefox

"J. P. Gilliver (John)" wrote

| Thanks for all this. You should write a book on it.

I actually made a popular tweak program years ago.
I find it naturally interesting and like to be helpful. But
these days it's difficult. I pretty much stopped tweaking
with Win7. It's no longer user-friendly and tweaks get
so convoluted that only techie people can benefit. Though
I could imagine someone writing an extension to more easily
block elements via CSS. With such an extension it would
be simple to block per-site. I actually wrote something
like that myself as a MIME filter for IE. But since I don't
use IE it doesn't do me much good. And I think MS have
now disabled MIME filters.

As for the rest, it sounds like you have it except that I
didn't explain part of it clearly. An ID or class can be
any string. A DIV on one page holding ads might have a
class of AdDiv. On another site it might be advert-div.
There are no rules. BUT.... often they'll be the same across
sites. If something is of class .overlay then you can be
pretty sure that's something that will sit on top. So I
don't hesitate to block that.

Also, it's worth more time and trouble if you have regular
favorite sites. I have specific lines to fix WashPo, Slashdot,
etc. At one point Slashdot started inserting a box of
videos. I just removed the whole thing. It was worth the
work because I go there everyday for news. Then there are
a few things, like animation and PROGRESS and MARQUEE
and VIDEO that I know I'll never want in any page.


 




Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is Off
HTML code is Off






All times are GMT +1. The time now is 12:04 PM.


Powered by vBulletin® Version 3.6.4
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
Copyright 2004-2019 PCbanter.
The comments are property of their posters.