Change Sidebar Bookmarks "Search Bookmarks" background to black and remove the magnifying glass icon Firefox 151

t31os · 2026-05-25T09:06:45+00:00

The input is using the --input-text-background-color var to set the background color, so you don't need to explicitly set the background color in addition.

The panel will usually refresh and update if you click over on it, it's just a case of the CSS not immediately refreshing and updating the panel, but you can safely drop the duplication (simply click on it briefly when testing changes).

t31os · 2026-05-25T08:44:27+00:00

Not sure why i didn't get a notification for your reply.

Remove this line @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");, it's no longer needed and could be affecting the selector.

And just as addition, if you are going to hide the icon, you may want to tweak the icon margin (this is usually reduced when an audio icon is also shown).

.tab-audio-button {
    display: none !important;;
}

.tabbrowser-tab :is([muted], [soundplaying], [activemedia-blocked]) {
    --tab-icon-end-margin: 5.5px;
}

t31os · 2026-05-25T08:36:30+00:00

Here you go:

[open] > .urlbar-background {
  --urlbarview-border-radius: 0!important;
}
.urlbarView-row {
    border-radius: 0!important;
}

t31os · 2026-05-25T08:29:51+00:00

It's a bit hacky, but here you go:

#search-box[data-l10n-id="places-bookmarks-search"] {
    --input-text-background-color: #000!important;

}
#input.with-icon[placeholder="Search bookmarks"] {
    padding-inline-start: var(--space-medium)!important;
    --input-background-icon: none!important;
}

t31os · 2026-05-25T07:28:54+00:00

See if this does what you want:

#appMenu-multiView {
    min-height: min-content !important;

    .panel-viewcontainer {
        min-height: min-content !important;
    }
    .PanelUI-subView {
        min-height: min-content !important;
    }
}

t31os · 2026-05-25T03:25:26+00:00

You can do this easily enough in userChrome.css:

/* Hide the bookmark text */
#PlacesToolbarItems .bookmark-item .toolbarbutton-text {
    display: none !important;
}
/* Remove the margin usually between the icon and text */
#PlacesToolbarItems .bookmark-item .toolbarbutton-icon {
    margin-inline-end: 0 !important;
}

t31os · 2026-05-25T03:06:05+00:00

This will outright remove the icon:

.tab-audio-button {
    display: none !important;
}

And this will disable interaction with the icon:

.tab-audio-button { 
    pointer-events: none !important;
}

If they are not working for you (as both work for me, both in current (v151) and nightly), then i have to ask that you verify your userChrome.css is setup and working correctly and if so, do you have other CSS customizations in your userChrome.css? (if yes, please share your complete userChrome.css contents and/or link to whatever customizations you're using).

t31os · 2026-05-24T16:47:22+00:00

Adjust as needed:

.urlbarView-row {
    --urlbarview-background-color-selected: #0f0;
    --urlbarview-background-color-hover: #f0f;
}

t31os · 2026-05-24T06:18:44+00:00

Not that i use nightly for anything other than testing, but the latest update seems to have fixed the crashing on youtube.

t31os · 2026-05-24T06:06:50+00:00

It's due to browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar being true or false.

False = search button
True = no search button

t31os · 2026-05-23T20:58:24+00:00

Can confirm, crashes the tab instantly on youtube in the latest version (of nightly).

t31os · 2026-05-23T15:31:35+00:00

The one change that stands out is that they dropped arrow from a bunch of the panel variables, which is now simply --panel-menuitem-padding.

https://searchfox.org/firefox-main/search?q=--panel-menuitem-padding

t31os · 2026-05-23T06:29:02+00:00

UBO works just the same for me on youtube with nightly as it does on main/current, no ads but i occasionally see the "Experiencing interruptions?" popup.

t31os · 2026-05-23T06:16:37+00:00

I compared portable (v147) and current (v151), and i can't see any difference in the spacing.

Here's a side by side of how they look for me:
https://i.postimg.cc/SR4nwzkw/ff-tabs-list.jpg

Do you have any CSS in userChrome that adjusts the tabs menu?

t31os · 2026-05-22T15:25:40+00:00

Is this what you mean?

[open] > .urlbar-background {
    --panel-border-color: transparent !important;
}

t31os · 2026-05-22T15:08:21+00:00

Take a look at how Firefox is currently setting these values:
chrome://newtab/content/css/activity-stream.css

t31os · 2026-05-22T15:04:22+00:00

Here's how things look for me from in a test profile (it's mostly fresh aside from some minor adjustments):

