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

Support Forum

How do I clean up the address bar?

Posted

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?

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?
Attached screenshots

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 1
Quote

Additional System Details

Installed Plug-ins

  • Shockwave Flash 32.0 r0

Application

  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

More Information

jscher2000
  • Top 10 Contributor
8634 solutions 70613 answers

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.

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''' <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.

Modified by jscher2000

Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8634 solutions 70613 answers

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

Hi rosawood, this also sounds like a style rule "hack." <blockquote> 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? </blockquote> 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
Was this helpful to you? 1
Quote

Question owner

Perfect! I never thought to look at my own history.

Perfect! I never thought to look at my own history.
Was this helpful to you?
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17413 solutions 157281 answers

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;
}
I personally like to see the EV label on hover to allow inspection: <pre><nowiki>/* Site Identity Button, EV: hide label */ #identity-box #identity-icon-labels {display:none} #identity-box:hover #identity-icon-labels {display:-moz-box}</nowiki></pre> I position the page actions container and the bookmarks star at the left end to have it easier visible with a width screen. <pre><nowiki>/* 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; }</nowiki></pre>
Was this helpful to you?
Quote

Question owner

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?

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?
Was this helpful to you?
Quote
jscher2000
  • Top 10 Contributor
8634 solutions 70613 answers

Helpful Reply

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;
}
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: <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>
Was this helpful to you? 1
Quote
cor-el
  • Top 10 Contributor
  • Moderator
17413 solutions 157281 answers

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?

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
Was this helpful to you?
Quote

Question owner

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.

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

You're welcome.

What code did you go for in the end?

You're welcome. What code did you go for in the end?
Was this helpful to you?
Quote

Question owner

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.

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