Is Stylish Installed?

Whitespace is not consistent in most CSS or HTML code. The software which reads it is supposed to ignore whitespace. This is so that human writers of markup and style can use whitespace as their eyes demand, for legibility.

Most important are the { brackets }, ( parenthesis ), "double-quotes", and semi-colons; they are telling the parser where each statement is, and how to understand it.

@namespace url(http://www.w3.org/1999/xhtml);

You can see in section 6.1.1 of the CSS 3 Specification, that namespaces are used with selectors to explain different selector types, and to preserve the differences while mixing types in a single document. This is done so that we can do things like using XML inside of an HTML document, and then tell CSS how to style the XML differently than the HTML.

You can see this principle being used inside of Firefox, in xul.css. There are namespace declarations, such as:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
@namespace html url("http://www.w3.org/1999/xhtml"); /* namespace for HTML elements */
@namespace xbl url("http://www.mozilla.org/xbl"); /* namespace for XBL elements */

There is no 'xul' prefix between '@namespace' and 'url()', so any selector without a namespace prefix will be in the XUL namespace. To define a selector as being in HTML or XBL namespace, you need only prefix the selector correctly.

@-moz-document domain("userstyles.org"),
               url("http://blog.userstyles.org"),
               url-prefix("http://userstyles.org/forum")

@-moz-document is a Mozilla Extension at-rule, used primarily in userstyles, which controls where a set of CSS rules are allowed to take effect. It takes a single parameter, which lets you select domains or subdomains. In CSS 3, there is still no way to do wildcard or negation on these. There can be multiple entries in the list, comma separated.

Opens the document style.

Selector specificity is a numeric ranking of the selector used to target an entity, so that more specific selectors take precedence over less specific ones. This can be used in userstyles when you want to make minor modifications to an existing userstyle, without replicating the entire CSS in yours.

In such a case, you are creating an, "addon userstyle", where your new userstyle is an, "addon", to the original, meaning that both userstyles must be loaded in a browser to produce the desired effect. The addon userstyle must use more specific selectors than the original, so that the addon rules apply on top of the originals rather than some other way.

For instance, if the style you wish to modify looks like this:

@-moz-document url("") {

  body {
    background: #FFF !important;
    color: #000 !important;
  }

  .someclass {
    color: #F00 !important;
    font-style: bold !important;
  }

  .someotherclass { color: #113377 !important; }

}

Then presume we want an addon style to change only body, to give it a black background and white text, but we want to keep any other rules of the original userstyle. We would do so like this:

@-moz-document url("") {

  html > body {
    background: #000 !important;
    color: #FFF !important;
  }

}

This works because in HTML namespace, a body node is always the child of the html node. Similarly, we can change any other piece of the already existing userstyle, such as the .someclass rule, by prefixing a selector with body, like this:

@-moz-document url("") {

  body .someclass { color: #00F !important; }

}

This works if the original userstyle was written like our example, using only .someclass, and not some more specific selector, because in HTML namespace, every node of the document is a descendant of the body node. Creating addon userstyles may put you in a situation of needing to override a selector which already uses the specificity principle, such as in:

@-moz-document url("") {

  html > body { background-color: #ccc !important; }

}

To affect a selector such as this, you may need to use the :root psuedo-selector, like this:

@-moz-document url("") {

  html:root > body { background-color: #000 !important; }

}

This works because while the html node does not have any ancestors for you to select, it is the root node in HTML namespace, and the :root psuedo-selector is used to add specificity in this case.

Here are some other ways you might increase specificity of your selectors:

In any userstyle, you must match or exceed the specificity of the original CSS. Existing properties must be overwritten or negated, if you don't want them involved in the result, and the selector ancestry syntax ( spaces, > or + ) must usually match or beat the original.

While writing an addon userstyle, with the original userstyle also loaded, Stylish's userstyle load order may trick you, making you think you've gotten the selector specificity right. Stylish reads loaded userstyles from top to bottom, in order of the time they were loaded, so new styles have natural priority over older ones. This is the same principle as load order of .css files when writing web pages.

You can use Chrome List to find image resources you see in FireFox or extensions.

chrome://path/ These paths are somewhat relative to the user profile directory, but the "chrome" URI (Universal Resource Identifier) scheme is used because many of these files are being pulled directly from ZIP archives.

resource://gre/path/ These paths are relative to the program directory.

These paths are supposed to be restricted to local JavaScript space, with limited accessibility. The bug advisory suggests that, as always, such ideals are not guarantees. You can add files to these paths, but should limit those files to the same sort that are found there already. Namely, images and such.

file:///C:/path/to/file These are exactly what they look like. The extra / is required, so take note of it.

• Mozilla Firefox About:Blank IFrame Cross Domain Information Disclosure Vulnerability
• More...

Many Stylish userstyle authors seem to think that about:blank is only used for new/empty tabs. The assumption is false. About:blank is used in many places where an HTML DOM is needed, or where a place-holder is needed before a document loads (it is in all new tabs before the document loads).

About:blank is on this page:

You should not put content on about:blank, with Greasemonkey, or place images on about:blank because it looks cool in new tabs. About:blank can appear anywhere, and it is not meant for that behavior. Doing these things can break or severely slow down anything built to use about:blank.

Where a color value is needed, you can use words: black, lightblue, or any other CSS color name.

RGB: rgb(123,213,43)

• Each decimal value can be in the range of 0 to 255.
• The RGB decimal range is modeled on the human visible light spectrum. So, 0 is black, and 255 is white.
• The numbers represent the amount of red, green, blue, to be added into an assumed black (0) original value. Distance from 0 determines light intensity. The three light colors are added together, providing a sum which is the result color. So, rgb(127,127,127) has nearly equal amounts of everything in it, and is the middle shade of grey. rgb(255,0,0) is the brightest red.

hexadecimal: #FFFFFF

• hexadecimal colors are RGB colors, in hexadecimal representation, because hexadecimal is shorter than decimal, for long numbers.
• The pattern is still RGB, so #FFFFFF = rgb(255,255,255) = FF FF FF
• The # preceding these values is telling the software that the string is a hexadecimal number.
• 0 is still 0, although it may be padded to 00.
• 255 is FF.
• 254 is FE. Notice, in relation to FF, all I did was subtract 1. In hex, F - 1 = E.
• F, in decimal, is 15. 0 1 2 3 4 5 6 7 8 9 A B C D E F
• In #FD, F is decimal 240, D is decimal 13, and FD as a total is 240 + 13 = 253
• #0D = 13, #1D = 29, #1F = 31.
• So, in #1F that is: (16 x 1) + 15 = 31
• In #FD that is: (16 x 15) + 13 = 253
• CSS lets you shorten hexadecimals like #FFFFFF, to #FFF
• #999999 can be #999
• #CCCCCC can be #CCC
• #CCFF00 can be #CF0
• This does not mean that #FF = #F, or #99 = #9. What's actually happening is the CSS specification states that web designers are lazy (they are), and as such, they should not be required to press a key twice, when once would suffice. The CSS parser, instead, must spend a processor cycle or three to find out that #FFF is #FFFFFF is rgb(255,255,255).
• MoreCrayons has good web color information and tools.

position Tell an element to behave as static, relative, absolute, or fixed.

top Distance from this edge of the parent node, to this edge of this node.

bottom ''

left ''

right ''

    position: fixed !important;
    top: 10% !important;
    right: 10ex !important;
    bottom: 5em !important;
    left: 50px !important;

Fixed means, "fixed on screen". Absolute means "position within the parent node". To force positioning to the bottom of a page, you often must use the size and positioning of other nodes above the target node, to force it to be pushed down.

A parent of an absolute positioned node, might stretch to let its child get attached to the given edge. That stretching, however, may change the floating, wrapping, padding, or positioning of the target node's siblings. This could mean that position:absolute;bottom:0; will end up being the bottom of the window at some stage of the page being drawn, and not the bottom of the page when it is finished drawing.

Read W3's explaination of positioning, with visual examples.

If a node is already set to "top", and you want it at the "bottom" use this to turn off "top":

    top:auto;
    bottom:5pt;

No, you can not use wildcards to do something like this:

@-moz-document url("http://honestlyillustrated.com/userstyles/stylishguide/*.html")

I don't like it either. I wish we could.

The closest you can get is by using:

@-moz-document url-prefix("http://honestlyillustrated.com/userstyles/stylishguide/")

@-moz-document url-prefix("http://honestlyillustrated.com/userstyles/")

That's called a "global style".

1. Begin with Click:"Stylish Icon" > Click:"Write Style" > Click:"Blank Style".
2. In "Add Style" window, Click:"Insert" > Click:"HTML Namespace". Because I assume you're asking about website global styles.
3. Write some style rules for whatever HTML tag you want.

If you write something like this:

Click the "!important" button, so it becomes this:

Don't use @-moz-document for global styling.

Read: Local Resources (files) in Firefox's Paths.

Choose the method, chrome://, file:///, or resource://, which makes the most sense to you, and works best for your style's goal.

File paths written as those URI, (as opposed to http://), are ways for Firefox to access files on your disk drive(s).

Install:

DOM Inspector

Inspect Context

Web Developer Toolbar

With Web Developer Toolbar: Top of this page.

These images are an example of using Web Developer Toolbar and Stylish, together:

Use "CSS" -> "View Style Information", to activate a tool with a cross-hair cursor, and red border box, which indicates the HTML tag element you are hovering over.

The toolbar has changed to CSS information mode, which shows a "bread crumb trail" through all of the tags which the hovered tag is a "descendent" of.

That was enough information to write the example userstyle.

When that isn't enough information, turn off "View Style Information".

Highlight some text or an image, in the area you are trying to change.

That is, Left-Click, hold it, drag across the text, release left-click. Right-Click (context menu), "View Selection Source".

Firefox will show you this.

Highlight some text in the target container tag, and also some text outside of it, like this.

Usually, you will be given the entire page source, but again, the highlighted part is selected there, too.

With DOM Inspector, Inspect Context, and Web Developer Toolbar: Top of this page.

These images are an example of using Web Developer Toolbar, DOM Inspector, Inspect Context, and Stylish, together:

Use "CSS" -> "View Style Information", to activate a tool with a cross-hair cursor, and red border box, which indicates the HTML tag element you are hovering over.

Take advantage of this to hover the correct page element.

Right-Click.

Chose "Inspect".

DOM Inspector has been opened, with the page element (tag) you were hovering already navigated to and selected.

Now, you can copy Stylish's selector suggestion by Right-Clicking the DOMi line.

I have pasted the selector into Stlyish.

Then, I trimmed the selector down to only the most important part of it.

If you used the entire selector Stylish gave you, the page you are styling will be more likely to break your style, by slightly changing only one part of what you have selected. Also, your style will be huge and slow.

Now, I have finished the selector, and given it the properties I wanted it to have.

For the ratings stars, there were 3 total images. Those same images are used on other pages, too, so I wrote selectors which can catch them all.

Then, I would move these finished CSS Rules into a @-moz-document domain("userstyles.org")

Not with CSS.

Currently, @-moz-document does not allow complex expressions, such as you would need to exclude a URL that falls in the domain you selected to style.

Greasemonkey is the cure.

I'm working on a script, Greasy Black, which, amongst other things, lets you define domains and URLs in which to add a class name to those pages, and features the often requested domain and URL exclusion not found in @-moz-document.

An example of the script in action, can be seen by pairing it with this userstyle: greasy black - google 2008 ( ALL except GMail ).

Configure the script by adding lines like these:

/* A list of common class names to reuse.
*/
var class_list = new Array();

class_list['default'] = 'greasy-black';

class_list['apacheError'] = 'apacheError';
class_list['google'] = 'bigBroother';
class_list['daytime'] = 'day';
class_list['another'] = 'anotherclassnamehere';

// Domains or URLs that you want to include.
do_class['google.com'] = class_list['google'];
do_class['customize.likethis.etc'] = 'yourclassnamehere';
do_class['anotherone.etc'] = class_list['another'];

// Domains or URLs that you want to exclude.
// No wildcards here.
// For URLs, this behaves just like @-moz-document url-prefix
dont_class['mail.google.com'] = true;
dont_class['http://maps.google.'] = true;
dont_class['butnotthis.anotherone.etc'] = true;
dont_class['http://anotherone.etc/and/not/this/either/'] = true;

td[bgcolor="#000080"]{background-color:green!important}

Selects: <td bgcolor="000080">

Selectoracle says:
Selects any td element with a bgcolor attribute that equals #000080.

Read: Selectors.

Learn: HTML.