Collection of Useful Stylish Scripts to Customize Mozilla Firefox UI

We have posted several exclusive tutorials to tweak and customize Mozilla Firefox web browser in past. Some of them can be found at following links:

Today in this tutorial, we are going to share some useful Stylish scripts to customize Firefox UI. All these tips have been shared by our reader "Travis The Firefox User", so a big thanks goes to him.

Stylish is a popular and widely used add-on or extension for Mozilla Firefox. It allows you to customize Firefox user interface on the go. You just need to install the add-on and apply CSS codes using it. This add-on also allows you to customize any website look-n-feel.

The Stylish codes given in this tutorial will help you in customizing tab bar, menus, new Firefox Hamburger (Australis) Menu and toolbar buttons in Firefox web browser.

If you are ready to customize Firefox UI, check out following exclusive guide:

[IMP] How to Install and Use Stylish and CSS Codes

First of all you'll need to install Stylish add-on in Firefox. You can install it using following link:

Download Stylish Add-on for Mozilla Firefox

After installing add-on, you'll get a new icon of this add-on in Firefox toolbar which allows you to apply or manage CSS codes. Alternatively, you can access Stylish options using Add-ons (about:addons) page.

There are 2 ways to apply a CSS code using Stylish add-on:

1. If you have the CSS code with you, select "Write new style -> Blank style" option from Stylish menu and then paste the CSS code in the window and click on Save button. It'll immediately apply the code.

2. If you are going to apply a CSS code from the popular userstyles.org website, you just need to click on "+Install with Stylish" button given at the CSS code page and it'll apply the code.

So without wasting time, lets share the CSS codes:

Put Website Favicon on Right and Close Button on Left in Tabs

This code will move the website favicon to the right and Close button to the left on tabs in Firefox Tab bar similar to Safari web browser.

This code might be very useful for people who have switched to Firefox from safari.

Put_Favicon_Right_Close_Left_Mozilla_Firefox_Tabs.png

Just paste following CSS code using Stylish's "Write new style -> Blank style" option:

.tab-content { -moz-box-direction: reverse !important; }

Alternatively, you can paste above mentioned code in userChrome.css file present in Firefox profile folder. If you don't know about this file and profile folder, check out this tutorial.

Also Check: How to Move Scrollbar from Right to Left in Mozilla Firefox?

Add Icons to Menubar and Context Menus

If you are a user who prefer icons on menus, this code is for you. This code adds icons to Menu bar and context menu items.

Icons in Context Menu:

Add_Icons_Mozilla_Firefox_Context_Menu.png

Icons in Menu Bar:

Add_Icons_Mozilla_Firefox_Menubar.png

Simply install the code given at following link:

Put Icons in Firefox Menus

Show Items in Firefox Hamburger Menu in List View

This code will remove unnecessary big icons from new Firefox Hamburger Menu and will show the items in list view.

Mozilla_Firefox_Menu_Items_List_View.png

You can also select whether you want to show menu icons or not in list view. Also you can select the number of columns in list view.

Just apply the code given at following link:

Show Firefox Hamburger Menu Items in List View

Colorize Firefox Toolbar Buttons

This code will colorize various toolbar and menu buttons to make them look nicer.

Colorized_Toolbar_Buttons_Mozilla_Firefox.png

Apply the code given at following link:

Colorize Firefox Toolbar Buttons

Replace Firefox Hamburger Menu Icon with Calendar

This code will replace the toolbar icon of Firefox Hamburger Menu with current date and month.

Replace_Mozilla_Firefox_Menu_Button_With_Calendar.png

Apply the code given at following link:

Replace Firefox Hamburger Menu Icon with Calendar

Put Firefox Hamburger Menu on Left

This code will move Firefox Hamburger Menu to the left of the toolbar.

Put_Menu_Button_Left_Mozilla_Firefox.png

This code can be applied using both Stylish and userChrome.css file.

If you want to apply the code using Stylish, install the code given at following link:

Move Firefox Hamburger Menu to the Left

