Code for various Firefox elements?

edited December 2013 in Style Development
I'm changing the fonts in Firefox. So far I only have the code for the window (as in window {font-size: 5.5mm !important; font-family: helvetica !important;}), and menu (menubar, menubutton, menulist, menu, menuitem). I want to be able to change the font for the options window and other windows of that type, add-ons page, and tooltips. I've tried " tooltip, " but, oddly, that only worked for one tooltip, and all the rest remained unchanged. So I need something that will work for all tooltips.

Thanks,
Ellen

Comments

  • "Decibelle", eh? If you're one-tenth belle, what's the other nine-tenths?

    Two questions:
    1. Are you peering at the Firefox user interface directly with DOM Inspector, or are you making educated guesses as to the identity of the chrome elements?
    2. Did you declare a default @namespace in your style, and if so is it the XUL namespace? You see, all tooltips seem to be affected by this:
      @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

      tooltip {color: magenta !important}
  • Take a look at this thread for some useful pointers: http://forum.userstyles.org/discussion/29057/helpful-css-links/p1
  • >"Decibelle", eh? If you're one-tenth belle, what's the other nine-tenths?<

    I'm sorry, but I'm not at liberty to reveal that information. ;>)

    Answers to your 2 questions

    1. Educated guesses, so to speak.

    2. No, I didn't try that. Clearly, it works. Thanks for that pointer.

    I'm just sort of stumbling around at the moment, because I haven't yet had the time to really delve into this stuff.

    I managed to come up with something that so far covers everything but the pages like Add-Ons and Troubleshooting. I'm using a combination of a couple of things I already knew, and some names of elements I got here: http://userstyles.org/styles/65013/dust-options-windows-aero-glassbutton .

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

    tooltip {font-size: 6.5mm !important; font-family:

    aerolite !important;}

    #btUrlText {font-size: 6.5mm !important; font-family:

    aerolite !important;}

    window {
    font-size: 6.5mm !important;
    font-family: aerolite !important;
    }

    menubar, menubutton, menulist, menu, menuitem {
    font-family: aerolite !important;

    font-size: 6.5mm !important;
    }

    prefpane {
    font-family: aerolite !important;

    font-size: 6.5mm !important;
    }

    radiogroup {
    font-family: aerolite !important;

    font-size: 6.5mm !important;
    }

    radio[pane] {
    font-family: aerolite !important;

    font-size: 6.5mm !important;
    }

    button {
    font-family: aerolite !important;

    font-size: 6.5mm !important;
    }
  • http://userstyles.org/styles/72039/about-concrete ← covers chrome pages (like about:troubleshooting, etc.)
    For addons manager just search, there is a truck load plus some of styles available.

    If you'd click the link vasa1 gave you above, you'd discover tools to use to help you with IDs and proper css.
  • Thanks for that link.
  • edited December 2013
    I'm sorry, but I'm not at liberty to reveal that information. ;>)
    OK then, one-tenth not-at-liberty belle, nine-tenths enigma.

    Let's eliminate the guesswork.

    You can inspect the Firefox user interface directly with DOM Inspector. (Which is not the same Inspector as in the Web Developer menu.)
    https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/

    Open DOMi. The document object model of the webpage you were just looking at is displayed as a tree in the left column. From the menu select File > Inspect Chrome Document > title-of-the-browser-page. Now the DOM of the entire browser is displayed in the left column, all the browser furniture, all the tabs, all the pages in those tabs, everything.

    Click the icon in the upper-left corner of DOMi, the one with a pointer on it, then click anywhere in the browser to select an element; that element will be highlighted in the left column. Right-click the highlighted entry to display a context menu: "Copy Selector" suggests selectors for the element, "Set Pseudo-classes..." lets you switch on :hover.

    In the right column are attributes of that node (class, id, etc.). Select "CSS Rules" from the drop-down list at the top of the column to see every rule that targets the element (top pane); click a rule to see which property values it sets (bottom pane). "Computed Style" lists all the winning property values, "Box Model" summarizes the element's size and position.

    Notice that the browser itself is a document with its own URI, chrome://browser/content/browser.xul, which can be used in @document just like any other URI to restrict rules to the browser (or to DOMi, or the editor, or any other part of the browser).

    Most of the browser chrome is XUL, but some, such as the Stylish editor, is HTML embedded in XUL.
    https://developer.mozilla.org/en-US/docs/XUL
  • Thanks very much for the detailed introduction. It's a lot to absorb for a mere aspiring geek like me, but I'm looking forward to being able to spend more time familiarizing myself with everything. I've added it to my list of steps toward world DOMi-nation.
  • the best discussion I've seen this old year.
    Oscar 2013 goes to: decibelle and hideheader.
Sign In or Register to comment.