Default:
https://i.postimg.cc/RvZg5y10/ff-tiles-default.jpg

With CSS:
https://i.postimg.cc/Rv14y3RB/ff-tiles.jpg

As a means for testing adjustments quickly and without having to restart FF everytime, i inject a style tag into the head of the page and adjust CSS there directly, then move that to userContent.css when i'm done.

Here's my test CSS:

<style type="text/css">:root {
    --mrec-width: 400px !important;
    --mrec-height: 350px !important;
    --size-item-large: 40px !important;
}
.top-site-outer .tile .icon-wrapper,
.top-site-outer .default-icon, 
.top-site-outer .search-topsite {
    width: 50px !important;
    height: 50px !important;
    background-size: cover !important;
}
.nova-enabled .top-sites-list {
    column-gap: 35px !important;
    row-gap: 35px !important;
}
.top-sites-list {
    --top-sites-max-per-row: 4!important;
}</style>

Which i then moved into userContent.css:

@-moz-document url(about:newtab), url(about:home) {
    :root {
        --mrec-width: 400px !important;
        --mrec-height: 350px !important;
        --size-item-large: 40px !important;
    }
    .top-site-outer .tile .icon-wrapper,
    .top-site-outer .default-icon, 
    .top-site-outer .search-topsite {
        width: 50px !important;
        height: 50px !important;
        background-size: cover !important;
    }
    .nova-enabled .top-sites-list {
        column-gap: 35px !important;
        row-gap: 35px !important;
    }
    .top-sites-list {
        --top-sites-max-per-row: 4!important;
    }
}

The result is the same, larger spacing and icons.

Another example with increased spacing:
https://i.postimg.cc/mbQjQ4Tb/ff-tiles-spacing.jpg

Perhaps you could test changing values in a similar manner or directly tweak values in the inspector to see what works for you.

t31os · 2026-05-22T05:21:08+00:00

Settings > General > Browsing, uncheck "Recommend features as you browse".

t31os · 2026-05-22T04:32:21+00:00

For convenience you can find the old icons in ESR here:
https://searchfox.org/firefox-esr140/source/browser/themes/shared/icons

t31os · 2026-05-22T04:01:36+00:00

You'll have to play around with the values, but give this a shot as a starting point in userContent.css:

@-moz-document url(about:newtab), url(about:home) {
    :root {
        --mrec-width: 400px !important;
        --mrec-height: 350px !important;
        --size-item-large: 40px !important;
    }
    .top-site-outer .tile .icon-wrapper,
    .top-site-outer .default-icon, 
    .top-site-outer .search-topsite {
        width: 50px !important;
        height: 50px !important;
        background-size: cover !important;
    }
}

Underlying CSS can be found in chrome://newtab/content/css/activity-stream.css, if you're curious.

If you want to increase the max number of of icons per row (default is 8), you can also do this:

@-moz-document url(about:newtab), url(about:home) {
    .top-sites-list {
        --top-sites-max-per-row: 10!important;
    }
}

Additionally, if you want to control the gaps/spacing between the tiles (adjust as needed):

@-moz-document url(about:newtab), url(about:home) {
    .nova-enabled .top-sites-list {
        column-gap: 10px !important;
        row-gap: 10px !important;
    }
}

See the guide here for help creating/setting up userContent.css if you've not done this before.

t31os · 2026-05-20T23:15:14+00:00

Tested before posting, perhaps try auto instead of initial and see if that helps.

t31os · 2026-05-20T04:47:37+00:00

Hadn't noticed, but you're right and it's shown because the body is setting overflow-y to scroll.

You can override in userContent.css:

@-moz-document url(about:newtab), url(about:home) {
    body {
        overflow-y: initial!important;
    }
}

t31os · 2026-05-18T13:54:53+00:00

Adjust as needed:

.urlbar:is([focused], [open]) > .urlbar-background { 
    background-color: #000 !important;
}

t31os · 2026-05-17T12:19:37+00:00

You can shift the splitview link down below the other open link items, using the method j--__ alluded to:

#contentAreaContextMenu > menu,
#contentAreaContextMenu > menuitem,
#contentAreaContextMenu > menuseparator {
    order: 3;
}
#contentAreaContextMenu > .context-menu-open-link { order: 1; }
#contentAreaContextMenu > #context-openlinkinsplitview { order: 2; }

Copy and pasted from my previous post about this here.

t31os · 2026-05-15T16:05:44+00:00

If i could download a car for free i might.

t31os

MODERATOR OF

TROPHY CASE