Using @-moz-document to customise sites in usercontent.css

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
lordmedikit
Posts: 447
Joined: August 1st, 2003, 9:18 am

Using @-moz-document to customise sites in usercontent.css

Post by lordmedikit »

Sorry if this has been done before.

I've customised a few sites to look more how I want them so I thought I would post the css here (hope this is the right place).

Hopefully, other people have also done the same and will also then be able to share their modifications so we can all benefit.

The requirements for this to work are a Firefox or Mozilla trunk build after the dates mentioned in this post http://lists.w3.org/Archives/Public/www ... /0135.html .

Anyway, here is my css:

Centre align BBC News:

Code: Select all

@-moz-document url-prefix(http://news.bbc.co.uk/) {
body{
  text-align:center !important;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
}
div[class="nwfoot"], table[cellpadding="0"][cellspacing="0"][border="0"][width="760"],
div[class="f"], table[width="100%"][cellpadding="0"][cellspacing="0"][border="0"]{
  margin:auto !important;
}
table[width="100%"][cellpadding="0"][cellspacing="0"][border="0"]{
  width:760px !important;
}
div[class="ticki"]{
  text-align:left !important;
}
table[width="100%"][cellpadding="0"][cellspacing="0"][border="0"] img{
  max-width:759px !important;
}
}

Centre align fixed width version of the Register.co.uk (also got rid of some in my opinion clutter):

Code: Select all

@-moz-document domain(theregister.co.uk), domain(theregister.com) {
[id="MastheadTop"], td[id="LeftNav"],  table[id="RelatedStuff"], div[class="IconsBtm"],
div[class="IconsTop"], div[id="Related"]{
  display:none !important;
}
body{
  text-align:center !important;
  margin:0 !important;
  padding:0 !important;
  background-image:none !important;
}
div[id="Masthead"], ul[class="Menu Buttons"], ul[class="Menu"]{
  margin:auto !important;
  width:748px !important;
  border-left:2px solid red !important;
  border-right:2px solid red !important;
}
div[id="Masthead"], ul[class="Menu Buttons"]{
  text-align:left !important;
}
div[id="UnderMenuBar"] hr{
  margin:auto !important;
  width:752px !important;
  border-left:2px solid red !important;
  border-right:2px solid red !important;
}
table[id="MainCols"]{
  margin:auto !important;
  text-align:left !important;
  width:750px !important;
  border-left:2px solid red !important;
  border-right:2px solid red !important;
}
td[id="Content"]{
  width:700px !important;
}
div[id="Footer"]{
  width:709px !important;
  margin:auto !important;
  border-left:2px solid red !important;
  border-right:2px solid red !important;
}
div[id="Footer"] ul[class="Menu"]{
  border:none !important;
}
}

Centre align fixed width version of the Inquirer.net (also got rid of some in my opinion clutter):

Code: Select all

@-moz-document domain(theinquirer.net) {
td[class="quote"], div[id="TopStoriesBox"], div[id="article_body_footer"],
div[id="article_body_header"]{
  display:none !important;
}
body{
  text-align:center !important;
  margin:0 !important;
  padding:0 !important;
}
table[cellspacing="0"][cellpadding="0"][width="630"][border="0"]{
  margin:auto !important;
  width:750px !important;
  text-align:left !important;
  border-right: 2px solid crimson !important;
}
table[id="tb_mainbody"]{
  width:626px !important;
}
}

Centre align fixed width version of Reuters (also got rid of some in my opinion clutter):

Code: Select all

@-moz-document domain(reuters.com){
table[class="reutersTvBox"], table [id="VerticalMenu1_SpecialNav1"]{
  display:none !important;
}
body{
  text-align:center !important;
  margin:0 !important;
  padding:0 !important;
}
table[width="760"], table[cellspacing="0"][border="0"]{
  margin:auto !important;
}
table[align="left"][width="158"]{
  margin:0 !important;
}
}
Last edited by lordmedikit on July 5th, 2005, 8:57 am, edited 1 time in total.
lordmedikit
Posts: 447
Joined: August 1st, 2003, 9:18 am

Post by lordmedikit »

No one interested?

Or is this the wrong place to post this?
User avatar
Thumper
Posts: 8037
Joined: November 4th, 2002, 5:42 pm
Location: Linlithgow, Scotland
Contact:

Post by Thumper »

I'm very interested. Cheers!

- Chris
User avatar
jqp
Posts: 5070
Joined: November 17th, 2004, 10:56 am
Location: In a box
Contact:

Post by jqp »

I saw a similar thread in Mozilla Development, I think. That might actually be the more appropriate forum, though I'm not sure.
User avatar
peter.reisio
Posts: 3166
Joined: March 3rd, 2004, 6:57 pm
Contact:

Post by peter.reisio »

I prefer that complaining continue and people fix their websites instead.

Nice in a pinch, though.
lordmedikit
Posts: 447
Joined: August 1st, 2003, 9:18 am

