Avatar for Username

Caută ajutor

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.

Află mai multe

Acest fir de discuție a fost arhivat. Adresează o întrebare nouă dacă ai nevoie de ajutor.

Cannot style any children of .urlbarView.megabar in userChrome.css in Firefox 75

  • 5 răspunsuri
  • 1 are această problemă
  • 1 vizualizare
  • Ultimul răspuns de Alec Mev

Alec Mev
Alec Mev
more options

My userChrome.css: 

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
.tab-line { display: none !important }
.urlbarView-body-inner { border-top: unset !important }
#urlbar-results { background: red !important }

The ".tab-line" rule is applied, the ".urlbarView-body-inner" and "#urlbar-results" rules aren't. Can anybody reproduce? What's wrong?

My userChrome.css: @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); .tab-line { display: none !important } .urlbarView-body-inner { border-top: unset !important } #urlbar-results { background: red !important } The ".tab-line" rule is applied, the ".urlbarView-body-inner" and "#urlbar-results" rules aren't. Can anybody reproduce? What's wrong?

Modificat în de Alec Mev

Soluție aleasă

The Browser Toolbox shows that these element are inthe HTML namespace and thus need to be placed above the @namespace line. 

.urlbarView-results {background: red !important;}

.urlbarView.megabar .urlbarView-body-inner {border-top: unset !important;}
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
Citește acest răspuns în context 👍 1

Toate răspunsurile (5)

Wesley Branton
Wesley Branton
more options

You are looking for the urlbarView-row class items.

Alec Mev
Alec Mev Deținătorul întrebării
more options

I want to get rid of the 1px border at the top of the megabar. It's styled like so in browser.css: 

.urlbarView.megabar .urlbarView-body-inner {
    width: 100%;
    border-top: 1px solid var(--urlbar-separator-color);
}

I'm trying to cancel out border-top by adding this to userChrome.css: 

.urlbarView-body-inner {
    border-top: unset !important;
}

But there's no effect, the rule isn't even listed in the Rules of ".urlbarView-body-inner" in Browser Toolbox.

Modificat în de Alec Mev

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Soluție aleasă

The Browser Toolbox shows that these element are inthe HTML namespace and thus need to be placed above the @namespace line. 

.urlbarView-results {background: red !important;}

.urlbarView.megabar .urlbarView-body-inner {border-top: unset !important;}
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
Wesley Branton
Wesley Branton
more options

Either one of the following CSS codes work for me: 

.urlbarView-body-inner {
    border-top: unset !important;
}

or 

.urlbarView-body-inner {
    border-top: none !important;
}

Is this your first time working with userChrome.css modifications? Maybe you need to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true in the about:config page so that Firefox reads the CSS file. See Firefox Changes Breaking userChrome.css for more information.

Alec Mev
Alec Mev Deținătorul întrebării
more options

Thanks, cor-el! That was it.

Done some more googling, and looks like @-moz-document should be used instead of @namespace for scoping, to avoid silly issues like this.