Early Adopters: Your Firefox 3 chrome tweaks are HERE
According to my poll about 1 in 4 of you readers have already switched to Firefox 3 and almost everyone else will switch after their extensions are compatible. I am considering switching myself but before I do I need to tweak the heck out of it like I tend to do.
Now after a bit of searching I really couldn’t find any good resources out there for tweaking Firefox 3 stuff so I thought I should create one and share it with you!
So here I have compiled a list of Firefox 3 only userChrome.css tweaks. Here are instructions if needed.
/* Specify a maxiumum height for the Autocomplete list */
#PopupAutoCompleteRichResult {
max-height: 100px !important;
}
/* Remove splitter between the URL and Search bars to save space */
#urlbar-search-splitter {
display: none !important;
}
/* Changed from #bookmarks-menu in FF2 */
#bookmarksMenu {
display: none !important;
}
/* Remove the Bookmark star, I use Ctrl-D instead */
#star-button {
display: none !important;
}
/* Remove the URL bar Go button, not necessary IMO ;) */
#go-button {
display: none !important;
}
/* Style the new auto-complete list */
.autocomplete-richlistitem {
background: #222222 !important;
color: #FFFFFF !important;
padding: 0px !important;
margin: 0px !important;
}
.autocomplete-richlistitem:hover,
.autocomplete-richlistitem[selected="true"] {
background: #444444 !important;
}
Bonus tweak that also works with Firefox 2 (thank you Lifehacker):
/* Make the active tab wider (when you have a few tabs open) */
#content tab[selected="true"] {
min-width: 200px !important;
}
I’m sure there will be more to add to this list by the time Firefox 3 is released so stay tuned! Of course most of the other userChrome.css tweaks for Firefox 2 work with Firefox 3 as well. If you have any entries to add to this please share in the comments.
Popularity: 55% [?]
158 Responses so far
Trackbacks
- foxiewire.com
- Firefox 3: primeros ajustes en el userChrome.css | Zona Firefox
- Cutting Edge: Exclusive Firefox 3 about:config hacks | Eric Wendelin's Blog
- Firefox 3.0: How to Remove The Search ‘Go’ Button « Firefox Extension Guru’s Blog
- Fx 3: Removing Bookmark ‘Star’ Button « Firefox Extension Guru’s Blog
- Removing ‘Live Feed’ Button « Firefox Extension Guru’s Blog
- Make Active Tab Wider « Firefox Extension Guru’s Blog
- 8 steps to my personal Firefox setup for productivity | Eric Wendelin's Blog
Leave a reply