Post by lordmedikit »

peter.reisio wrote:I prefer that complaining continue and people fix their websites instead.

Nice in a pinch, though.

I agree, though I think that while this can be used to fix websites, I really use it to make the work better on my machine.

For example, left aligning websites is great for most users, but at higher resolutions like 1360 by 1020 (what I use) or if you have a wide screen, then it just looks stupid.

Also, you can use this sort of thing to hide adverts, or extra clutter on a website that the site owner certainly won't do and some users might even appreciate. I'll leave that sort of thing for people to decide whether or not to do themselves though.

Anyway, I think this is a highly unpromoted feature of Firefox 1.1 that could be very useful for people changing websites say for accessibility reasons (I know the site owner should do this but...).
User avatar
Thumper
Posts: 8037
Joined: November 4th, 2002, 5:42 pm
Location: Linlithgow, Scotland
Contact:

Post by Thumper »

The reason it isn't promoted is that unlike Greasemonkey there's no easy-to-promote UI. A simple extension to hold user stylesheets and a site providing common ones would attract a lot more attention than a paragraph in the release notes.

- Chris
old np
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post by old np »

ChromEdit?
User avatar
Thumper
Posts: 8037
Joined: November 4th, 2002, 5:42 pm
Location: Linlithgow, Scotland
Contact:

Post by Thumper »

The majority of Greasemonkey users never actually hack their own scripts. Chromedit is not the UI they are looking for.

- Chris
lordmedikit
Posts: 447
Joined: August 1st, 2003, 9:18 am

Post by lordmedikit »

I wish I knew enough javascript to make a Greasemonkey type extension for the usercontent.css and userchrome.css files.

Oh well :(.
old np
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post by old np »

User avatar
Thumper
Posts: 8037
Joined: November 4th, 2002, 5:42 pm
Location: Linlithgow, Scotland
Contact:

Post by Thumper »

Seeing as it's bumped:

Daily Kos: sensible width posts

Even with a new "wide" layout, the new-look Daily Kos is still silly thin (and with an adbar down the middle). This fixes that:

Code: Select all

@-moz-document url-prefix(http://dailykos.com)
{
   #ads
   {
      display: none !important;
   }
   #container
   {
      background: url(http://thumper.kicks-ass.org/w_masthead_bg.png) no-repeat !important;
   }
   #main
   {
      width: 650px !important;
   }
   body {
      background: #F4f4F4 url(http://thumper.kicks-ass.org/w_wads_bg.png) 50% 0 repeat-y !important;
   }
}


ZDNet: de-uglify all the fonts

ZDNet uses crappy fonts which aren't antialiased. Fix:

Code: Select all

@-moz-document domain(zdnet.co.uk)
{
  a, span, div {
      font-family: "Tahoma", sans-serif !important;
  }
}


MozillaZine Forums: nicer [ code ] look

Replaces the font with Lucida Console.

Code: Select all

@-moz-document domain(forums.mozillazine.org)
{
  td.code {
      font-family: "Lucida Console", monospace !important;
  }
}


Planet Mozilla: two-column layout

Stolen from Axel Hecht. Simple hackish two-column (newspaper-style) layout. Not perfect, especially with pre tags.

Code: Select all

@-moz-document domain(planet.mozilla.org)
{
  div.entry {
    -moz-column-count: 2;
    -moz-column-gap: 2em;
  }
}


- Chris
User avatar
ThomasJedenfelt
Posts: 91
Joined: May 6th, 2003, 1:59 am
Location: Tyresö (Stockholm, Sweden)
Contact:

Post by ThomasJedenfelt »

I wonder if anyone can help me with this:

I can not get below code to remove the Right Sidebar (User Links, Forum Links and Search) here at MozillaZine Forum:

userContent.css

Code: Select all

@-moz-document domain(forums.mozillazine.org) {
  #sidebar { display: none !important; }
  }


What's strange is that this CSS rule removes the Right Sidebar when I add it to a page's style sheet (Ctrl+Shift+E, Web Developer extension).

I have re-started Firefox after editing userContent.css.

Firefox 1.07 and Windows XP.

Thanks,
/Thomas
User avatar
ThomasJedenfelt
Posts: 91
Joined: May 6th, 2003, 1:59 am
Location: Tyresö (Stockholm, Sweden)
Contact:

Post by ThomasJedenfelt »

_Jim_ wrote:Site specific CSS does not work with 1.0.x builds.

A more traditional selector should meet your needs, though:

Code: Select all

div#masthead + table td#sidebar {
  display: none
}


Thanks Jim for the code!

/Thomas
Racer
Posts: 6108
Joined: November 18th, 2002, 11:07 am

Post by Racer »

At the risk of tooting my own horn, here is a complete MozillaZine forum theme with a dark background.
http://forums.mozillazine.org/viewtopic.php?t=324248
Post Reply