Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Customize color of ssl padlock firefox and its associated text

  • 2 replies
  • 2 have this problem
  • 1 view
  • Last reply by firezombie

more options

The section on the left of the URL bar contains a padlock when a site using SSL is loaded, sometimes there is also text associated to it.

How do I customize the color of the text associated to this and the font size?

For example when loading https://support.mozilla.org/en-US/ you will see what I mean, it takes a lot of space and I would like to customize both color and font size.

The section on the left of the URL bar contains a padlock when a site using SSL is loaded, sometimes there is also text associated to it. How do I customize the color of the text associated to this and the font size? For example when loading https://support.mozilla.org/en-US/ you will see what I mean, it takes a lot of space and I would like to customize both color and font size.

All Replies (2)

more options

Maybe consider to use code in userChrome.css to only show the label on hover if you think that it takes too much space. You can also move the search bar to the "3-bar" menu button drop-down list via Customization mode or via the right-click context menu of the magnifier icon (Move to Menu) to have more room for the location bar.


Add code to the userChrome.css file below the default @namespace line.


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

/* Site Identity Button, EV: hide label */
#identity-box #identity-icon-labels {display:none !important}
#identity-box:hover #identity-icon-labels {display:-moz-box !important}

  • create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
  • use a plain text editor like Notepad to create a (new) userChrome.css file in the chrome folder (file name is case sensitive)
  • paste the code in the userChrome.css file in the editor window
  • make sure that the userChrome.css file starts with the default @namespace line
  • make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userChrome.css.
    otherwise Windows may add a hidden .txt file extension and you end up with a not working userChrome.css.txt file

You can use the button on the "Help -> Troubleshooting Information" (about:support) page to go to the current Firefox profile folder or use the about:profiles page.

more options

thank you that solved one problem, but i still would like to change the color or the icon of the padlock, or hide the padlock alltogether.