Every day I use a web site which has a really great flash card system for language learning.

However, the authors of the site seem to have a really bizarre sense of what makes for good usability. They make font sizes so large that you only get a few lines of text per screen, and you have to scroll down to access buttons. And don't get me started on what it's like to access the site from a mobile device.

I've been in contact with the developers of the site, and I have even written CSS and header code for them in order to try and help. While they're nice people, unfortunately they have for months been unwilling or able to make changes.

So, I'm going rogue... I want to be able to impose my own damn CSS.

I vaguely remember this being a possibility in a Firefox addon, but can't seem to find it now.

In any case, because I aspire to use this on my mobile phone as well, here's the ideal solution:

I'd like to be able to set up a page on my web server that relays to the source web site, but over writes the CSS and displays it to me with my own CSS.

Is this possible? I know some CSS tricks to over write inline styles, but I'm much less clear on how I can set up a web page to relay the content of another page.

I hope my explanation and goals are clear. I will try to clarify more if I haven't conveyed any part of this properly.

Thank you for any tips.

Update: Here is the CSS I've placed in my userContent.css to try and get font size under control.

@-moz-document domain(badsite.com) {
body {
font-size: 12px;
}
font {
 font-family: inherit !important;
font-size: inherit !important;
color: inherit !important;
}
}

Comments

First, try reducing the zoom. If you can make everything fit just by reducing the zoom to, say 70%, this may be the simplest solution. Many modern browsers support zooming in and out. The web site designers probably have huge high-pixel screens.

Written by Stephen Chung

Second, many modern browsers allow you to attach a "user agent stylesheet" to re-style sites. User agent sheets usualy take precedence over the site's style sheets.

Written by Stephen Chung

Stephen, if it were only a matter of font sizes, then zooming might work. But we're talking about a lot of styling problems. Also, if I zoom out to make the text a reasonable size, things like buttons shrink down to become ridiculously unusable. Thanks for the suggestions, though.

Written by Dave M G

You can zoom the whole page, not just the fonts. I am not talking about the Text-Size setting.

Written by Stephen Chung

FYI, the Firefox Add-on you're referring to is called Stylish which is also available for Chrome now too.

Written by Marcel

Stephen, yes, I know one can zoom the whole page. Look, the point is that when someone has a whole page of mismatched sizes, a global zoom is not helpful, as when you adjust one thing, other things become ridiculously small or large in relation.

Written by Dave M G

Marcel, thanks for that tip. I will check out Stylish.

Written by Dave M G

Accepted Answer

You can edit userContent.css in Firefox. Use the @-moz-document to target that site only.

@-moz-document domain(bad-ui-site.com) {
   body {
      font-size: 80%;
   }
}

I'd like to be able to set up a page on my web server that relays to the source web site, but over writes the CSS and displays it to me with my own CSS

I'd recommend you don't. It is difficult, and probably violates their terms.

Written by alex
This page was build to provide you fast access to the question and the direct accepted answer.
The content is written by members of the stackoverflow.com community.
It is licensed under cc-wiki