MozillaZine

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

Post Posted July 1st, 2005, 1:44 pm

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 Posted July 2nd, 2005, 7:18 am

No one interested?

Or is this the wrong place to post this?

Thumper

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

Post Posted July 2nd, 2005, 7:37 am

I'm very interested. Cheers!

- Chris

jqp

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

Post Posted July 2nd, 2005, 9:59 am

I saw a similar thread in Mozilla Development, I think. That might actually be the more appropriate forum, though I'm not sure.

peter.reisio

User avatar
 
Posts: 3166
Joined: March 3rd, 2004, 6:57 pm

Post Posted July 2nd, 2005, 10:19 am

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 Posted July 2nd, 2005, 12:03 pm

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...).

Thumper

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

Post Posted July 2nd, 2005, 12:19 pm

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 Posted July 2nd, 2005, 12:33 pm

ChromEdit?

Thumper

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

Post Posted July 2nd, 2005, 12:35 pm

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 Posted July 2nd, 2005, 1:18 pm

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 Posted October 9th, 2005, 1:49 am


Thumper

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

Post Posted October 9th, 2005, 2:17 am

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

ThomasJedenfelt

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

Post Posted October 14th, 2005, 10:20 am

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

ThomasJedenfelt

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

Post Posted October 14th, 2005, 11:21 pm

_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 Posted October 17th, 2005, 7:01 am

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

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 0 guests