Question

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;
}
}

Answer 1

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.