Firefox Search Bar Show Engine Names (Firefox 43+)by Jefferson
Share this styleView Stats Edit Style Update Style
Information:
Author Jefferson
License CC BY - Creative CommonsAttribution
Date Created December 21, 2015
Last Updated October 4, 2017
Installs this week Total installs
Applies to:browser
Create New Style FORUMAccount
Firefox Search Bar Show Engine Names (Firefox 43+) | Userstyl... 1 of 4
https://userstyles.org/styles/122214/firefox-search-bar-show-engi... 10/4/2017, 9:28 PM
Description:IMPORTANT -- SITE REDESIGN REQUIRES YOU TO SCROLL DOWN AND USE "ADVANCED STYLESETTINGS" BEFORE INSTALLATION!
As of May 9th, there is no way to revise your initial selection through this page. If you didn't get them the wayyou want, unfortunately you have to completely remove the style from the Add-ons page, User Styles section,and then reload this page and choose your style setting options again.
If you have multiple search engine plugins for the same site, having only an icon may be annoying. This styleshows a more classic list-style display. Developed and tested on Firefox 43.
To try different options after you install the style, reload the page until you get a green Update button, thenyou can choose a different option and update to it.
Show CSS Code ⚙ Advanced Style Settings
/* HELLO! This script has optional settings that you can try out if you return to its page: https://userstyles.org/styles/122214/firefox-search-bar-show-engine-names-firefox-43*/@-moz-document url(chrome://browser/content/browser.xul) { /* Make the one-off buttons span the full width */ #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext] { width: 100% !important; height: 24px !important; background-image: none !important; padding-left: 6px !important; box-sizing: content-box !important; line-height: 1em !important; }
(1) Vertical spacing and columns
(2) Hide the "Search for..." line above the non-default search engines?
(3) Hide the "Add ..." line for a site's own search engine (and the green + on the icon)?
(4) Hide the "Change Search Settings" line at the bottom?
(5) Show "Search using ..." tooltip text in or above the search box?
(6) Theming for search engines on hover/selection
Firefox Search Bar Show Engine Names (Firefox 43+) | Userstyl... 2 of 4
https://userstyles.org/styles/122214/firefox-search-bar-show-engi... 10/4/2017, 9:28 PM
(6A) Custom text color
(6B) Custom background color
(6C) Custom boldness
Notes from latest update:Additional images: {Vertical spacing options - difference} • {Turn optional sections of the panel on and off} •{Overlay default search engine name on search bar}
If you have over 20 search plugins showing in the drop-down, consider using the two-column list style (lastitem on the drop-down for #1).
Change Log:2017-08-08 Fix selectors to avoid restyling the bottom of the address bar drop-down (Fx55)2016-02-03 Tweak text position, add two-column option, space for 5 suggestions2015-12-28 Added color theming options2015-12-27 Override the green + on the icon if you aren't going to show the Add... bar2015-12-25 Tweaked Search Bar tooltips to avoid overflowing the available space2015-12-24 Added option for search box tooltip (e.g., Search using DuckDuckGo)2015-12-24 Tweak sizes and positions, added install-time options for hiding various parts2015-12-21 Initial version (+ minor modification to shorten row heights)
Archive this Style
Discussion:
Send Feedback
Jefferson May 1, 2017
[May 1 Workaround] Insert Missing Style Settings Controls
Firefox Search Bar Show Engine Names (Firefox 43+) | Userstyl... 3 of 4
https://userstyles.org/styles/122214/firefox-search-bar-show-engi... 10/4/2017, 9:28 PM
fioiu omotrl March 19, 2017
A request for modification
gerdami April 29, 2016
Thank you!
Max T January 28, 2016
Search tips.
Florian “Floutsch” Hartig January 20, 2016
Brings back the search bar how it should be
See More
Firefox Search Bar Show Engine Names (Firefox 43+) | Userstyl... 4 of 4
https://userstyles.org/styles/122214/firefox-search-bar-show-engi... 10/4/2017, 9:28 PM
Read tips on making user styles.To specify which URLs will have the style applied, use the Mozilla @-moz-document format. If you'reusing Chrome, you can use the "To Mozilla Format" button to generate the code.Styles for sites with adult content are not allowed.Styles adding adult content to sites are not allowed.Do not post other people's content without their permission.If you decide to stop maintaining your style, please delete it rather than blanking it out. By deleting, youcan make it so your style doesn't come up in searches while still being accessible via direct access foryour current users.
NameFirefox Search Bar Show Engine Names (Firefox 43+)
Description - A brief (3-4 sentences) description of the style. Some HTML allowed.
<strong>IMPORTANT -- SITE REDESIGN REQUIRES YOU TO SCROLL DOWN AND USE "ADVANCED STYLE SETTINGS" BEFORE INSTALLATION!</strong><p><em>As of May 9th, there is no way to revise your initial selection through this page. If you didn't get them the way you want, unfortunately you have to completely remove the style from the Add-ons page, User Styles section, and then reload this page and choose your style setting options again.</em></p><p>If you have multiple search engine plugins for the same site, having only an icon may be annoying. This style shows a more classic list-style display. Developed and tested on Firefox 43.<br><br>To try different options <i>after</i> you install the style, reload the page until you get a green Update button, then you can choose a different option and update to it.</p>
Additional Info (Optional) - Release notes, versioning info, change log, instructions, credits, etc. Some HTML allowed.
Additional images: {<a href="https://userstyles.org/style_screenshots/122214_additional_18009.png" target="_blank">Vertical spacing options - difference</a>} • {<a href="https://userstyles.org/style_screenshots/122214_additional_18010.png" target="_blank">Turn optional sections of the panel on and off</a>} • {<a href="https://userstyles.org/style_screenshots/122214_additional_18011.png" target="_blank">Overlay default search engine name on search bar</a>}
If you have over 20 search plugins showing in the drop-down, consider using the two-column list style (last item on the drop-down for #1).
Change Log:2017-08-08 Fix selectors to avoid restyling the bottom of the address bar drop-down (Fx55)2016-02-03 Tweak text position, add two-column option, space for 5 suggestions2015-12-28 Added color theming options2015-12-27 Override the green + on the icon if you aren't going to show the Add... bar2015-12-25 Tweaked Search Bar tooltips to avoid overflowing the available space2015-12-24 Added option for search box tooltip (e.g., Search using DuckDuckGo)2015-12-24 Tweak sizes and positions, added install-time options for hiding various parts2015-12-21 Initial version (+ minor modification to shorten row heights)
CSS Enable source editor
Firefox Search Bar Show Engine Names (Firefox 43+) | Userstyl... 1 of 11
https://userstyles.org/d/styles/122214/edit 10/4/2017, 9:29 PM
/* HELLO! This script has optional settings that you can try out if you return to its page: https://userstyles.org/styles/122214/firefox-search-bar-show-engine-names-firefox-43*/@-moz-document url(chrome://browser/content/browser.xul) { /* Make the one-off buttons span the full width */ #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext] { width: 100% !important; height: 24px !important; background-image: none !important; padding-left: 6px !important; box-sizing: content-box !important; line-height: 1em !important; } /* Hide the empties */ #PopupSearchAutoComplete .searchbar-engine-one-off-item:not([tooltiptext]) { display: none !important; } /* Fix up borders */ #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext], #PopupSearchAutoComplete .addengine-item { border-bottom: 1px solid #ccc !important; } #PopupSearchAutoComplete .search-setting-button.search-panel-header, #PopupSearchAutoComplete .addengine-item, #PopupSearchAutoComplete .search-panel-header.search-panel-current-input { border-top: none !important; max-height: 26px !important; min-height: 16px !important; padding-top: 1px !important; } /* Insert descriptive name for search engine plugin */ #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext]::after { content: attr(tooltiptext); margin: 5px 6px 0px !important; display: block !important; } /* Fix icon positioning */ #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext] > .button-box { display: inline-flex !important; width: 16px !important; max-width: 16px !important; border: none !important; padding: 0 0 !important; } #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext] > .button-box > .button-icon { display: block !important; margin-top: 4px !important; margin-left: -1px !important; } /* Lock in space for 5 search suggestions with scroll bar */
Firefox Search Bar Show Engine Names (Firefox 43+) | Userstyl... 2 of 11
https://userstyles.org/d/styles/122214/edit 10/4/2017, 9:29 PM
#PopupSearchAutoComplete .autocomplete-tree.plain.search-panel-tree .tree-bodybox, #PopupSearchAutoComplete .autocomplete-tree.plain.search-panel-tree .autocomplete-treebody { display: flex !important; flex: 1 1 auto !important; } #PopupSearchAutoComplete .autocomplete-tree.plain.search-panel-tree .autocomplete-treebody { max-height: calc(5 * 1.5em) !important; min-height: calc(5 * 1.5em) !important; } #PopupSearchAutoComplete .autocomplete-tree.plain.search-panel-tree .tree-scrollbar[collapsed="true"] { visibility: visible !important; } /* User style options */ /*[[vertspace]]*/ /*[[searchfor]]*/ /*[[addengine]]*/ /*[[chgsettings]]*/ /*[[tooltiptext]]*/ /*[[theming]]*/}
Example URL (Optional) Provide a URL that is affected by this style
Style Settings (Optional) Need help with style settings?
(1) Vertical spacing and columns vertspace
Standard 4 pixel whitespace std Default
/* One column - standard spacing (built-in above) */
Narrow 2 pixel whitespace narrow Default
/* Narrow spacing */ #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext] { height: 20px !important; } #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext]::after { margin-top: 3px !important; } #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext] > .button-box > .button-icon { margin-top: 2px !important; } #PopupSearchAutoComplete .search-panel-header.search-panel-current-input,
Firefox Search Bar Show Engine Names (Firefox 43+) | Userstyl... 3 of 11
https://userstyles.org/d/styles/122214/edit 10/4/2017, 9:29 PM
#PopupSearchAutoComplete .search-panel-header.search-panel-current-engine { padding: 0 6px !important; max-height: 20px !important; }
Tight 1 pixel whitespace tight Default
/* Tight spacing */ #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext] { height: 18px !important; } #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext]::after { margin-top: 2px !important; } #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext] > .button-box > .button-icon { margin-top: 1px !important; } #PopupSearchAutoComplete .search-panel-header.search-panel-current-input, #PopupSearchAutoComplete .search-panel-header.search-panel-current-engine, #PopupSearchAutoComplete .search-setting-button.search-panel-header, #PopupSearchAutoComplete .search-setting-button.search-panel-header > .button-box { padding: 0 6px !important; max-height: 18px !important; }
Two columns twocol Default
/* Two columns - standard spacing */ #PopupSearchAutoComplete { width: calc(32em + 14px) !important; min-width: calc(32em + 14px) !important; } #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext] { width: 16em !important; white-space: nowrap; overflow: hidden; }
(2) Hide the "Search for..." line above the non-default search engines? searchfor
Yes, hide it hidesearchfor Default
/* Hiding "Search for ..." */
Firefox Search Bar Show Engine Names (Firefox 43+) | Userstyl... 4 of 11
https://userstyles.org/d/styles/122214/edit 10/4/2017, 9:29 PM
#PopupSearchAutoComplete .search-panel-header.search-panel-current-input { display: none !important; }
No, show it showsearchfor Default
/* Not hiding "Search for ..." */
(3) Hide the "Add ..." line for a site's own search engine (and the green + on the icon)? addengine
No, show it showengine Default
/* Not hiding "Add ..." engine */
Yes, hide it for Windows hideenginew Default
/* Hiding "Add ..." engine (Windows) */ #PopupSearchAutoComplete .addengine-item { display: none !important; } #PopupSearchAutoComplete .searchbar-search-button[addengines="true"] { list-style-image: url("chrome://browser/skin/search-indicator.png"); -moz-image-region: rect(0, 20px, 20px, 0); width: 20px; } #PopupSearchAutoComplete .searchbar-search-button:hover { -moz-image-region: rect(0, 40px, 20px, 20px); } #PopupSearchAutoComplete .searchbar-search-button:hover:active { -moz-image-region: rect(0, 60px, 20px, 40px); } /* From http://mxr.mozilla.org/mozilla-release/source/browser/themes/windows/searchbar.css */ @media (min-resolution: 1.1dppx) { #PopupSearchAutoComplete .searchbar-search-button[addengines="true"] { list-style-image: url("chrome://browser/skin/[email protected]"); -moz-image-region: rect(0, 40px, 40px, 0); } #PopupSearchAutoComplete .searchbar-search-button:hover { -moz-image-region: rect(0, 80px, 40px, 40px); } #PopupSearchAutoComplete .searchbar-search-button:hover:active { -moz-image-region: rect(0, 120px, 40px, 80px); }
Firefox Search Bar Show Engine Names (Firefox 43+) | Userstyl... 5 of 11
https://userstyles.org/d/styles/122214/edit 10/4/2017, 9:29 PM
}
Yes, hide it for Mac OS X hideenginem Default
/* Hiding "Add ..." engine (Mac) */ #PopupSearchAutoComplete .addengine-item { display: none !important; } #PopupSearchAutoComplete .searchbar-search-button[addengines="true"] { list-style-image: url("chrome://browser/skin/search-indicator.png"); -moz-image-region: rect(0, 20px, 20px, 0); } #PopupSearchAutoComplete .searchbar-search-button:hover { -moz-image-region: rect(0, 40px, 20px, 20px); } #PopupSearchAutoComplete .searchbar-search-button:hover:active { -moz-image-region: rect(0, 60px, 20px, 40px); } /* From http://mxr.mozilla.org/mozilla-release/source/browser/themes/osx/searchbar.css */ @media (min-resolution: 2dppx) { #PopupSearchAutoComplete .searchbar-search-button[addengines="true"] { list-style-image: url("chrome://browser/skin/[email protected]"); width: 20px; -moz-image-region: rect(0, 40px, 40px, 0); } #PopupSearchAutoComplete .searchbar-search-button:hover { -moz-image-region: rect(0, 80px, 40px, 40px); } #PopupSearchAutoComplete .searchbar-search-button:hover:active { -moz-image-region: rect(0, 120px, 40px, 80px); } }
Yes, hide it for Linux hideenginel Default
/* Hiding "Add ..." engine (Linux) */ #PopupSearchAutoComplete .addengine-item { display: none !important; } #PopupSearchAutoComplete .searchbar-search-button[addengines="true"] { list-style-image: url("chrome://browser/skin/search-indicator.png"); -moz-image-region: rect(0, 20px, 20px, 0); } #PopupSearchAutoComplete .searchbar-search-button:hover { -moz-image-region: rect(0, 40px, 20px, 20px); } #PopupSearchAutoComplete .searchbar-search-button:hover:active { -moz-image-region: rect(0, 60px, 20px, 40px);
Firefox Search Bar Show Engine Names (Firefox 43+) | Userstyl... 6 of 11
https://userstyles.org/d/styles/122214/edit 10/4/2017, 9:29 PM
}
(4) Hide the "Change Search Settings" line at the bottom? chgsettings
No, show it showchg Default
/* Not hiding "Change Search Settings" */
Yes, hide it hidechg Default
/* Hiding "Change Search Settings" */ #PopupSearchAutoComplete .search-setting-button.search-panel-header { display: none !important; }
(5) Show "Search using ..." tooltip text in or above the search box? tooltiptext
No thanks tttno Default
/* Search bar tooltip text only visible on mouseover */
Yes, in the bar tttinbar Default
/* Overlay search bar tooltip text in the search bar */ #searchbar { position: relative !important; } .searchbar-textbox[tooltiptext]:not(:hover):not([focused])::after { content: attr(tooltiptext); font-style: italic; color: #888; background-color: inherit; display: inline-block; padding-left: 4px; position: absolute; bottom: 3px; right: 8px; z-index: 1000; white-space: pre; direction: rtl;
Firefox Search Bar Show Engine Names (Firefox 43+) | Userstyl... 7 of 11
https://userstyles.org/d/styles/122214/edit 10/4/2017, 9:29 PM
max-width: calc(100% - 40px); overflow-x: hidden; } #searchbar .textbox-input::placeholder { opacity: 0 !important; }
Yes, above the bar tttabove Default
/* Overlay search bar tooltip text above the search bar */ #searchbar { position: relative !important; } .searchbar-textbox[tooltiptext]:not([focused])::after { content: attr(tooltiptext); font-style: italic; font-size: 11px; color: #888; background-color: transparent; display: inline-block; position: absolute; top: 0; margin-top: -12px; right: 3px; z-index: 1000; white-space: pre; direction: rtl; max-width: calc(100% - 6px); overflow-x: hidden; text-overflow: ellipsis; } #searchbar .textbox-input::placeholder { opacity: 0 !important; }
(6) Theming for search engines on hover/selection theming
No specific theming themenone Default
/* No color scheme */
Default "highlight" theming themehighlight Default
/* Default hover/selection theming */
Firefox Search Bar Show Engine Names (Firefox 43+) | Userstyl... 8 of 11
https://userstyles.org/d/styles/122214/edit 10/4/2017, 9:29 PM
#PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext]:hover, #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext][selected] { color: HighlightText !important; background-color: Highlight; }
White on bright blue themewonblue Default
/* White on blue hover/selection theming */ #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext]:hover, #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext][selected] { color: #fff !important; background-color: #00f !important; }
Bold white on black themewonblack Default
/* Bold white on black hover/selection theming */ #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext]:hover, #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext][selected] { color: #fff !important; background-color: #000 !important; font-weight: bold !important; }
Choose your own (see below) themeyours Default
/* Custom theming */ #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext]:hover, #PopupSearchAutoComplete .searchbar-engine-one-off-item[tooltiptext][selected] { color: /*[[usertextcolor]]*/ !important; background-color: /*[[userbackcolor]]*/ !important; font-weight: /*[[userboldness]]*/ !important; }
(6A) Custom text color usertextcolor Default #FFFFFF
(6B) Custom background color userbackcolor Default #0000FF
(6C) Custom boldness userboldness
Normal weightnormal Default
Firefox Search Bar Show Engine Names (Firefox 43+) | Userstyl... 9 of 11
https://userstyles.org/d/styles/122214/edit 10/4/2017, 9:29 PM
400
Bold weightbold Default
700
Primary Screenshot This screenshot will be displayed on your style page and in search results. It should clearly represent what thesite or app looks like with your style applied. More info on screenshots.
Automatically generate screenshot(coming soon) Upload screenshot (GIF, PNG, JPG, at least 700 x 350, <200KB)
RemoveChange: No file selected.
No screenshots(Styles won't show on search results and any of the categories)
Additional Screenshots (Optional) Other screenshots to demonstrate what your style does.
Description Upload Remove CurrentImage
Vertical spacing options - difference No file selected.
Turn optional sections of the panel on and off No file selected.
Overlay default search engine name on search bar No file selected.
No file selected.
No file selected.
Firefox Search Bar Show Engine Names (Firefox 43+) | Userstyl... 10 of 11
https://userstyles.org/d/styles/122214/edit 10/4/2017, 9:29 PM
Pledgie Campaign ID (Optional)
LicenseBy posting styles to userstyles.org, you are at minimum allowing people to use your styles for personal use. Youmay be more specific in what you allow by choosing a license. This setting defines the license for this style; youmay also define a default license for all your styles on your user page. You can use the Creative CommonsLicense Chooser to help you pick a Creative Commons license. Be sure you understand the licenses before youchoose them as they may not be revokable.
Use my default (currently CC BY - Creative Commons Attribution)CC0 - Public DomainCC BY - Creative Commons AttributionCC BY-SA - Creative Commons Attribution-ShareAlikeCC BY-ND - Creative Commons Attribution-NoDerivsCC BY-NC - Creative Commons Attribution-NonCommercialCC BY-NC-SA - Creative Commons Attribution-NonCommercial-ShareAlikeCC BY-NC-ND - Creative Commons Attribution-NonCommercial-NoDerivs No Redistribution
Firefox Search Bar Show Engine Names (Firefox 43+) | Userstyl... 11 of 11
https://userstyles.org/d/styles/122214/edit 10/4/2017, 9:29 PM
Top Related