How to modify the url indicator on the bottom of the Firefox window?

edited May 2017 in Style Requests Firefox
Does anyone know how to modify the url indicator on the bottom of the Firefox window that shows the URL of the link the cursor is current hovered over?

This is sometimes referred to as a tooltip.

Comments

  • edited May 2017 Firefox
    Like this.
    /* AGENT_SHEET */
    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
    @-moz-document url(chrome://browser/content/browser.xul) {
    
    statuspanel {
      [[[YOUR STYLE HERE]]]
    }
    
    }
  • strel said:

    Like this.

    /* AGENT_SHEET */
    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
    @-moz-document url(chrome://browser/content/browser.xul) {
    
    statuspanel {
      [[[YOUR STYLE HERE]]]
    }
    
    }
    Thank you! Very much appreciated. BTW, for some reason, I didn't need to define it as an AGENT_SHEET. Do you know why not, or if in this case, which is the better practice?

    Also, I only needed to define the namespace, but did not need to define the @-moz-document. Again, do you know which is the best practice and why?

    Trying to learn all the ins and outs, and the AGENT_SHEET and document specifier (for browser UI modifications) seem to be the most confusing.
  • edited May 2017 Firefox
    strel said:
    Thank you. I have previously read all that, but it's clearly time for me to read it all again. If you (or anyone else) have any other good resources, or any caveats, I'm very open to them.

    With AGENT_SHEET defined, I cannot change the font-family for the statuspanel. How can that be accomplished?
  • @styling Do you have preference for not allowing site own fonts active in FF Options?
  • styling said:

    With AGENT_SHEET defined, I cannot change the font-family for the statuspanel.

    statuspanel { font: bold italic 16px sans-serif !important;}
    just one line, seems working w/o `AGENT SHEET` and `@moz-document`
    strel said:

    Do you have preference for not allowing site own fonts active in FF Options?

    var prefName = "browser.display.use_document_fonts"; // Integer .
    and there is a custombutton for switching fonts
  • edited May 2017 Firefox
    styling said:


    With AGENT_SHEET defined, I cannot change the font-family for the statuspanel. How can that be accomplished?

    I use this code in my personal style.
    Maybe you like it:
    /*AGENT_SHEET*/
    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

    .statuspanel-label {border: none !important; background: rgba(80%, 80%, 80%, 0.6); font-size: 13px; text-shadow: 1px -1px 0 #ededed;
    color: #121212; border-radius: 4px 4px 0 0; padding-top: 0; padding-bottom: 1px}
  • I was told in a different thread never to use @namespace in my styles. My update to remove it wasn't rejected, so I think you are free to edit it out (unless something has changed...).

    https://forum.userstyles.org/discussion/51260/namespace-change-consequences
  • edited May 2017 Firefox
    It turns out a different selector was needed... see below.
  • edited May 2017 Firefox

    styling said:

    With AGENT_SHEET defined, I cannot change the font-family for the statuspanel.

    statuspanel { font: bold italic 16px sans-serif !important;}
    just one line, seems working w/o `AGENT SHEET` and `@moz-document`
    Right, but this does not change the font-family (the actual font)... that's what I need to do, and I haven't been able to get it working... EDIT: see next post!
  • edited May 2017 Firefox
    João. said:

    styling said:


    With AGENT_SHEET defined, I cannot change the font-family for the statuspanel. How can that be accomplished?

    I use this code in my personal style.
    Maybe you like it:
    /*AGENT_SHEET*/
    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

    .statuspanel-label {border: none !important; background: rgba(80%, 80%, 80%, 0.6); font-size: 13px; text-shadow: 1px -1px 0 #ededed;
    color: #121212; border-radius: 4px 4px 0 0; padding-top: 0; padding-bottom: 1px}
    Thank you. That can be modified to change the font-family. Thank you! :)
  • João. said:

    styling said:


    With AGENT_SHEET defined, I cannot change the font-family for the statuspanel. How can that be accomplished?

    I use this code in my personal style.
    Maybe you like it:
    /*AGENT_SHEET*/
    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

    .statuspanel-label {border: none !important; background: rgba(80%, 80%, 80%, 0.6); font-size: 13px; text-shadow: 1px -1px 0 #ededed;
    color: #121212; border-radius: 4px 4px 0 0; padding-top: 0; padding-bottom: 1px}
    This works a treat! Thank you. :)

    Is it possible to only apply the style if the statuspanel text begins with specific characters, such as "https"?
  • Yes, in this case:
    .statuspanel-label[value^="https://"] { [your code] }
  • João. said:

    Yes, in this case:

    .statuspanel-label[value^="https://"] { [your code] }
    Thank you!
Sign In or Register to comment.