There’s some good stuff in there.
Any idea how to get this to work in Firefox 3?
/* Multi-row bookmarks toolbar */
#bookmarks-ptf {display:block}
#bookmarks-ptf toolbarseparator {display:inline}
I’m guessing this is one thing that needs changing but I’m not sure to what. #bookmarks-ptf
I typically use 4-7 bookmarks toolbars (some are short lived the others are permanent) and I like to just click right on a bookmark, not scroll through a menu looking for one so I’m really missing multiple bookmarks toolbars while using Firefox 3.
@Ken:
Yikes, that was tougher than I would have liked but here it is:
/* Multi-row bookmarks toolbar */
#PersonalToolbar {height: 100% !important; max-height: none !important;}
#PersonalToolbar:not([collapsed]) toolbarbutton {
visibility: visible !important;
}
#bookmarksBarContent .bookmarks-toolbar-items, #bookmarksBarContent { display: block !important;}
I think that should do what you need. You might have to adjust the height value but otherwise this worked for me.
Hey thanks for these! I was just looking for something to get rid of that unnecessary “Go” button and and bookmark star in the URL.
/* Hide the Sidebar bookmarks Search box */
#bookmarksPanel > hbox { display:none; }
/* remove Sidebar maximum width restriction */
#sidebar {
min-width: none !important;
min-width: 0px !important;
}
Great addition Ken! I will be using those!
Hi,
I tested these tweaks in ‘userchrome.css’ file in FF3b4, but nothing happened. Do yo know any issue about compatibilities?
@foXtensor:
I would look through the instructions again to make sure your “userChrome.css” file is in the right place. Also make sure that your “C” is capitalized. I tested all of these extensively in FF3 b4 so I’m sure that you will notice a difference when the tweaks are applied :)
Hi again,
of course, my userChrome have the ‘C’ and the place is correct, but the changes don’t work. I’m familiarized with changes in userChrome because I applied some tweaks in FF2.
I think the changes don’t work with the Spanish version of Firefox. I’ll prove and write you about this in a few hours.
Thanks for your answer :)
@foXtensor:
Hmmm… very interesting. I didn’t think that anything would change from l10n. Let me know what you find and I will install the Spanish version of FF3 when I get home and test in about 7 hours.
If we can find out what is going on I might write post for all the international readers out there and give you credit!
Thanks
Eric,
I’m so stupid. The error was caused by spaces at end of the lines, when I copied your code. Now I see the changes (after a flame in my head). I’ll publish a Spanish version in my blog, Zona Firefox, of course with credit to you.
Optimoz tweaks where the sidebar opens on the mouse touch doesn’t work with FF3. Install Stylish: https://addons.mozilla.org/en-US/firefox/addon/2108 and then this script http://userstyles.org/styles/1633
My adjustments to make it work on my computer follows:
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#sidebar-box {
margin-left: -153px !important; /* Set 1px less than the Sidebar width as a negative number */
}
#sidebar-box:hover {
margin-left: 0px !important;
}
#sidebar-splitter {
margin-left: -4px !important;
border: 3px solid !important;
}
sidebarheader {
-moz-appearance: none !important;
border: none !important;
height: 6px !important; /* Can be set to 0px if grabbing the sidebar is not necessary */
}
bookmarks-tree, #historyTree {
-moz-appearance: none !important;
margin: 2px 2px 2px 2px !important;
border: 2px solid !important;
-moz-border-top-colors: #000000 #000000 !important;
-moz-border-right-colors: #000000 #000000 !important;
-moz-border-bottom-colors: #000000 #000000 !important;
-moz-border-left-colors: #000000 #000000 !important;
}
.tree-scrollbar {
width: 2px !important;
}
#search-box, #bookmarksPanel label[value="Search:"], #sidebar-box .tabs-closebutton, #sidebar-title,
menuitem[label="Bookmarks"][checked=true], menuitem[label="History"][checked=true] {
display: none !important;
}
The -153 may be unique to each computer or monitor and has to be found with DOM Inspector. Not that hard.
Everything works ok for me now. Be sure to place the bookmark icon on a tool bar and activate before installing.
@foXtensor: Great, thank you! I’m sorry I had no idea what the issue was so I’m glad you figured it out!
@Ken: Wow, I’m sure an amazing bit of work went into that bookmarks tweak. I’m sorry my solution was not complete and I really appreciate you sharing you solution! Thank you!
Keyword tweak does not work in FF3B5 ( the one where if you press ctrl+D, you get a place to specify the keyword for the bookmark )
@MM:
I’ll post you a fix for this then!
And how about that RSS icon?
Anyone know the way to remove it?
Also what about the magnifying glass, the known ff2 userchrome tweak doesn’t work.
Thanks!
/* hide live feed icon in Address url toolbar */
#feed-button {
display: none !important;
}
@MM:
Yeesh. Had to pour through the firefox source for this one:
/* Add a keyword when adding a bookmark */
#editBMPanel_keywordRow {
visibility: visible;
}
Enjoy!
@pdw:
This is working for me in FF3 b5 for the magnifying glass:
.search-go-button { display: none !important; }
I have managed to use the aforementioned tweak to hide the ‘Go’ arrow, but I now find that when faced with a blank tab (I have a blank page set as my ‘Home’), the arrow is visible.
As soon as a URL is loaded, or I visit a site, the arrow disappears, but if I hit Ctrl+T a new tab, then when I switch, the arrow is once again visible.
Thoughts?
@Matt:
Just add this to your userChrome.css file to make that go away for good:
#go-button {
display: none !important;
}
@Eric Wendelin
*Slaps Forehead*
When I inserted the tweak, I left out the leading “#” sign.
Thanks for the help!
I’m using to latest daily build of Minefield and neither of the posted methods for removing the star or the magnifying glass from the top bars work.
@Ken:
Hmmm. I’ll check out the nightly build and get back to you on that. Hopefully it is temporary.
Hi, very nice tips but I have troubles with a code used in FF2 and does not work in FF3. There is the code:
/* Pop-up bookmarks toolbar */
#PersonalToolbar {display: none;} #navigator-toolbox:hover >
#PersonalToolbar {display: -moz-box;}
This tip works fine but when I click on a bookmark nothing happens.
I appreciate your help. Sorry but my english is poor.
Thanks
Is there anyway to turn on multibar tabs, without the need of an addon like tabs-mix plus? I’ve looked around but haven’t found anything yet.
Thanks a lot
Finally, been racking my brain trying to get rid of that magnifying glass. Thanks for the tip on removing the Star, hadn’t really noticed until you pointed out the tweak. Now, for whatever reason I still cain’t get rid of the Go Button. I am copy the line again into my userChrome.css and see what happens this time.
Here’s one that works in both Firefox 2 & 3:
/*Moves List All Tabs Button to the left side of the tab bar*/
.tabs-alltabs-stack {-moz-box-ordinal-group: 1 !important}
.tabbrowser-arrowscrollbox {-moz-box-ordinal-group: 2 !important}
.tabs-closebutton-box {-moz-box-ordinal-group: 3 !important}
@The Guru:
Excellent! Thank you for that!
@Ken Wright:
Yes I installed the nightly Minefield and I see that too. Unfortunately I can’t use DOM inspector to find out how to fix it. Hopefully RC1 will come out soon :)
@Juanito:
I should have seen this earlier. The solution to your problem is simple, the CSS you pasted is invalid. Here is the valid CSS:
/* Pop-up bookmarks toolbar */
#PersonalToolbar {display: none;}
#navigator-toolbox:hover > #PersonalToolbar {display: -moz-box;}
I tested this out myself in FF3b5 and it is slick!
Any idea how to remove the separator’s between toolbars? The old FF2 method:
/* Remove separators between toolbars*/
#toolbar-menubar {
min-height: 12px !important;
padding: 0px !important;
margin: 0px !important;
border: none !important;
}
#nav-bar {
border: none !important;
padding: 0px !important;
}
#PersonalToolbar {
border: none !important;
}
#navigator-toolbox {
border-bottom-width: 0px !important;
}
Doesn’t work anymore.
Thanks!
Does any expert out there also knows how to have more lines displayed in the pull-down Bookmarks menus of the Personal Toolbar?
I changed the font size in userChrome.css with “menupopup > *…”, which does change the font size. However, the menu items have the same height as before.
Any help from an expert would be much appreciated. Lost many hours on this already :/
@ironhead and Eric:
I don’t know yet, but I’ll take a look and get you guys answers on it soon. :)
Eric, this is amazing! I just upgraded to Firefox 3.0rc1 last week and I am very glad to find this blog of yours. I’ve already used a few of the things pointed out, but was wondering if there’s any way you can help me with this:
I would like to take out the separator line under Bookmarks Toolber (highlighted in the screenshot) so that the Bookmarks Toolbar folder will be right next to my other folders. Is this possible? Thank you.
Screenshot: http://i47.photobucket.com/albums/f166/MaStAViC/BookmarkToolbars.jpg
(Sorry, forgot to include it above.)
Oh, and maybe this will help some people:
/* Remove Unimportant Location Bar Icon Text */
#identity-icon-label {
display: none !important;
}
Some sites will have text after the location bar icon, which is unnecessary, move and takes up the location bar space. Screenshots of before and after, respectively:
http://i47.photobucket.com/albums/f166/MaStAViC/LocationBar-PayPal.jpg
http://i47.photobucket.com/albums/f166/MaStAViC/LocationBar-PayPalfixed.jpg
@Victor:
Thanks for the compliment and the tips!
Check this out:
#bookmarksToolbarFolderMenu + menuseparator {
display: none;
}
That does what you want according to my tests. :)
@ironhead:
I worked on this awhile and could not find any way to remove the borders. I’ll have to give up for now.
Does anyone else do this and can help out? Thanks.
Thank you, Eric! That seems to work perfectly!
menuitem[label="Open All in Tabs..."] { display: none !important; }
menuitem[label="Bookmark All Tabs..."] { display: none !important; }
Any suggestions for the above? Above works in Firefox 2, but not with three.
It’d be great if every UI element had an id tag. Then using DOM to figure out what to change would be a snap.
I don’t know about you, but 90% of my tweaks are made to remove something which is unnecessary or annoying. I also use userchrome.js to perform a few tweaks.
Thanks for your posting and your website! I’ll be having a look around the joint!
menuitem[label="Open All in Tabs"] { display: none !important; }
My bad. The above does in fact work. I had placed three dots where they don’t belong.
I’m still unable to get rid of certain menu items (like “bookmark all tabs”) which I could previously refer to by label. Also, separators which used to have ids no longer have them.
I know Firefox 3 is supposed to have numerous bookmarking improvements, I’m a little underwhelmed right now. Maybe it’ll grow on me.
To clean up all the menus, I use the latest menu editor and force the install with nightly tester tools. Have had no problems. https://addons.mozilla.org/en-US/firefox/addon/6543
https://addons.mozilla.org/en-US/firefox/addon/710
There would be an enormous number of scripts added to the chrome file to get rid of everything I don’t need in the menus.
Eric, yes now the CSS is valid
/* Pop-up bookmarks toolbar */
#PersonalToolbar {display: none;}
#navigator-toolbox:hover > #PersonalToolbar {display: -moz-box;}
But when I try to open a bookmark that is within a subfolder it does not open nothing.
I do not know what I’m doing wrong.
Greetings
how do i get this to work? =(
/* hide bookmark favicons in the Bookmarks toolbar */
toolbarbutton.bookmark-item > .toolbarbutton-icon {
display: none;
}
I tried the multiple bookmark line for FF3 and I get it to work but cannot seem to adjust the height properly to view all my bookmarks. It cuts out halfway between the 1st and second bookmark line.
Here is the code I am using:
/* Multi-row bookmarks toolbar */
#PersonalToolbar {height: 200% !important; max-height: 999 !important;}
#PersonalToolbar:not([collapsed]) toolbarbutton {
visibility: visible !important;
}
#bookmarksBarContent .bookmarks-toolbar-items, #bookmarksBarContent { display: block !important;}
I tried to adjust the height to 200% and the max-height to 999 with no luck.
Help!
To vvt: To get the favicons not to show in tabs and also the progress wheel, I use this script along with Tab Mix plus. It seems either alone won’t do it. All that shows is the title and I like the red x close button.
/* Remove Favicon placeholder in Tab Bar */
.tab-icon {display: none !important;}
Can you help update these? thank you
/* Remove Back button when there’s nothing to go Back to */
#back-button[disabled="true"] { display: none; }
/* Remove Forward button when there’s nothing to go Forward to */
#forward-button[disabled="true"] { display: none; }
/* Remove Stop button when there’s nothing to Stop */
#stop-button[disabled="true"] { display: none; }
/* Color tabs
.tabbrowser-tab[selected="true"] > hbox,
.tabbrowser-tab[selected="true"] > .tab-close-button {
background-color: #FF9900 !important;
color: #2F4F4F !important;
Is there anyway to get rid of the scrollbar on the left all together?
How about the Google logo and text in the search bar?
Remove the recent page arrow?
Website icon/identity thing next to url bar (curvy piece)
And what about the drop down arrow on the right of the url bar?
Guess there’s no edit button, sorry for the double post. I meant the scroll bar on the right.
If you want to remove the Bookmarks Toolbar in the Bookmarks drop down menu (were the separators were removed earlier) just add:
#bookmarksToolbarFolderMenu {
display: none;
}
and it too will be gone.
How about this?
.tabs-alltabs-stack { display: none !important;}
Where can I find out what has this changed to?
To Lukas: To Lukas: Here’s all my css scripts. It does most of what you’re looking for. Don’t know why you’d want to remove the scroll though.
@namespace url(”http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul”);
#urlbar > .autocomplete-textbox-container
{font-weight: bold!important;color: darkslateblue!important}
/* Search bar color */
#search-container .searchbar-textbox {
-moz-appearance: none !important;border: 1 !important;
font-weight: bold!important;color: darkslateblue!important}
/* Hide the Sidebar bookmarks Search box */
#bookmarksPanel > hbox { display:none; }
/* remove Sidebar maximum width restriction */
#sidebar {min-width: none !important;
min-width: 0px !important;}
.search-go-button { display: none !important; }
#star-button { display: none !important;}
/* Remove Favicon placeholder in Tab Bar */
.tab-icon {display: none !important;}
#stop-button[disabled="true"] { display:none; }
#stop-button:not([disabled]) + #reload-button { display:none; }
#go-button-stack, .search-go-button-stack { display: none !important;}
/* hide the dropmarker in the Address url toolbar */
.autocomplete-history-dropmarker { display: none !important;}
/* hide live feed icon in Address url toolbar */
#feed-button { display: none !important;}}
/* menu items */
menuitem.bookmark-item > .menu-iconic-left > .menu-iconic-icon {
margin-top: 0px !important;
margin-bottom: 0px !important;}
/* hide the Back button when there’s nothing to go back to */
#back-button[disabled="true"] { display: none !important;}
/* hide the Forward button when there’s nothing to go forward to */
#forward-button[disabled="true"] { display: none !important;}
/* hide the Stop button when there’s nothing to stop */
#stop-button[disabled="true"] { display: none !important;}
toolbarbutton[id^="custombuttons-button"] .toolbarbutton-menu-dropmarker {
display: none !important;}
.tabbrowser-tabs tab .tab-close-button .toolbarbutton-icon,
.tabbrowser-tabs tab .tabs-closebutton .toolbarbutton-icon
{display: none !important;}
.tabbrowser-tabs tab:hover .tab-close-button .toolbarbutton-icon,
.tabbrowser-tabs tab:hover .tabs-closebutton .toolbarbutton-icon
{display: -moz-box !important;}
/* change text and background colors of tabs */
tab { -moz-appearance: none !important;}
/* change background */
.tabbrowser-tabs > tab[selected="true"] .tab-text {
background-color: rgb(255,255,153) !important;
color: green !important;
font-style: bold !important;}
/* change color of inactive tabs */
.tabbrowser-tabs > tab:not([selected="true"]) .tab-text {
background-color: rgb(100,200,80) !important;
color: black !important;}
/* change font color*/
.tabbrowser-tabs > tab[busy] .tab-text {
color: green !important;
font-style: bold !important;}
/* change font color of popup menus */
menupopup > menu,
menupopup > menuitem,
popup > menu,
popup > menuitem {
font-weight: bold!important;
color: darkslateblue!important;
background-color: #FAF8DC!important;}
/* hide list all tabs button */
.tabbrowser-arrowscrollbox + stack {
display:none!important;
}
Thanks headclnr!
@headclnr and Ken:
Thanks for your contributions here.
@Everyone:
Once I get a grasp on what all has changed for FF3 final, I’ll put up a bunch of updates. Keep those questions coming so we can look into all the tweaks everyone wants!
To hide the Recent Pages dropdown buttion (next to the forward and back buttons) use the following:
/* Remove Recent Pages dropdown button when it is unusable */
#back-forward-dropmarker[disabled="true"] { display: none; }
I found that I didn’t want to completely get rid of the rss feed and bookmark star icons; however, I didn’t want them to be a distraction. Here’s how to dim them:
/* Dim the RSS icon until hover */
#feed-button {-moz-opacity: 0.2 !important;}
#feed-button:hover {-moz-opacity: 1.5 !important;}
/* Dim the Bookmark star icon until hover */
#star-button {-moz-opacity: 0.2 !important;}
#star-button:hover {-moz-opacity: 1.5 !important;}
Also, if you use the Read It Later extension, use this to dim the “read later” checkmark icon:
/* Dim the Read It Later icon until hover */
#isRitL-later {-moz-opacity: 0.2 !important;}
#isRitL-later:hover {-moz-opacity: 1.5 !important;}
Hey, do you know how to disable favicons for the bookmarks toolbar?
i used to just use about:config for FF2 but that doesnt seem to work on the new version :(
sulfura:
toolbarbutton.bookmark-item > .toolbarbutton-icon {
display: none;
}
I can’t for the life of me figure out how to change the background color of the toolbars. In the past I used the below, but it only works on the tab bar and menu bar, not the new bookmarks or navigation bar:
/* Use a Background Image for the Toolbars */
menubar, toolbox, toolbar, .tabbrowser-tabs {
background-image: url(”background.gif”) !important;
background-color: none !important;
}
joe:
the bookmark bar is called ‘personal toolbar’. the code for changing its color is therefore:
#PersonalToolbar {background: #000000 !important;}
i want to make font larger for live bookmarks items please, have looked everywhere!
hi eric is there anyway i can remove the search and view dropdown from history sidebar and also remove bookmark this link from sidebar context menu with chrome.css
would appreciate that will be able to finally complete my personal browser.
thanks in advance.
uhm… I’d like to remove everything except the url from the location bar so that it’s just a plain textbox. at the moment I’ve gotten rid of everything except the site icon on the left. help?
oh, and also, how do I change the location bar font?
@headclnr:
/* Display only Location Bar textbox */
#menubar-items, #unified-back-forward-button, #stop-button, #reload-button, #search-container, #identity-box, #urlbar-container dropmarker {
display: none;
}
/* Change Location Bar font */
#urlbar {
font-family: “Courier New”, monospace;
}
eric: ah, identity-box and urlbar, not url-bar. works great. thank you! :)
@hose:
Do you mean the Live Bookmarks in the Bookmarks Menu or the Bookmarks Toolbar or something else?
@raydancer:
Sweet tweaks! Thanks for sharing!
hi eric any options on the history sidebar regarding my comment today at sanjay June 19th, 2008 11:45 am
thanks
@sanjay:
Sure, you’re next! Your request is a bit more difficult so I’d like to figure it out after work in a few hours, sound good?
sorry i thought you didnt catch my comment take your time i have been trying for weeks then i came across your website no worries.
Bonus!
/* Turn Location Bar Yellow for HTTPS */
#urlbar[level] .autocomplete-textbox-container { background-color: #FFFFB7 !important; }
hi eric, yes the rss bookmarks i have on the toolbar, when they drop down i want the text/font bigger for my
bad vision . . . thanks
@hose:
Do you mean the Live Bookmarks in the Bookmarks Menu or the Bookmarks Toolbar or something else?
i’m trying this via userChrome.css
this is what i came up with for now:
#PersonalToolbar {
min-height: 17px !important;
max-height: 17px !important;
}
what i need now for this to be perfect is code for how to move a little bit up in the bookmark bar the: Bookmark toolbar icons, Bookmark toolbar icon labels
will be much appreciated
i forgot to tell what i need it for:
reducing height of bookmark toolbar
@cybogd:
Off the top of my head, I think you can add this:
#PersonalToolbar { margin-top: -2px }
If that does not work like you want, let me know and I’ll dig deeper :)
Is there anyway to remove the google icon and drop down arrow from the searchbar? I got everything else I needed from others posts except that and removing the scroll bar (I normally just use my mouse middle button to scroll)
Any help would be appreciated
@Lukas:
.searchbar-engine-button { display: none; }
I tried to remove the scrollbar, but it’s one of those things I’m not sure I can figure out. I’ll try a bit more before I give up, though ;)
Alright, thank you.
One last thing. Is there anyway to adjust the height of the search bar? I just noticed it’s 2-3 pixels taller than the url bar.
How do you change the background color when you hover over a menu item? I use the following to change the TEXT color, but can’t get the background to change from XP’s blue.
menupopup > menu, menupopup > menuitem, popup > menu, popup > menuitem {
color: green !important;}
menupopup > menu:hover, menupopup > menuitem:hover, popup > menu:hover, popup > menuitem:hover {
color: #660207 !important;}
Nevermind my last post. I changed my theme and the search hieght is all fixed.
I am making my firefox look like firefox 1.5, and so I have the close button placed to the right on the tab bar. In firefox 3 there is a frame around it, do you know how to remove it?
I would also like to see how to remove the magnifying glass in the search bar
@Flyndre:
Sounds like you are trying to trick someone else into thinking their browser is FF 1.5 ;)
# Remove Magnifying glass
.search-go-button { display: none !important; }
I’ll look into your other request a bit later, not too long though.
I just downloaded FF3 (new user), selected using my IE7 bookmarks during install. I enjoy the site favicons on IE7, and ran FavOrg software before upload/install to ensure all proper sie favicons were showing.
However none of the site favicons show in FF3 except the Getting Started Tab.
I changed (about:config) browser.chrome.favicons and browser.chrome.site_icons to false closed, restarted and changed back to true, but nothing changes.
I have 2500 bookmarks and several links, so I really appreciate the site favicons when browsing for a link.
Does anyone know how to turn on the site favicons???
do you have a code so i can put the bookmark toolbar before the navigation toolbar?
Does someone know what the stars in the urldropdown are? I want to dim them like I did with the star in the urlbar:
/* Dim the Bookmark star icon until hover */
#star-button {-moz-opacity: 0.2 !important;}
#star-button:hover {-moz-opacity: 1.5 !important;}
@Trackz:
Try this:
/* Dim the URL Bar star icon until hover */
#PopupAutoCompleteRichList .ac-result-type-bookmark {-moz-opacity: 0.2 !important;}
#PopupAutoCompleteRichList .ac-result-type-bookmark:hover {-moz-opacity: 1.5 !important;}
That doesn’t seem to work.
i found this code on a site regarding my bookmarks toolbar before navigation toolbar problem, which is not working or at least not in firefox 3:
*
Moving toolbars
By changing the number in the last line you can move the bookmark toolbar up or down. Here it is the third toolbar.
/* move bookmark toolbar down */
#PersonalToolbar {
-moz-box-ordinal-group: 2 !important;
}
maybe u can help corecting it to work…thank you
This works:
/* Dim the URL Bar star icon until hover */
.ac-result-type-bookmark{-moz-opacity: 0.2 !important;}
.ac-result-type-bookmark:hover {-moz-opacity: 1.5 !important;}
@Trackz:
Great! I must have misspelled #popupAutoCompleteRichList
@hose:
This works for me, adjust the font-size for your needs :)
#bookmarksBarContent menupopup .bookmark-item label {
font-size: 1.5em;
}
@Terry:
I think there is a firefox extension that will get favicons for all your bookmarks, and I know there is Windows software for this. However, I can’t give you a tweak that will do this.
@sanjay:
Here you go!
#search-box, #viewButton, #addBookmarkContextItem { display: none; }
That will fix all you asked!
It should have been this:
#PopupAutoCompleteRichResult
I want to modify it a bit to make the star respond to selecting the result. Something like this:
#PopupAutoCompleteRichResult .ac-result-type-bookmark{-moz-opacity: 1.5 !important;}
#PopupAutoCompleteRichResult :not([selected="true"]) .ac-result-type-bookmark{-moz-opacity: 0.5 !important;}
The star is dimmed, but it won’t become normal when I select the result. Any ideas?
@headclnr
#
headclnr June 19th, 2008 3:37 am
sulfura:
toolbarbutton.bookmark-item > .toolbarbutton-icon {
display: none;
}
That didn’t work for me. Ideally I’d like to never ever see a favicon for the rest of my life but I have them on my bookmarks toolbar and in my bookmarks drop down.
I found one tweak which I have now conveniently forgotten which made the bookmarks toolbar text only, but I’d much prefer that there was just the generic page icon next to all my links.
cheers!
Edit: Sorry, I meant to say that your tweak got rid of the favicons in my bookmark toolbar just great, but I would prefer the generic icons.
I still have the favicons in my drop down too.
Sulfura try this:
open the about:config and set browser.chrome.site_icons to false and restart Firefox.
That should replace all site-icons with the default-icon.
Hello, Everyone,
I don’t use YouTube often, but whenever I do, the in-video overlay ads that come up on the bottom of the screen annoys me. Is there any way to block it? Extensions, tweaks, etc.? I do have Stylish so maybe a user style can block it or something (tried searching userstyles.org but it’s currently down). Thank you!
Is there a way to keep my search bar empty of the grayed-out default search engine names? I used to use this code:
#searchbar[empty="true"] .textbox-input-box {max-width: 0 !important;}
But now that i’ve updated to firefox 3, this code is no longer working. Any ideas? Thanks in advance!
I have just discovered this blog by accident. It’s great! I have copied large pieces to sort and put in my userChrome. Unfortunately, I am not clever enough to contribute anything useful. I noticed a question about hiding the drop arrow in the urlbar but have not seen a solution. I would like to hide the word ‘Bookmarks’ on the sidebar.
Hi, is it possible to force the bookmark star to show up in the location bar? That would be great, as the theme I use hides it.
i solved my problem with a help from someone else…here is the code that it does what i was looking for:
#nav-bar {-moz-box-ordinal-group:2 !important;}
i found a good site with some useful codes, but i can’t submit comment with the link for it…it gave me almost everything i need it to customize the look of my firefox 3
i’m also interested in a code that puts the navigation toolbar at the bottom of the browser…
this particular code i couldn’t find it anywhere and everything i came up with didn’t work
“I noticed a question about hiding the drop arrow in the urlbar but have not seen a solution.” I didn’t look carefully enough - I have found it now. Thank you, Kenneth.
hi eric
your a star thanks for the code nearly there.
Is there any way you can remove the search: toolbar in sidebar and you did put #addBookmarkContextItem, i wanted to remove bookmark this link… from context menu in sidebar.
thanks.
and also remove copy link location from sidebar context menu.
thanks
I don’t have close button to the right of tab in linux,but in windows i have.how to add the close button?
i use tree style tab
In the end, none of these things have completely gotten rid of all my favicons I’m afraid. But I have stumbled across this Delete Bookmark Icons add-on
http://www.sephiroth-j.de/1/mozilla/
which has done the job quite handily.
Thanks for your help anyway dudes!
this one dots the border of my tabs:
.tabbrowser-tab {
border-style: dotted !important;
}
however, I only want it to apply to unselected tabs. help?
@headclnr:
Try this:
#content tab:not([selected="true"]) {
border-style: dotted !important;
}
eric: works like a charm. thanks! :)
#
Trackz June 22nd, 2008 2:50 am
The star is dimmed, but it won’t become normal when I select the result. Any ideas?
Nevermind that. Fixed it. should have been just [selected="true"]
Hi Eric, the code below you gave me made my livebookmark
font larger, but now not as many words show because of the larger text, anyway to get the area increased?
thanks again.
#bookmarksBarContent menupopup .bookmark-item label {
font-size: 1.5em;
}
@marco:
For multibar tabs use the stylish extension with this:
http://userstyles.org/styles/4737
That should work great!
@hose:
OK, to make those menus bigger use this:
#bookmarksBarContent menupopup {
width: 500px;
}
You might have to tweak the width a bit but it’ll work.
Great job eric! some good tweaks here. What I was wondering is if it’s possible to hide the dropdown marker after the forward button, but without doing what I can only call ’slicing’ off the end. I tried the
#back-forward-dropmarker[disabled="true"] { display: none; }
tweak, it indeed removed the arrow but kinda ruined the image. is it possible to just remove the black arrow and sort of “compress” the whole thing rather than simply slicing it off, or is it a whole component that can’t be gotten rid of without the slicing? i’m sure i’ve just overcomplicated what I’m trying to ask, but can’t seem to explain it properly!
Thanks for all the good stuff! :)
hi eric
can you do anything with this for history sidebar it will hide the full panel
/* Hide the Sidebar bookmarks Search box */
#bookmarksPanel > hbox { display:none !important; }
Here’s a challenge I haven’t found the answer to and would be grateful if someone could help. How do I remove icons from the menus (including the context menus). I’m happy with the favicons in Bookmarks, but I have a couple menu items from extensions, and it just looks stupid to have whole menus with just one or two ugly icons.
Also, any word on a replacement or an update on the BackISClose addon? My mouse’ back button will thank you.
Hello:
How do you move the drop-down arrow from its current location (beside the forward button) to the far right of the url box (like it used to be in FF2, etc.)
I hope I am explaining correctly.
How do I change the font color of Bookmark toolbar button labels ?
I tried this -
#personal-bookmarks toolbarbutton[label="FF"] .toolbarbutton-text {color: #00FF00 !important; }
But it doesn’t work.
===MULTIPLE BOOKMARK TOOLBARS===
Hi all,
First of, thanx a lot Eric for your blog.
The following is not working for me:
/* Multi-row bookmarks toolbar */
#PersonalToolbar {height: 100% !important; max-height: none !important;}
#PersonalToolbar:not([collapsed]) toolbarbutton {
visibility: visible !important;
}
#bookmarksBarContent .bookmarks-toolbar-items, #bookmarksBarContent { display: block !important;}
BUT, I found this plug-in that does exactly what we want:
https://addons.mozilla.org/fr/firefox/addon/6937
Have fun :)
I’ve started to use the following code to make the URLbar have a yellow background when on an HTTPS site:
/* highlight HTTPS URLs */
#urlbar[level] .autocomplete-textbox-container > * {
background-color: #FFFFB7 !important;
}
It works fine, but now the adjoining backgrounds for the RSS button, the star-button and the dropmarker backgrounds all stay white and should be yellow, too.
Help!
Jimmy
Could someone come up with the code to:
1. hide the ‘Tags:’ option from CTRL+D AKA add bookmark dialog?
2. add a ‘Description:’ option to the CTRL+D AKA add bookmark dialog?
3. add “Load this bookmark in the sidebar” option to the CTRL+D AKA add bookmark dialog?
Thanks in advance :)
I finally found about the solution (I have wanted this for month). Here is my code:
/* when adding a bookmark, Show:
Location
Keyword
/*/
#editBMPanel_locationRow,
#editBMPanel_keywordRow {
visibility: visible !important;
-moz-box-align: center !important;
}
#editBMPanel_tagsSelector[collapsed="true"] {
display: none !important;
}
/* Plus Description, Minus Tags + “Load this bookmark in the sidebar”/*/
#editBMPanel_descriptionRow,
#editBMPanel_loadInSidebarCheckbox {
visibility: visible !important;
-moz-box-align: center !important;
}
#editBMPanel_tagsRow {
display: none !important;
}
Source: http://forums.mozillazine.org/viewtopic.php?p=3651185#p3651185
Hello Eric, On June 22nd I asked two questions. I think you missed the second one: “I would like to hide the word ‘Bookmark’ on the sidebar”
I have found the answer:-
#sidebar-title,menuitem[label="Bookmarks"] {
display: none !important;
}
Thanks for all the code (from you and others) that I have used from this blog.
In answer to Pairadimesitty,
(How do I remove icons from the… menu items from extensions?)
You need to scan your extensions’ code to find the menuitem id(s). In most cases scanning for ‘id=”menuitem-’ will work. Then you can suppress the icon(s) with the following:
#menuitem-xxxxxxx,
#menuitem-yyyyyyy {list-style-image: none !important;}
You could also just use
.menuitem-iconic {list-style-image: none !important;}
however, this removes the default favicon (but not regular favicons) in the bookmark and history menus; the sidebars are unaffected.
I have removed the navigation bar, and I now just have the bookmarks toolbar and then toolbar with the file edit etc.
There is a line between these. Does anyone know how to remove it?
Also there is like 1 or 2 options from the EDIT menu that I want to move to TOOLS. Can I do that? Also Can I remove some of the entries from tools?
Opps, forgot to add, can I rename the TOOLS menu entry?
@break:
No, I tried for quite awhile to get that arrow sliced off cleanly but couldn’t. Now my theme has it changed anyway…
@sanjay:
Sorry for the wait, here is a simpler solution to removing the history sidebar search –
#bmHi-toolbar { display: none; }
@Pairadimesitty:
menu image, #contentAreaContextMenu image { display: none; }
@Jasmine:
Yeah, I’m confused. The drop down arrow for what now?
@Varun:
Ugh. That is way annoying. I’ll keep trying and see if I get something…
@Cyrniste:
Thanks for the tip! A lot of people were looking for that :)
hi eric
thank you! im sure you wanted get away from all this because chrome.css does get to me after awhile but kept on playing with the code below and sorted it:-
#bookmarksPanel > hbox { display:none !important; }
this works perfectly:-
#historypPanel > hbox { display:none !important; }
sorry wrong code above:-
#history-panel > hbox { display:none !important; }
Hi guys! At first, please forgive me my bad English :)
My question is: any solution to disable the smooth mouse “fade-in highlight” rollover effect on tabs?
Thanks in advance.
Aaron: I don’t see any fade in on tabs with these settings (you can adjust the colors):
/* change text and background colors of tabs */
tab { -moz-appearance: none !important;}
/* change background */
.tabbrowser-tabs > tab[selected="true"] .tab-text {
background-color: rgb(255,255,153) !important;
color: green !important;
font-style: bold !important;}
/* change color of inactive tabs */
.tabbrowser-tabs > tab:not([selected="true"]) .tab-text {
background-color: rgb(100,200,80) !important;
color: black !important;}
/* change font color*/
.tabbrowser-tabs > tab[busy] .tab-text {
color: green !important;
font-style: bold !important;}
Thanks for suggestion Kenneth, but this isn’t what I exactly want. I need to disable highlight effect when mouse pointer rolls over / out inactive tab. Here is screenshot:
img337.imageshack.us/img337/6360/screensf3.th.gif
Whoops >.<
I mean
http://img337.imageshack.us/my.php?image=screensf3.gif
What you are looking for is the difference between these two items:
.tabbrowser-tabs > tab:not([selected="true"])
.tabbrowser-tabs > tab:not([selected="true"]):hover
if you make the :hover one the SAME as the other one, then there will be no change when you hover.
Jim
@ Jimmy:
Thanks for giving a hint. I’ve tried this:
/* Active tab */
.tabbrowser-tab[selected="true"]
.tabs-bottom,
{
background-color: rgb(215,212,205) !important;
}
/* Inactive Tab */
.tabbrowser-tab:not([selected="true"]) {
background-color: rgb(197,193,187) !important;
}
/* Tab hover colors */
.tabbrowser-tab[selected="true"]:hover {
background-color: rgb(215,212,205) !important;
}
.tabbrowser-tab:not([selected="true"]):hover {
background-color: rgb(197,193,187) !important;
}
But without success. Any ideas?
Thanks much to Spyspeed and Eric. Eric’s code for the context menu worked perfectly. And Spyspeed, your second code did nothing, though I’m sure I put the syntax in wrong. However, when I scanned the offending extensions’ menu items I found them in the xul files. Rather than blocking the icons in chrome I just deleted the icon class in the xul directly. So, thanks.
Here are my tweaks and info. Nothing too difficult, but quite a few different things. Maybe it’ll help/inspire someone. I love that despite all the junk I have there’s no delay in startup or use.
http://i321.photobucket.com/albums/nn396/Pairadimesitty/MyFF3.jpg
Add-ons:
Adblock Plus & Filterset.G
Autohide - better fullscreen
Back IS Close - doesn’t work for FF3 yet
ChatZilla - irc
Download Statusbar - best bar EVAR!
Easy DragToGo - select and drag text a little opens new tab with site or search, simple but cool
Showcase - view all tabs at once in a grid
Fission - Progress bar and info in location bar, no more status bar needed
Glasser - Aero glass Vista theme extends into toolbar
IE Tab - IE in FF in a click
Link Widgets - Up one directory in page, surf page results: next, pref, first, last
Menu Editor - nuff said
Orbit Downloader - snags ANY embedded video
PageStyle2Tab - looks good, pick out tabs easier
Personal Menu - special menu button, press alt to see traditional menubar
PicLens - awsome pic and vid result wall
Save Session - sometimes I want to, sometimes I don’t, a button is good
Stylish - page styling
And my Chrome, again, kinda simple, but it’s the overall effect that matters.
/* Autohide Back/Forward Buttons and Dropdown Marker when there is nothing to go Back/Forward to */
#back-button[disabled="true"] { display: none; }
#forward-button[disabled="true"] { display: none; }
#back-forward-dropmarker[disabled="true"] { display: none; }
/* Link Widgets Autohide When there are no Links */
#linkwidget-first[disabled="true"] { display: none; }
#linkwidget-prev[disabled="true"] { display: none; }
#linkwidget-next[disabled="true"] { display: none; }
#linkwidget-last[disabled="true"] { display: none; }
#linkwidget-up[disabled="true"] { display: none; }
#linkwidget-top[disabled="true"] { display: none; }
/* Combine Stop and Reload Buttons, Hide Both as Necessary */
#reload-button[disabled="true"] { display: none; }
#stop-button[disabled="true"] { display: none; }
#stop-button:not([disabled]) + #reload-button { display: none;}
/* Remove “List all Tabs” Button */
/*.tabs-alltabs-button { display: none !important;}
.tabs-alltabs-box { display: none !important;}*/
/* Remove the Bookmark star, Go Button, RSS Feed icon, Context Menu icons, and the Add Favorites Star*/
#star-button { display: none !important; }
#go-button { display: none !important; }
#feed-button { display: none !important; }
#star-button { display: none !important; }
#menu image, #contentAreaContextMenu image { display: none; }
I have my location bar set to do a standard google search, eliminating the search bar, simpler is better. No button is ever grayed out, if it’s not active it’s hidden. All the menu functions I care about are in the menu button. with all that I was able to cut down to just the one tool bar, the tab bar, and the downloadbar without losing any functions. The context menus are cleaned of junk too. My toolbar ranges anywhere from 8-17 buttons. I’ve never seen them all at once though. Hope this gives someone a good idea for abusing their own Firefox.
@Aaron
So sorry for shooting my mouth off without testing it first. You are right… I couldn’t find a way to stop the hover highlight even by setting the two conditions the same (with and without -moz-appearance: none !important; stuck in there).
To tell you the truth, I kind of like the highlight when I mouse over the tab. I even have the tab close buttons (on the tabs and also on the end of the tab bar) faded at first and become red on mouse-over.
@Jimmy
Unfortunately, this rollover effect seems not to be controllable through CSS. Umm.. I think we can live with it :)
Hey guys. Thanks for the tips. I know comments have really died down for the last couple of weeks, but I have a question related to the Add Bookmark dialog that I haven’t been able to find answered elsewhere.
I used the above tips to add the Keyword field, which works great, but I’d also like to do is automatically expand the folder list. I tried the following, which does SHOW the folder list box and the New Folder button, but the folder list box is blank: I still need to click the Folder expander button in order to populate the contents of the list box.
#editBMPanel_folderTree,
#editBMPanel_newFolderBox {
visibility: visible;
}
Does anyone happen to know how to this work right?
Thanks.
@Pairadimesitty - if you read this, just thought Id let you know that Filterset.G isnt recommended for ABP:
http://adblockplus.org/en/faq_project#filterset.g
Hmm, interesting. I’d noticed that G-Updater had become a little superfluous. Though I would tend to say I still want it, I’ll take another look at it and judge whether or not it’s worth it to keep it. Thanks anon.