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

customize urlbar

more options

I'm using a userstyles skin that makes FF look like MS' new Edge browser.

I have this one thing that I can't figure out. I want to remove that vertical separator in the url bar between the reload button and actual urlbar, or at least put a little bit of padding in between as it looks cramped now.

Can't figure out the code. See attached.

Thanks.

I'm using a userstyles skin that makes FF look like MS' new Edge browser. I have this one thing that I can't figure out. I want to remove that vertical separator in the url bar between the reload button and actual urlbar, or at least put a little bit of padding in between as it looks cramped now. Can't figure out the code. See attached. Thanks.
Attached screenshots

All Replies (12)

more options

Can you post the rules that you currently use to style the urlbar?

more options

Do you use Classic Theme Restorer or another extension to split out the back and reload buttons? It's possible the extension also replaces the address bar and thus the selector names would need to be researched on a similarly configured Firefox.

more options

Hi guys,

I'm not using any add-on or theme, just that one userstyles theme.

This is the CSS code entirely:

http://pasted.co/e9bb8718

more options

OMG, had no idea this was possible.

Anyway, the vertical bar is right-side border on the reload button, so:

#urlbar-reload-button {
  border-right:none!important;
}
more options

Awesome that works thanks!

more options

I think it's bad to hide the site identity button (i.e., padlock, globe, etc.). You can bring it back by editing this

#identity-box {
    display: none;
}

to

#identity-icon-labels {
    display:none;
}

But to flatten the color requires numerous tweaks to the section of the style labeled:

/* Restore classic colors for verified identity and verified domain */

Actually, there seem to be two copies of that section, which could explain why I was having such a hard time. Sheesh.

more options

I use code to show the label on hover.

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

Thanks guys.

Just one thing. The separator is still there during refreshing the page, then disappears when it's done loading the page. How can I hide it during the refresh?

As for the padlock/symbols, yes good idea. Although it looks ugly with the colors.

more options

You can expand the earlier rule to cover the two other incarnations of that button:

#urlbar-reload-button, #urlbar-stop-button, 
#urlbar-go-button {
  border-right:none!important;
}

The changes to remove the color behind the locks are toward the end of the style:

#urlbar .verifiedDomain {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -moz-border-end-color: hsla(215, 54%, 33%, .2) !important;
    color: hsl(215, 54%, 33%) !important;
}

#urlbar .verifiedIdentity {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    -moz-border-end-color: hsla(92, 81%, 16%, .2) !important;
    color: #2f6600 !important;
    font-weight: bold !important;
}
more options

Thank you.

Something weird is going on, seems like daily my style gets overwritten or reset back to default. I have no idea why?

more options

Possibly updating from [userstyles.org]??

Try saving it under a different name and disabling the original in case that's the problem.

Modified by jscher2000 - Support Volunteer

more options

Assuming it's this one, it shows an update today: https://userstyles.org/styles/117309/windows-10-firefox-theme