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

Firefox 115.8.0esr - Need userchrome.css content for highlighting backgroung color of bookmarks in dropdown

more options

Hi Firefox Community -

I am using Firefox 115.8.0esr version. I had previous userchrome.css from older versions of firefox from 5 years back which does not work anymore.

Need userchrome.css content for highlighting background color of bookmarks in dropdown.

Can you someone provide me with this userchrome.css snippet to high bookmarks with background color in URL dropdown box?

Thanks - Tarun!!

Hi Firefox Community - I am using Firefox 115.8.0esr version. I had previous userchrome.css from older versions of firefox from 5 years back which does not work anymore. Need userchrome.css content for highlighting background color of bookmarks in dropdown. Can you someone provide me with this userchrome.css snippet to high bookmarks with background color in URL dropdown box? Thanks - Tarun!!

All Replies (9)

more options

Hi Tarun, I'm not sure I understand what you need. Is this for a bookmark menu (for example, dropping from the Bookmarks Toolbar) or for the address bar Autocomplete/"Firefox suggest" list?

What does the background look like currently?

By the way, a good resource for personal assistance with userChrome.css rules is:

https://www.reddit.com/r/FirefoxCSS/

more options

Can you post your previously used code for userChrome.css, so we can see what you want to achieve?

more options

Thanks for the response.

Below is what I had which was working in older versions of firefox. I listed them by items.

Can you please review and let me know what changes are needed to make it work in latest firefox version?

In my case legacyuserprofilecustomizations is enabled and true.

My import variable in userchrome.css starting of the file is below line.

@import url(userChrome_Fx56_bookmark_icons.css);

Please let me know on what changes are needed.

Item 1 >>>>> 
===============
Below section is for Customizing search results background and foreground colors */

@import url(userChrome_Fx56_bookmark_icons.css);

#PopupAutoCompleteRichResult {
    background-color:black !important;
	font-family: Calibri !important;
    -moz-border-top-colors:black !important;
    -moz-border-top-colors:black !important;
    -moz-border-left-colors:black !important;
    -moz-border-right-colors:black !important;
}

Item 2 >>>> 
===============

/* Below section is for width and color of search results bar below address bar */

#PopupAutoCompleteRichResult .autocomplete-richlistbox {
    font-family: Calibri !important;
	height: 1000px !important; /* Original value which fits 14" laptop screen is 698px*/
	background-color:black !important;
}

#PopupAutoCompleteRichResult .ac-title-text,
#PopupAutoCompleteRichResult .ac-tags-text,
#PopupAutoCompleteRichResult .ac-action-text {
    font-family: Calibri !important;
	font-size: 14pt !important;
	color:white;
}

#PopupAutoCompleteRichResult .ac-url-text {
    font-family: Calibri !important;
	font-size: 13pt !important;
	font-style: italic !important;
	color:#6699FF;
}

#PopupAutoCompleteRichResult richlistitem:first-of-type[type*="heuristic"],
#PopupAutoCompleteRichResult richlistitem:first-of-type[actiontype="searchengine"],
#PopupAutoCompleteRichResult richlistitem:first-of-type[actiontype="visiturl"],
#PopupAutoCompleteRichResult richlistitem:first-of-type[actiontype="keyword"] 
{ background-color:#2F4F4F !important;
  font-family: Calibri !important;
}


>>>> Item 3
===============

Below were the other code parts I had to customize URL dropdown in firefox.

/****** Below code is highlighting bookmarks in url dropdown ******/

.autocomplete-richlistitem[type="bookmark"] /*background gun metal (dark grey) for bookmarks*/
{
background-color: #000040;
/*background: #000066 !important;*/
}

/****** Below code is highlighting line selected in url dropdown bar ******/

.autocomplete-richlistitem[selected=true] {
  background: #654321 !important;  
}

/****** Below code is highlighting line for mouse over in url dropdown bar ******/

#PopupAutoCompleteRichResult .autocomplete-richlistitem:hover {
 /*background: #FF6347 !important;*/
 background: #696969 !important;
 }

 /****** Below code is scrollbar in url dropdown bar ******/

 #PopupAutoCompleteRichResult .autocomplete-richlistbox > scrollbox {
   overflow-y: auto !important; 
   padding-right: 3px !important;
 }
 
/* Below is the code for listing the switch tab, then bookmarks, then history in url bar dropdown */

  #PopupAutoCompleteRichResult .autocomplete-richlistitem[type="switchtab"]{
    -moz-box-ordinal-group: 2;
  }
  #PopupAutoCompleteRichResult .autocomplete-richlistitem[type="bookmark"]{
    -moz-box-ordinal-group: 3;
  }
  #PopupAutoCompleteRichResult .autocomplete-richlistitem[type="favicon"]{
    -moz-box-ordinal-group: 4;
  }

Thanks - Tarun!!

Modified by cor-el

more options

I think this is an old style sheet from one of my sites:

@import url(userChrome_Fx56_bookmark_icons.css);

Hopefully that isn't causing the problem; I don't think it relates to background colors.

I think the selectors #PopupAutoCompleteRichResult , .autocomplete-richlistbox , .autocomplete-richlistitem became obsolete around Firefox 75 when the "megabar" styling rolled out. There was a setting in Firefox 75-76 to hold that back, so maybe that is why you're just seeing it now??

I think the successor selector for

#PopupAutoCompleteRichResult .autocomplete-richlistitem

would be

.urlbarView-row

but I haven't tested a rewrite with that selector.

more options

-moz-box-ordinal-group is no longer supported, instead use order with a value one less.

 #PopupAutoCompleteRichResult .autocomplete-richlistitem[type="switchtab"]{
   order: 1;
 }
 #PopupAutoCompleteRichResult .autocomplete-richlistitem[type="bookmark"]{
   order: 2;
 }
 #PopupAutoCompleteRichResult .autocomplete-richlistitem[type="favicon"]{
   order: 3;
 }

Only .ac-title-text and .ac-url-text seem to exist if I search the source code

You should no longer use selected=true, but use only selected.

.autocomplete-richlistitem[selected] {
more options

Thanks guys for the response. I am not a CSS developer or expert. userchrome.css file I built, I did it by googling and putting together all the values.

You guys are the experts in Firefox customization stack. I will send you my complete userchrome.css file. Can you make changes and do the cleanup and send me the working userchrome.css file which I can use? I would really appreciate that.

I love firefox and hate to switch to Chrome or Edge even though that's what most of the companies are recommending. I love firefox and features it offers.

Let me know.

Thanks - Tarun!!

more options

Hey Guys checking back on this thread.

I can send my complete userchrome.css file. Can FIrefox team make changes and do the cleanup and send me the working userchrome.css file which I can use?

Please let me know.

more options

Best is to ask advice on the Firefox CSS subreddit forum as they may know more about your code.

more options

Also, please don't paste long selections of CSS (or any other kind of code) into this forum, which often misinterprets code characters as wiki markup. To share a userChrome.css file, you can use Pastebin or, if you have a Github account, create a Gist.