Editing the ATE through the Stylish add-on

I'm pretty used to the way the ATE looks at the moment, but maybe you want to be able to change things a bit. But how best to do this? If you edit RTSE's code directly, you'll lose your changes every time I push out an update.

That's where Stylish comes in.

Stylish is a Firefox add-on that lets you create custom stylesheets using basic CSS syntax. It's usually used to change the appearance of specific webpages, but it can also be used to change the appearance of parts of the browser. This post will show how you can use Stylish to modify the appearance of RTSE's ATE.

To begin, make sure you have Stylish installed. Once you have it installed and have restarted your browser, there should be a new icon down in Firefox's statusbar. (It looks like the letter "S".) Right-click that icon, and choose "Write new style -- Blank style" from the menu that appears. This should bring up a window with a few textboxes.

Enter a name for your new style. Make sure it's something somewhat unique. I've never really tagged any of my styles, but I guess it'd help for searching through all of your styles if you have a lot of them installed.

Now comes the fun part.

In the large textbox, paste the following:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

@-moz-document url(chrome://browser/content/browser.xul) {
}

It's very important that you include this part, as it's what tells Stylish what thing your style is supposed to be applied to.

The @namespace line says that it will be applied to some XUL elements. (Most of Firefox's interface is written in XUL, so if you're restyling parts of the browser, this is what you'll be using.)
The @-moz-document line specifies what exact file you are wanting to change. In this case, we are modifying browser.xul. (To spare you a lot of explaining, I'll just tell you that browser.xul is where RTSE's ATE has been inserted into.)

Now that we have that all set up, it's time to actually write our new stylesheet. Everything you want to edit will be placed between the two curly brackets {}.

If you already know how to write stylesheets with CSS, this should all be very familiar to you, but you might want to read part of it anyway, as it differs slightly from the normal way you make them.

I'll just post an example of some CSS, and then I'll explain it.

  #rtse-editor-body {
    -moz-appearance: none !important;
    font-size:30px !important;
  }

The first line defines what element(s) are going to be affected by the rules that it contains. You can read up on CSS selectors elsewhere, so I won't go into it much here, other than to say that if it begins with #, it tries to find an element with that specific id. So in this case, it's looking for an element with the id set to "rtse-editor-body".

The second line will be something that every single rule you make for RTSE's ATE will have to contain. It basically allows the CSS rules to apply to the elements, as they normally are styled through Firefox's own rules.

The third line (and anything else contained within the element selection's brackets) are the actual CSS rules. In this case, we're setting the ATE's text body's font size to be 30 pixels. (The "!important" bit helps make sure that the rule is actually applied, and isn't overridden by anything else.)

So, if you copied all of that over to Stylish correctly, it should look something like this:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

@-moz-document url(chrome://browser/content/browser.xul) {
  #rtse-editor-body {
    -moz-appearance: none !important;
    font-size:30px !important;
  }
}

If you click Stylish's "Preview" button, and then switch over to a Rooster Teeth site page and open up the ATE, the text body element should be much larger, and if you type in it, the text itself will be larger as well.
The original ATE:

The restyled ATE:

I'll post a list of most (if not all) ATE elements that can be selected for restyling later on, but I'll end this post with an example of how to completely (albeit in a very ugly way) restyle the ATE.

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

@-moz-document url(chrome://browser/content/browser.xul) {
  #rtse-editor-body {
    -moz-appearance: none !important;
    background-color: #354f5a !important;
  }

  #rtse-poll-answer-2 {
    -moz-appearance: none !important;
    background: #FFFFFF url(chrome://rtse/skin/images/global/log.png) no-repeat 4px 4px !important;
    padding: 4px 4px 4px 22px !important;
  }

  .rtse-editor-button {
    -moz-appearance: none !important;
    background: #00FF00 !important;
  }

  #rtse-realtime-editor {
    -moz-appearance: none !important;
    background: #4466AA !important;
  }

  #rtse-editor-sponsorSmilies {
    -moz-appearance: none !important;
    background: #EEEEEE !important;
  }
}

Copy that over into a blank Stylish style, and see what the ATE looks like after you apply it! (You can disable or uninstall any Stylish styles by right-clicking the Stylish icon and going in to "Manage Styles".)