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

Sites in the address bar dropdown have their favicons in the wrong position after some tweaks with userChrome.css

  • No replies
  • 1 has this problem
  • 6 views
more options

So I wanted to make the address bar dropdown look like the one in Firefox 47. I did the steps as described in the Stylish extension and made my own userChrome.css file and pasted the generated code there. The title and URL of each site are just where I want them to be, but I don't know the class name of the favicons to move them to the left... I just need to tweak the CSS that controls the icons and move them to the left. Here's my userChrome.css file:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/*  
  Firefox 57 users: https://www.jeffersonscher.com/gm/url-bar-tweaks.html 
  You can copy/paste into a userChrome.css file, see https://www.userchrome.org/ 
  Firefox 52-56 users: roll back your Stylish to version 2.1.1 or 2.0.7 here: 
  https://addons.mozilla.org/firefox/addon/stylish/versions/ 
  Then find Stylish on the Add-ons page, click its More link, and turn off updates 
*/ 

/* Firefox 43+ "Visit..." or "Search..." bar in the drop-down */
#PopupAutoCompleteRichResult richlistitem[type*="heuristic"],
#PopupAutoCompleteRichResult richlistitem:first-of-type[actiontype="searchengine"],
#PopupAutoCompleteRichResult richlistitem[actiontype="visiturl"],
#PopupAutoCompleteRichResult richlistitem[actiontype="keyword"]
{
	display: none !important;
}

/* Keep hovered display of drop-marker (Firefox default) */
/* Increase height to avoid scroll bar */
#PopupAutoCompleteRichResult .autocomplete-richlistbox
{
	height: auto !important;
	max-height: calc(45.5px * 6) !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-right: 0 !important; 
}

/* Set drop-down width */
#PopupAutoCompleteRichResult
{
	width: 829px !important;
	max-width: 829px !important;
	margin-left: 0 !important;
}

#PopupAutoCompleteRichResult .autocomplete-richlistitem:not([actiontype="searchengine"]) .ac-title-text, 
#PopupAutoCompleteRichResult .autocomplete-richlistitem .ac-url-text
{
	min-width: 829px !important;
}

/* Create sufficient height for two lines */
#PopupAutoCompleteRichResult .autocomplete-richlistitem:not([actiontype="searchengine"])
{
	position: relative !important;
	height: 45.5px !important;
}

/* Subtle border between results */
#PopupAutoCompleteRichResult .autocomplete-richlistitem
{
	border-bottom-color: #EEE !important;
}

/* Position page title, set font-size and min-width */
#PopupAutoCompleteRichResult .autocomplete-richlistitem:not([actiontype="searchengine"]) .ac-title
{
	position: absolute !important;
	left: 54px;
	top: 1px;
	font-size: 14px;
}

/* Position page url / action, set font-size and min-width */
#PopupAutoCompleteRichResult .autocomplete-richlistitem:not([actiontype="searchengine"]) .ac-url,
#PopupAutoCompleteRichResult .autocomplete-richlistitem:not([actiontype="searchengine"]) .ac-action
{
	position: absolute !important;
	left: 54px;
	top: 20px;
	font-size: 12px;
}

/* Position bookmark tags */
#PopupAutoCompleteRichResult .autocomplete-richlistitem .ac-tags
{
	position: absolute !important;
	right: 0px;
	top: 3px;
}

/* Hide separator between title and URL */
#PopupAutoCompleteRichResult .autocomplete-richlistitem:not([actiontype="searchengine"]) .ac-separator
{
	display: none !important;
}

/* Position special icon (bookmark, switch-to-tab) */
#PopupAutoCompleteRichResult .autocomplete-richlistitem .ac-type-icon
{
	margin-left: 4px !important;
}

/* Ability to scroll in Fx57 */ 
#PopupAutoCompleteRichResult .autocomplete-richlistbox > scrollbox { 
	overflow-y: auto !important;  
	padding-right: 3px !important; 
}

Any suggestions?

Modified by cor-el