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

How to minimize the DigiCert portion of the URL box?

  • 4 replies
  • 1 has this problem
  • 2 views
  • Last reply by cor-el

more options

For most websites, the URL box displays the info icon and the padlock icon, followed by the address itself. But for some sites, the name of the site appears next to the padlock at the expense of the address part of the box. And since it's possible to click the padlock to get the company name and other info, there is no reason to show the name. And because the rest of the address bar is reduced, it's difficult to edit the address on the fly (e.g. I want to change a single value in the url, but have to scroll to find it). There's nothing to grab to shrink it (like between the address and search boxes); nothing on right-click; can't find any extensions that address it; DigiCert website was not helpful; internet search turned up nothing... How do I minimize this unwanted "feature"?!?

For most websites, the URL box displays the info icon and the padlock icon, followed by the address itself. But for some sites, the name of the site appears next to the padlock at the expense of the address part of the box. And since it's possible to click the padlock to get the company name and other info, there is no reason to show the name. And because the rest of the address bar is reduced, it's difficult to edit the address on the fly (e.g. I want to change a single value in the url, but have to scroll to find it). There's nothing to grab to shrink it (like between the address and search boxes); nothing on right-click; can't find any extensions that address it; DigiCert website was not helpful; internet search turned up nothing... How do I minimize this unwanted "feature"?!?
Attached screenshots

Chosen solution

When a site has an Extended Validation SSL certificate (EVSSL), which proves that the organization listed in the certificate really is the owner, then Firefox displays the organization name next to the lock. In some cases, it does take up way too much space.

There is no built-in setting to hide that, but you can do it by creating an optional settings file named userChrome.css, with a style rule to hide that label. If you aren't familiar with that, when you have 10 minutes to spare, this is how you set it up:

This assumes you do not already have a userChrome.css file. If you do already have a working userChrome.css file, you just need to add the rule under (A) to your file.

(A) Select and copy the following style rule code

/* Hide company name for EVSSL certs */
#identity-box.verifiedIdentity #identity-icon-labels {
  display: none !important;
}
/* Use pale green background for EVSSL certs */
#identity-box.verifiedIdentity {
  background-color: #cfd !important;
}

(B) Generate and download a userChrome.css file

Open the following page and paste the above rules into the editor, replacing the sample rule:

https://www.userchrome.org/download-userchrome-css.html

Then click "Generate CSS File" and save the userChrome.css file to your computer. (See first attached screenshot)

Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See second attached screenshot)

Minimize that Windows Explorer window for later reference.

(C) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

There are boring videos for Windows and Mac if you like videos.

(D) Move the userChrome.css file you generated in Step B into the chrome folder you created in Step C

The next time you exit Firefox and start it up again, it should discover that file and apply the rules. "Before and after":

Read this answer in context 👍 1

All Replies (4)

more options

Chosen Solution

When a site has an Extended Validation SSL certificate (EVSSL), which proves that the organization listed in the certificate really is the owner, then Firefox displays the organization name next to the lock. In some cases, it does take up way too much space.

There is no built-in setting to hide that, but you can do it by creating an optional settings file named userChrome.css, with a style rule to hide that label. If you aren't familiar with that, when you have 10 minutes to spare, this is how you set it up:

This assumes you do not already have a userChrome.css file. If you do already have a working userChrome.css file, you just need to add the rule under (A) to your file.

(A) Select and copy the following style rule code

/* Hide company name for EVSSL certs */
#identity-box.verifiedIdentity #identity-icon-labels {
  display: none !important;
}
/* Use pale green background for EVSSL certs */
#identity-box.verifiedIdentity {
  background-color: #cfd !important;
}

(B) Generate and download a userChrome.css file

Open the following page and paste the above rules into the editor, replacing the sample rule:

https://www.userchrome.org/download-userchrome-css.html

Then click "Generate CSS File" and save the userChrome.css file to your computer. (See first attached screenshot)

Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See second attached screenshot)

Minimize that Windows Explorer window for later reference.

(C) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

There are boring videos for Windows and Mac if you like videos.

(D) Move the userChrome.css file you generated in Step B into the chrome folder you created in Step C

The next time you exit Firefox and start it up again, it should discover that file and apply the rules. "Before and after":

more options

You can add a second rule to display the label when you hover the identity container.

/* URLBAR - SiteIdentity: EV */
#identity-box.verifiedIdentity {background-color:#cfd !important}

#identity-box       #identity-icon-labels {display:none}
#identity-box:hover #identity-icon-labels {display:-moz-box}
more options

Thank you, jscher2000 & cor-el! I suspected the answer was creating the userChrome.css file, but as I could not "Inspect Element" on the address bar, had no idea what needed to be added. Much appreciated!!!

more options

You can use the Browser Toolbox. You can enable the Browser Toolbox via the developer tools settings page.