How do I clean up the address bar?
Some websites take up a good deal of room when I go to their pages. I don't mind an icon, or even one word, but someties there's little room left to see the URL when I want to check it or type another. How do I get rid of those pesky long IDs?
Also, I've managed to get rid of several of the icons, but I know there's a way to combine them all with only the star showing unless I mouseover or actually ask to see them. The last FF update took that away and I can't find mention of it anywhere and can't remember where I found it. Can someone direct me there?
Chosen solution
Hi rosawood, this also sounds like a style rule "hack."
Also, I've managed to get rid of several of the icons, but I know there's a way to combine them all with only the star showing unless I mouseover or actually ask to see them. The last FF update took that away and I can't find mention of it anywhere and can't remember where I found it. Can someone direct me there?
Did your Firefox perform a Refresh? Check your Desktop for a folder named Old Firefox Data and you may find everything inside, including an old userChrome.css file.
Otherwise, maybe it was your thread here: https://support.mozilla.org/questions/1216541
Read this answer in context 👍 1All Replies (10)
Hi rosawood, on the first point, the sites where you see the company name have purchased an Extended Validation (EVSSL) certificate. There isn't a checkbox or setting to hide the company name, but it involves a technique you might heard of before: a userChrome.css file.
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.
Modified
Chosen Solution
Hi rosawood, this also sounds like a style rule "hack."
Also, I've managed to get rid of several of the icons, but I know there's a way to combine them all with only the star showing unless I mouseover or actually ask to see them. The last FF update took that away and I can't find mention of it anywhere and can't remember where I found it. Can someone direct me there?
Did your Firefox perform a Refresh? Check your Desktop for a folder named Old Firefox Data and you may find everything inside, including an old userChrome.css file.
Otherwise, maybe it was your thread here: https://support.mozilla.org/questions/1216541
Perfect! I never thought to look at my own history.
I personally like to see the EV label on hover to allow inspection:
/* Site Identity Button, EV: hide label */ #identity-box #identity-icon-labels {display:none} #identity-box:hover #identity-icon-labels {display:-moz-box}
I position the page actions container and the bookmarks star at the left end to have it easier visible with a width screen.
/* PAGE ACTION - left position */ #page-action-buttons {-moz-box-ordinal-group:0; border-right: 1px dotted gray} /* PAGE-ACTION - hide separator, show button after 1-sec hover */ #pageActionSeparator, #star-button-animatable-image {display: none !important} #page-action-buttons image:not(#star-button) { width: 0 !important; transition: all 1s ease-in-out; padding: 0px !important; } #page-action-buttons:hover image:not(#star-button) { width: 24px !important; transition: all 1s ease-in-out 1s; padding: 4px !important; }
Thanks for the help that's been posted. So far, though, no one has commented on the first problem mentioned, which is the long ID information on some websites. Is there way I can get rid of this?
We think when you refer to the ID you are referring to the name of the certificate owner, which appears in green text next to the lock. If that is what you mean, both cor-el and I commented on it. That's what this rule was for:
/* 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; }
The long ID information is likely about the EV label and there have been a few suggestions about hiding or removing this label (look for identity-icon-labels).
Can you attach a screenshot in cas we misunderstood?
- https://support.mozilla.org/en-US/kb/how-do-i-create-screenshot-my-problem
- use a compressed image type like PNG or JPG to save the screenshot
I must have missed that--obviously, I did miss that. I just added the code to my userChrome.css file and voilà!, all the extra verbiage is gone. Thank you.
Cor-el, I did include the screenshot on my original post. I apologize for the confusion--my confusion, as you'd answered and I didn't recognize that you were addressing that issue.
You're welcome.
What code did you go for in the end?
I used the pale green and the company name hide. I'm happy for them that they wanted to purchase a certificate and make themselves known, but they're not subtle at all. ;D. I just added the code to my userChrome.css file, which I already had for tabs on the bottom. Works great.