You are not logged in.

#1 2013-07-03 12:25:22

HungGarTiger
Member
From: nz/auckland/
Registered: 2012-06-27
Posts: 186

userChrome.css

I'd be interested in seeing what some of you guys do with Firefox, I've just started getting into modifying this file and am finding it interesting. I never realised Firefox was so easy to customise, lets see some inspiring designs. Mine is still very basic and I'm running into some problems with (I think) gtk2 over ruling some of my changes, but this is what I have so far on tabs..

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

*|*.textbox-input:-moz-placeholder { color:transparent !important; }
*|*.textbox-input:-moz-placeholder:hover { color:transparent !important; }

/*tabs*/
#TabsToolbar { background: #444 !important; }
.tabbrowser-tab[selected="true"] { background: #222 !important; font-family: "Verdana" !important; font-size: 10px !important; color: white !important; font-weight: normal !important; border: none !important; padding-left: 5px !important; padding-right: 5px !important; }
.tabbrowser-tab:not([selected="true"]) { background: #444 !important; font-family: "Verdana" !important; font-size: 8px !important; color: white !important; font-weight: normal !important; border: none !important; padding-left: 5px !important; padding-right: 5px !important; }
.tabs-newtab-button: { display: none !important; }

* {
    font-family: "DejaVu Sans";
}

If anyone could also show me how to square the tabs and have a border that doesn't look like crap I'd appreciate it big_smile


"No sympathy for the devil. If you buy the ticket, take the ride."
- Hunter S. Thompson

Offline

#2 2013-07-03 12:36:08

WorMzy
Forum Moderator
From: Scotland
Registered: 2010-06-16
Posts: 5,243

Re: userChrome.css

I don't do much,

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

#addonbar-closebutton {
	visibility: collapse !important;
}

#bookmarks-menu-button > .toolbarbutton-text {
  display: none !important;
}

First block just removes the X from the addon bar (probably don't need that any more, I think pentadactyl does the same thing). The second block removes the text from the bookmarks button, because it takes up a ridiculous amount of space, and I know that the book icon contains bookmarks.


Sakura:-
Mobo: ASUS P8Z77-V PRO // Processor: Intel Core i7-3770K 3.4GHz // GFX: nVidia GeForce GTX 970 Ti // RAM: 32GB (4x 8GB) Corsair DDR3 (@ 2133MHz) // Storage: 1x 3TB Seagate SATAII 5x 1TB Samsung SATAII, 2x 120GB Corsair SSD

Online

#3 2013-07-03 12:39:55

Earnestly
Member
Registered: 2011-08-18
Posts: 804

Re: userChrome.css

Open chrome://browser/content/browser.xul and hit Shift - F7 to open the Style Editor. (It's easier to save the CSS and import it when you're done.)
GTK shouldn't be interfering outside of providing graphics for various -moz-<elements> which are easily overridden (!important).

If you wish to tweak more UI elements, see http://kb.mozillazine.org/Dev_:_Firefox_Chrome_URLs

Offline

#4 2013-07-04 04:04:11

HungGarTiger
Member
From: nz/auckland/
Registered: 2012-06-27
Posts: 186

Re: userChrome.css

Nice clean squared tabs now

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

*|*.textbox-input:-moz-placeholder { color:transparent !important; }
*|*.textbox-input:-moz-placeholder:hover { color:transparent !important; }

/*tabs*/
#TabsToolbar { 
        background: #444 !important; 
}

.tabbrowser-tab[selected="true"] { 
        background: #222 !important; 
        font-family: "Verdana" !important; 
        font-size: 10px !important; 
        color: white !important; 
        font-weight: normal !important; 
        border: none !important;
        border-radius: 0 !important;
        padding-left: 5px !important; 
        padding-right: 5px !important; 
}

.tabbrowser-tab:not([selected="true"]) { 
        background: #444 !important; 
        font-family: "Verdana" !important; 
        font-size: 8px !important; 
        color: white !important; 
        font-weight: normal !important; 
        border: none !important;
        border-radius: 0 !important;
        padding-left: 5px !important; 
        padding-right: 5px !important;
        
}

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

.tabs-newtab-button {
        display: none !important;
        border: none !important;
        margin: 0 !important;
}


* {
    font-family: "DejaVu Sans";
}

t1ur8Nts.png


"No sympathy for the devil. If you buy the ticket, take the ride."
- Hunter S. Thompson

Offline

Board footer

Powered by FluxBB