How to minimize the DigiCert portion of the URL box?
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"?!?
الحل المُختار
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":
All Replies (4)
الحل المُختار
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":
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}
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!!!
You can use the Browser Toolbox. You can enable the Browser Toolbox via the developer tools settings page.