X
Tap here to go to the mobile version of the site.

Support Forum

How to minimize the DigiCert portion of the URL box?

Posted

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
Quote

Additional System Details

Installed Plug-ins

  • NPRuntime Script Plug-in Library for Java(TM) Deploy
  • Next Generation Java Plug-in 11.181.2 for Mozilla browsers
  • Shockwave Flash 29.0 r0

Application

  • User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:56.0) Gecko/20100101 Firefox/56.0 Waterfox/56.2.10

More Information

jscher2000
  • Top 10 Contributor
8632 solutions 70597 answers

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":

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''' <pre>/* 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; } </pre> '''(B) Generate and download a''' <code>userChrome.css</code> '''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''' <code>chrome</code> '''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''' <code>userChrome.css</code> '''file you generated in Step B into the''' <code>chrome</code> '''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": <img src="https://user-media-prod-cdn.itsre-sumo.mozilla.net/uploads/images/2019-07-22-14-50-14-5d9e78.png" width="500">
Was this helpful to you? 1
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17407 solutions 157253 answers

Helpful Reply

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}
You can add a second rule to display the label when you hover the identity container. <pre><nowiki>/* 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}</nowiki></pre>
Was this helpful to you? 1
Quote

Question owner

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!!!

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!!!
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17407 solutions 157253 answers

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

You can use the Browser Toolbox. You can enable the Browser Toolbox via the developer tools settings page. *https://developer.mozilla.org/en-US/Tools/Settings *https://developer.mozilla.org/en-US/Tools/Browser_Toolbox
Was this helpful to you?
Quote
Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.