Or you can paste following code in userChrome.css file:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@-moz-document url("chrome://browser/content/browser.xul") {
#PanelUI-button, #customization-panel-container,
#customization-panelWrapper .panel-arrow,
#ctr_panelui-button,
#wrapper-ctr_panelui-button {
-moz-box-ordinal-group: 0
}
#PanelUI-button {
background-position: 100% 0, calc(100% - 1px) 0, calc(100% - 2px) 0;
}
}

That's it. Feel free to share your feedback in your comment. If you know about any other interesting trick for Firefox, please share it with us...

Also Check:

15 Tips-n-Tricks to Tweak and Customize Mozilla Firefox Web Browser





Share this article: Facebook | Twitter | Google+ | Reddit | Tell a friend

Posted in: Mozilla Firefox


Other similar articles that may interest you


Comments

  • Fyi Userstyle.org has closed...

  • This link works great at least for me:

    userstyles.org

  • Hide notification balloon:

    statuspanel {display: none !important;}

    Hide scrollbar:

    scrollbar * { display: none ! important; }

    Hide dropdown icon in address bar:

    .autocomplete-history-dropmarker { display: none !important;}

  • Gives input boxes a border and blue outline:

    input {
    outline:none;
    border-radius:2px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border:2px solid rgba(0,0,0, 0.2);
    }

    input:focus {
    box-shadow: 0 0 1px #33b5e5;
    -webkit-box-shadow: 0 0 1px #33b5e5;
    -moz-box-shadow: 0 0 1px #33b5e5;
    border:2px solid #33b5e5;
    }

    select {
    outline:none;
    border-radius:2px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border:2px solid rgba(0,0,0, 0.2);
    }

    select:focus {
    box-shadow: 0 0 1px #33b5e5;
    -webkit-box-shadow: 0 0 1px #33b5e5;
    -moz-box-shadow: 0 0 1px #33b5e5;
    border:2px solid #33b5e5;
    }

  • VG

    Thanks guys for your inputs. :)

    @Joce
    Userstyles.org was never closed. Its Userscripts.org which has been closed.

  • Your Welcome VG & Others : )

    If i find anymore that seem neat and others might enjoy, I'll defiantly tell you : )

  • re:
    Joce
    Fyi Userstyle.org has closed...

    Don't think it ever opened to begin with?
    There is a place called userstyles.org - and that is still open.

  • This is interesting deviation about Firefox GUI:

    floone.deviantart.com/art/Firefox-29-Windows-8-8-1-design-for-Windows-7-470193734

  • Tabs on bottom (works only when maximized, might look funky with titlebar)

    @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
    #browser-panel {
    -moz-box-direction: reverse;
    }
    #nav-bar {
    padding-top: 5px;
    }

  • Thanks @Travis The Firefox User and @VG for “Add Icons to Menubar and Context Menus” and @TheAslan for “Hide dropdown icon in address bar” tips :].

  • @MDJ

    No problem! I'm here to share!

  • here some

    userstyles.org/styles/101143/firefox-29-left-reload-button
    userstyles.org/styles/99560/square-tab-for-firefox-australis
    userstyles.org/styles/62727/right-click-menu

  • @hessam,

    Thanks, these are awesome, especially that reload button new location.

  • Old tab close button for Australis: userstyles.org/styles/100922/old-close-button-for-australis

  • Hide Bookmarks Toolbar folder icons:

    #personal-bookmarks .bookmark-item > .toolbarbutton-icon {display:none!important}

  • Hide search box GO-button:

    search-go-button, .search-go-button-stack, #go-button { display: none !important; }

  • Here some other useful style:
    userstyles.org/styles/96122/australis-slim-toolbar
    userstyles.org/styles/62689/customize-tab-width
    userstyles.org/styles/77186/firefox-move-paste-and-go-search-to-top
    userstyles.org/styles/86535/firefox-awesome-bar-auto-complete-borders

    also here modified version from Clear Addon Manager style with some other about:addon page style
    modified by me
    @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

    @-moz-document url("about:addons"),
    url("chrome://mozapps/content/extensions/extensions.xul")
    .description-container{display:none!important;}
    #view-port-container {
    border-radius: 0 !important;
    }
    /*show ALL categories */
    richlistitem[class="category"][disabled="true"], richlistitem[class="category"][hidden="true"] {
    display: -moz-box !important;
    height: auto !important;
    opacity: 1 !important
    }

    #addons-page {
    padding: 0px !important;
    }

    #header{
    margin: 1px !important;
    }

    .category:hover, .sorter:hover {
    background-color: gold !important;
    }

    .addon.addon-view:hover{background-color: gold !important;}

    .addon[selected="true"] {
    background-color: rgba(110, 201, 245, 0.78) !important;
    }

    .version {
    font-weight: 300 !important;
    color: red !important;
    }

    .addon:not([type="userstyle"]):not([type="custombuttons"]) .date-updated {
    display: -moz-box !important;
    }

    .addon[selected="true"]:not([type="userstyle"]):not([type="custombuttons"]) .date-updated {
    font-weight: bold !important;
    }

    .addon {
    counter-increment: addoncount !important;
    content: counter(addoncount) !important;
    }
    .addon:first-child {
    counter-reset: addoncount !important;
    }
    .addon[active="false"] {
    counter-increment: disabled !important;
    }
    #addon-list:after {
    content: "("counter(addoncount)" enabled, "counter(disabled)" disabled)" !important;
    position: fixed !important;
    top: 500px !important;
    left: 15px !important;
    color:rgb(62,73,185);
    text-shadow: #FFFFFF 1px 1px 1px;
    cursor: default;
    white-space: nowrap !important;
    }

    #header{
    position:fixed !important;
    background:transparent !important;
    margin:0px 0px 0 5px !important;
    z-index:1000000000000;
    }
    #header-search{
    width:110px !important;
    vertical-align:2px !Important;
    }

    .addon.addon-view[active="false"]:not([notification="warning"] )
    {background:#E0E0E0 !important}

    /*Landscaping */

    #addons-page{
    padding:0 !important;
    background:rgb(248,247,245) !important;
    }

    /*categories change font size */
    #categories{
    font-size-adjust: 0.40;
    }

    .name{
    font-size-adjust: 0.44;
    }

    .description {
    display: none !important;
    }

    #urlbar-go-button {
    display: none !important;
    }

    /*hide check for updaee,not found */

    #updates-noneFound,#updates-container{
    display:none !Important;
    }

    #updates-downloaded,#updates-container{
    display:none !Important;
    }

    #updates-installed,#updates-container{
    display:none !Important;
    }

    #updates-progress,#updates-container{
    display:none !Important;
    }

    /*mouseover disabled item */
    .addon.addon-view[active="false"]:not([notification="warning"] ):hover{background-color: yellow !important;}

    /*dropmarker check for update button */

    #addons-page > #header > #header-utils-btn .toolbarbutton-menu-dropmarker{
    display: none !important;
    }

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

    /*********** left contents ****************/

    /* left categories list */
    #categories {
    width: 160px !important;
    font-size : 10px !important;
    }

    /* categories */
    .category{
    padding-top: 0px !important;
    height: 35px !important;
    }

    /* collections find */
    #retirement-box{height: 60px !important;}

    /* hide categories */
    .category[disabled] {display:none !important;}

    /* icon */
    .category-icon{
    width: 25px !important;
    height: 25px !important;
    }

    /*********** right contents ****************/

    /* 縞々模様 */
    #addon-list > richlistitem:nth-child(even){
    background:AliceBlue;
    }
    /* 選択中の行の色変更 */
    #addon-list > richlistitem[selected="true"]:nth-child(even){
    background-color: rgba(148, 172, 204, 0.39);
    }

    /* 全体調整 */
    #list-view .addon.addon-view * {
    font-size: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    }

    /* 隙間調整(padding) */
    #list-view > #addon-list .addon.addon-view {
    padding: 0px !important;
    }

    /* 水平に並べて表示(horizontal) */
    .content-inner-container{-moz-box-orient:horizontal;}

    /* icon image */
    .icon-container ,
    .icon-container > .icon {
    width: 16px !important;
    height: 16px !important;
    }

    /* addon name */
    .basicinfo-container{
    width: 350px !important;
    -moz-box-align: center !important;
    }
    .name-container{font-size:100% !important}

    /* border off */
    #search-list *,
    #addon-list *,
    #updates-list{
    border:none !important;
    }

    /* border bottom line */
    #addon-list .addon.addon-view {
    border-bottom:1px rgb(230,227,218) solid !important;
    }

    /* option botton border */
    #search-list .addon-control,
    #addon-list .addon-control,
    #updates-list .addon-control {
    border: 1px solid #888 !important;
    }

    /* 詳細ボタン非表示 */
    .details.button-link{display:none !important;}

    /* エラーアイコン */
    .error-icon{
    height:20px!important;
    width:20px!important;
    }

    /* テーマのスペース調整(theme)
    .description{display:block !important;}
    */
    /*spacer off
    .description-container > spacer{display:none !important;}
    */

    /*********** optins button ****************/

    /* options */
    #list-view > #addon-list .status-control-wrapper{
    width:250px !important;
    }
    .control-container>button{margin:1px !important;}
    .addon-control{
    padding:0px !important;
    }

    /* options buttons
    .addon-control.preferences{min-width: 3.5em !important;}
    .addon-control.enable{min-width: 3em !important;}
    .addon-control.disable{min-width: 3em !important;}
    .addon-control.remove{min-width: 2em !important;}
    .addon-control{min-width: 3em !important;}
    .addon-control.button_scriptish_userscript_edit{min-width: 3em !important;}
    .addon-control.button_scriptish_userscript_show{min-width: 3em !important;}
    */

  • Great tricks,thanks!!

  • Firefox Bookmarks Bar Centred :

    userstyles.org/styles/85458/firefox-bookmarks-bar-centred

  • Always display back/forward arrows: (Not tested)

    @-moz-document url(chrome://browser/content/browser.xul) {
    window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button[forwarddisabled] + #urlbar-container > #urlbar {
    margin-left: 0px !important;
    border-left: 1px solid #b4c2cf !important;
    }

    window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button:not(:hover) > #forward-button[disabled] ,
    window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button:hover > #forward-button[disabled] {
    opacity: 1.0 !important;
    margin-right: -2px !important;
    }

    window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button > #forward-button[disabled] > .toolbarbutton-icon{
    border-top:1px solid #869aad !important;
    border-bottom:1px solid #869aad !important;
    }

    window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button[forwarddisabled] #back-forward-dropmarker{
    visibility:visible !important;
    }
    }

  • @TheAslan
    it dosent work for me

  • Which is not working? There's few tweaks which are not working, I should define those so VG could remove those from this article, I don't have Firefox installed at the moment, but when I have I will re-test all of those my tweaks which I have sent so far and report to VG.

  • @TheAslan

    Do you even use Firefox often?

  • No, I don't. My primary web browser is Chromium. Last time I actively used Firefox was version 17.0a1.

  • Australis Classic Tabs:

    userstyles.org/styles/51663/australis-classic-tabs?r=1312288377

  • New button style controls in FF context menu:

    userstyles.org/styles/102308/new-button-style-controls-in-ff-context-menu

  • Combine reload/identity box icons:

    userstyles.org/styles/92775/combine-identity-box-with-reload-stop

    Defog Australis tabs:

    userstyles.org/styles/99296/defog-australis-tabs

  • Combine Tab Icon and Tab Close Button:

    userstyles.org/styles/43992/firefox-combine-tab-icon-and-tab-close-button

  • @TheAslan:

    As a person who uses Firefox all the time (hence my name), I'd recommend Testing these user-styles, because some of the ones you shared don't function. :/

  • Here's my userstyles and my page :-)

  • Here's the link. I forgot to put it in my last comment userstyles.org/users/268265 xD

Leave a Comment

(required)