#bookmarksBarContent toolbarbutton modifications in userChrome.css no longer working

In firefox 3.x I use a userChrome.css in, among other things, I hide the folder icons and the 'drop-down' "arrow" icon in order to reduce space used, with the following:
<pre><nowiki>/* Remove Bookmark Item Icons */
#bookmarksBarContent toolbarbutton:not([type=menu]) image {
display: none !important;
-moz-margin-end: 0px !important;
/*Hide Bookmark Folder Icon*/
#bookmarksBarContent toolbarbutton[type=menu] image {
display: none !important;
-moz-margin-end: 0px !important;
#bookmarksBarContent toolbarbutton[container="true"] .toolbarbutton-menu-dropmarker {
display: none !important;
}</nowiki></pre>
This is now longer working in firefox 4.0b6. Can someone tell me how to do this in firefox 4 ?
Thanks much

Use #personal-bookmarks as selector. That should work in both versions.
<pre><nowiki>/* Remove Bookmark Item Icons */
#personal-bookmarks toolbarbutton:not([type=menu]) image {
display: none !important;
-moz-margin-end: 0px !important;
/*Hide Bookmark Folder Icon*/
#personal-bookmarks toolbarbutton[type=menu] image {
display: none !important;
-moz-margin-end: 0px !important;
#personal-bookmarks toolbarbutton[container="true"] .toolbarbutton-menu-dropmarker {
display: none !important;
}</nowiki></pre>
The menu button have ID #bookmarks-menu-button and the bookmarks have ID #PlacesToolbar

Similar Messages

Changed a Library Item and now my CSS no longer works!

I am so frustrated I am almost in tears. I created a menu in a roughly 7 page website and used DW Library menu to put it on additional pages. Everything was working fine and then I changed a path to one of my links and hit the button to update the rest of the pages and that's when it happend. My CSS was gone, no longer applying to any of my menus. I created an additional CSS sheet just to style my menu and it worked fine up until I changed a frickin link to one my menu icons. Now my CSS sheets won't apply at all. I have no idea what has happened and why me changing the path of a link would void out my styles. Has anyone else had this happen? Suggestions are greatly appreciated. Thanks!

I don't want to rub salt into your wounds here, but why are you using Library Items for menus? That's what DW Templates are for.
http://www.smartwebby.com/web_site_design/dreamweaver_template.asp#1
Or better still, Server-Side Includes.
http://www.smartwebby.com/web_site_design/server_side_includes.asp
Shortcomings of Library Items: they cannot be inserted into the <head> tags of documents. Nor can they contain code that belongs in the <head> tags. Library items can only be inserted into the <body> tags.
My advice is to run your code through the online validation tools below and fix reported errors.
HTML - http://validator.w3.org/
CSS - http://jigsaw.w3.org/css-validator/
If you can't solve the problem yourself, upload page(s) and supporting files to a public web space you control and post the URL here.
Nancy O.

UserChrome.css broken in FF 10.0.2 and Nightly 13.0a1?

I noticed with the FF 10.0.2 update that userChrome.css is no longer being applied. To test, I created a new profile with no addons or extensions, and a single modified CSS value (to opacify the titlebar) in userChrome.css. It doesn't work as usual or expected (no result at all). I noticed that Nightly 13.0a1 is also affected. Here's the one CSS value I pared the userChrome down to: 
 
<pre><nowiki>#TabsToolbar {
background-color: -moz-dialog !important;
</nowiki></pre>
Thanks

That tab bar already has that background-color: -moz-dialog !important; rule, but there is another rule that sets a background-image
<pre><nowiki>background-image: -moz-linear-gradient(50% 100%, rgba(0, 0, 0, 0.3) 1px, rgba(0, 0, 0, 0.05) 1px, transparent 50%);
</nowiki></pre>
You probably need to add a -moz-appearance: none !important; rule and may also need to disable background images or set a different background image instead.
See line 27 and line 1429 in:
* chrome://browser/skin/browser.css

Is this a bug or am I using the wrong flags in userChrome.css

I'd like to have my Bookmark Toolbar automatically hide until I move my mouse over the location. I found some code a while ago to do this, but I never really tried it until now with FF4. When I put in the code and move the bookmark toolbar into the self-hiding panel, it works fine until I open a new window or exit/restart the browser.
 
<pre>#PersonalToolbar {display: none;}
#navigator-toolbox:hover > #PersonalToolbar {display: -moz-box;}
</pre>
The auto-hide until hover works fine with the box, but the Bookmark Toolbar comes up completely empty. No arrow, just empty space. Every time I comment out the line in userChrome.css, the buttons reappear. When I move the bookmark toolbar out and then re-enable the line and restart, the buttons are fine when I move them back in until the next exit.
I've tried this on three machines (all Windows 7 though, both 32-bit and 64-bit) and the behavior is the same. I've also tried disabling all add-ons and extensions with no change in the results.
Is this a bug or am I using the wrong flags (-moz-box)? Thanks for any ideas/help provided.

cor-el:
Thanks for the suggestion. I already tried rebuilding that file as well and it didn't help. Also, all the changes I make are retained from session to session in terms of placement and what's shown/hidden, it's just the contents of the bookmark toolbar that disappear. The toolbar is still there and I can drag things to it, but again, they disappear after restarting the browser.
edit (clarification):
When I say the items disappear, I mean they are no longer visible or clickable. They are still there in the sense that they appear in the Bookmark menu and if I move the Bookmark Toolbar from its own toolbar into the space next to the Menu Toolbar, they are then shown.

Firefox userChrome.css tweaks

With firefox3 out I had to update all my tweaks, so I thought I'd share.
/* Remove throbber */
#throbber-box { display: none !important; }
/* Remove go button */
#go-button { display: none !important; }
/* Remove the bookmark star */
#star-button { display: none !important; }
/* Remove magnifying glass button from search box */
.search-go-button { display: none !important; }
/* Merge reload and stop buttons. NOTE: Stop button must be placed before reload button */
#stop-button[disabled] { display: none; }
#stop-button:not([disabled]) + #reload-button { display: none; }
/* Remove the history menu */
#history-menu { display: none !important; }
/* Remove forward button drop down arrow */
#back-forward-dropmarker { display: none !important; }
/* Hide the dropmarker in the Address url toolbar */
.autocomplete-history-dropmarker { display: none !important; }
What I still can't get working is some rounding on the address bar. Here is my current attempt...
/* Slightly rounded address and search bar corners */
#urlbar {
-moz-appearance: none !important;
-moz-border-radius: 3px !important;
padding-right: 1px !important;
#search-bar {
-moz-appearance: none !important;
-moz-border-radius: 3px !important;
What do you tweak?
Edit: added a few more

best rounded effect:
https://addons.mozilla.org/en-US/firefox/addon/933
not compatible with FF3
my userChrome.css
/* Hide the searchbar in Bookmark Sidebar */
#bookmarksPanel > hbox { display:none; }
/* Remove the vertical separator on the sidebar */
/#sidebar-splitter { display: none !important; }
/*"linux user type" scrollbar
#scrollbarbutton[sbattr="scrollbar-up-bottom"]{
display: -moz-box !important;
/* Eliminate the throbber and its annoying movement. */
#throbber-box
display: none !important;
iframe[name=google_ads_frame] {display: none !important;}
scrollbarbutton[sbattr="scrollbar-up-bottom"]{
display: -moz-box !important;
/* Force the label to be visible, even in no text */
toolbar:not([mode=full]) #back-button .toolbarbutton-text {
display: -moz-box !important;
padding-bottom: 2px;
padding-right: 10px;
padding-left: 2px;
/* put some spacing around the button icon */
toolbar:not([mode=full]) #back-button .toolbarbutton-icon {
padding-left: 8px;
padding-right: 6px;
/* Put the label to the right of the button */
toolbar:not([mode=full]) #back-button .toolbarbutton-menubutton-button {
-moz-box-orient: horizontal !important;
/* Remove the Go, Bookmarks, History and Help menus
(These are just examples. Try changing "Go" to "Edit" or "Bookmarks") */
menu[label="Go"], menu[label="Help"], menu[label="History"], menu[label="Bookmarks"]{
display: none !important;
/* Make menus XP style */
menupopup, popup {
border: 1px solid ThreeDShadow !important;
-moz-border-left-colors: ThreeDShadow !important;
-moz-border-top-colors: ThreeDShadow !important;
-moz-border-right-colors: ThreeDShadow !important;
-moz-border-bottom-colors: ThreeDShadow !important;
padding: 2px !important;
background-color: Menu !important;
menubar > menu {
border: 1px solid transparent !important;
padding: 2px 5px 2px 7px !important;
margin: 0 !important;
menubar > menu[_moz-menuactive="true"] {
background-color : Highlight !important;
color: HighlightText !important;
/* Change color of active tab */
tab{
-moz-appearance: none !important;
tab[selected="true"] {
background-color: rgb(222,218,210) !important;
color: black !important;
/* Change color of normal tabs */
tab:not([selected="true"]) {
background-color: rgb(200,196,188) !important;
color: gray !important;
/* Change cursor for JavaScript links */
a[href^="javascript:"] {
cursor: move;
/*Additionally if you want the the "list all tabs" button shown only when the tabs overflow, use this instead: */
/*.tabs-alltabs-stack {
display: none !important;
.tabbrowser-tabs:not([overflow="true"]) > .tabs-alltabs-stack {
display: none !important;
/* Remove extra padding from the Navigation Bar */
.toolbarbutton-1, .toolbarbutton-menubutton-button {
padding: 2px 3px !important;
.toolbarbutton-1[checked="true"], .toolbarbutton-1[open="true"],
.toolbarbutton-menubutton-button[checked="true"],
.toolbarbutton-menubutton-button[open="true"] {
padding: 4px 1px 1px 4px !important;
/* Remove Stop button when there's nothing to Stop */
#stop-button[disabled="true"] { display: none; }
/* 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 magnifying glass button from search box*/
.search-go-button-stack { display: none !important; }
/* Make inactive tabs hardly visible */
#content tab:not([selected="true"]) {
-moz-opacity: 0.5 !important; }
/* Slightly rounded address and search bar corners with FF2 use Wellrounded add-on*/
#urlbar {
-moz-appearance: none !important;
-moz-border-radius: 3px !important;
padding-right: 1px !important; }
/* Less bookmark button spacing */
.bookmark-item > .toolbarbutton-text {
margin: 0 1px !important;
/* hide seperators between toolbars, better results with some themes */
#toolbar-menubar {
min-height: 11px !important;
padding: 0px !important;
margin: 0px !important;
border: none !important;
#nav-bar {
border: none !important;
padding: 0px !important;
#PersonalToolbar {
border: none !important;
/* Change the progress bar color */
.progress-bar {
-moz-appearance: none !important;
background-color: #E8E8E8 !important;
/* Bookmarks Font */
.bookmark-item > .toolbarbutton-text {
margin-top: 4px !important;
/* The following four lines were added by KDE */
scrollbarbutton[sbattr="scrollbar-up-top"] { display: -moz-box !important; }
scrollbarbutton[sbattr="scrollbar-down-top"] { display: none !important; }
scrollbarbutton[sbattr="scrollbar-up-bottom"] { display: -moz-box !important; }
scrollbarbutton[sbattr="scrollbar-down-bottom"] { display: -moz-box !important; }
Last edited by broch (2008-06-26 04:14:55)

Problem with userchrome.css being effective in Hebrew versions of Firefox

Hi,
I am trying to remove the Tools menu in Firefox on certain student computers (I am the systems administrator in a small college).
After searching around the internet I was able to put together a userchrome.css file, I placed it in the correct folder and it indeed removed the Tools menu.
However, I later noticed that it seems to work only on computers with English-language Firefox, and did not work on other computers that had Hebrew-language Firefox.
Specifically, it worked on versions 3.6.12 and 3.6.24 in English, and did not work on versions 3.6.12 or 6.01 in Hebrew. Note that I tested the same version (3.6.12) in both Hebrew and English, and therefore I concluded that the Hebrew-language interface is what is causing the problem.
Here is the gist of the userchrome.css file I tried:
* Do not remove the @namespace line -- it's required for correct functioning
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
menu[label="Tools"] {
display: none !important;
I did try replacing the word "Tools" with its Hebrew-language equivalent as it appears in Hebrew Firefox, but that didn't work either.
Does anybody have any information on using userchrome.css on Hebrew Firefox (or on non-English versions of Firefox)?
Thanks,
-Michael

It would be better to lock the related prefs if you want to prevent user s from making changes to settings.
Use a mozilla.cfg file in the Firefox program folder to lock prefs or specify default values. 
Place a file local-settings.js in the defaults\pref folder where you also find the file channel-prefs.js to specify using mozilla.cfg.
pref("general.config.filename", "mozilla.cfg");
pref("general.config.obscure_value", 0); // use this to disable the byte-shift
See:
* http://kb.mozillazine.org/Locking_preferences
You can use these functions in mozilla.cfg:
defaultPref(); // set new default value
pref(); // set pref, but allow changes in current session
lockPref(); // lock pref, disallow changes

Not able to find userChrome.css file for customizing the Firefox browser. I just installed 20.0.1 firefox browser. Want to disable/remove navigation bar.Pls Hlp

Not able to find userChrome.css file for customizing the Firefox browser. I just installed 20.0.1 Firefox browser version.
I want to disable/remove navigation bar from the browser window, making the browser to work like kiosk mode.
Please Help,
Thanks,
Vishal.

hello,
here is the complete path ..
''C:\Documents and Settings\XXXXXXX\Application Data\Mozilla\Firefox\Profiles\chrome"
Let me know
Thanks,
Vishal.

Making Firefox run as a bare content panel only 60px high using userChrome.css and localstore.rdf

I'm developing a web application for personal use, which due to extreme space constraints must be contained within a Firefox window measuring exactly 60px high by 331px wide. The window must have all the controls and bordering removed and appear as a totally bare pane whilst retaining the ability to move between tabs using CTRL-TAB.
So far I've managed to remove all the controls and bordering and retain the CTRL-TAB functionality using the custom userChrome.css style sheet pasted below. I've added a 1px border to the bottom and right for clarity. Making #navigator-toolbox visibility:hidden instead of display:none enables CTRL-TAB to work without the navigator-toolbox being visible. Giving #tab-view-deck -85px top margin aligns the top of the web page with the top of the Firefox window. Setting #browser-border-end, #browser-border-start display:none removes the effective border to the left and right of the browser window. So far so good.
I then set the following parameters in localstore.rdf in the profile folder.
<pre><nowiki>
<RDF:Description RDF:about="chrome://browser/content/browser.xul#main-window"
height="149"
width="331"
screenX="0"
screenY="0"
sizemode="normal" /> </nowiki></pre>
The window appears perfectly at the top left of the screen and works exactly as specified. Unfortunately, when I reduce the height parameter to 60px, the window remains about 100px tall. I guess I'm missing some key important override rules in my userChrome.css or perhaps some other Firefox configuration settings need to be changed. Although it seems like a small difference, reducing the window from 100px to 60px will result in a massive design shift and a huge productivity gain. If you can help, I'd been extremely grateful. Thanks,
Neil
I'm using FF 33.0 and Windows 8.1.
Content of userChrome.css:
<pre><nowiki>
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
#main-window {
-moz-appearance:none !important;
#titlebar {
display: none !important;
#tab-view-deck {
border-bottom: 1px solid black !important;
border-right: 1px solid black !important;
margin: -85px 0px 0px 0px !important;
padding: none !important;
#tab-view-deck * {
border: none !important;
margin: none !important;
padding: none !important;
#navigator-toolbox {
visibility: hidden !important;
#browser-border-end, #browser-border-start {
display: none !important;
</nowiki></pre>
''added the forum code for displaying css code properly''

For some reason the userChrome.css has not posted correctly. Each instance of 1. should be replaced with # denoting an ID selector.

How do I show the bookmarks toolbar while in fullscreen on Firefox 20? In older versions you could edit the userChrome.css file. Does that still exist?

After searching for this option, it appears it was very easy to do in older versions of firefox on windows 7. Many posts say you can edit the userChrome.css file to add:
#PersonalToolbar[moz-collapsed="true"] {
visibility: visible !important;
However, on 2 machines with firefox 20, I've searched for that file and cannot find it. Does it even exist any more? if not, how can I set firefox to go to fullscreen mode and continue to show the bookmarks toolbar? Unchecking hide toolbars does not work for the bookmarks toolbar.

userChrome.css does not exist by default. You can create it; it's an ordinary text file. Note that you do need a namespace at the beginning of the file.
You could try this:
@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#PersonalToolbar[moz-collapsed="true"]{
visibility: visible !important;
#navigator-toolbox[inFullscreen="true"]{
margin-top:-62px !important;
I added the second rule to prevents the toolbar area from rolling all the way up. The specific value may need to be adjusted by a few pixels depending on your toolbar heights.

Is there a way to disable tab font smoothing (maybe with userchrome.css)?

hello everyone I've just switched from chrome to ff and I'm very satisfied. Just one problem, is there a way to disable tab font smoothing (maybe with userchrome.css)? I've changed the colour of tab font (with userchrome.css) to white to improve readability but with white text is too bold. thanks !!

hey thanks for the quick reply. here's a screenshot
http://www.mediafire.com/view/?c2a2l69ci5zbq#bt6qrwr6ku8m5n6
i think we just have to add some antialiasing in the userchrome.css? but i don't know the code.
here's my modified userchrome.css
/* Inactive Tab */
tab:not([selected="true"]) {
color:white !important;}
/* Tab while loading */
tab[busy] {
color: blue !important;}
tab .tab-text {
font-size: 12px !important;
/* tab font */
tab .tab-text {
font-family:Verdana !important;
i read somewhere else the problem is more evident with white text on dark background
thanks

How to adjust userChrome.css to move the #identity-icon-label to the right side of the #urlbar?

I hate the way the #identity-icon-label moves the URL over to the right. I've applied a patch to just hide it, but I'd rather make it behave more like IE8 and just have that box show up way over at the right end of the #urlbar.
So far, my customization experiments in userChrome.css havent yielded the desired result. Also, I thought it would be nice for someone else to be able to search and find a solution to this issue. (If it can be answered.)
Thanks :)

Try code like this to set the wanted order.
<pre><nowiki>
#urlbar .textbox-input-box {-moz-box-ordinal-group:1!important}
#identity-box {-moz-box-ordinal-group:2!important}
#urlbar-icons {-moz-box-ordinal-group:3!important}
</nowiki></pre>

FF9 - can i hide window control buttons in titlebar (min, max, close) with userchrome.css?

I use FF9. In userscript.css i hide titlebar and orange app button, but window control buttons still visible! I just can`t find working script.
I dont need min-max-close button and wont to hide it without extension if possible.
Here is screenshort:
http://s018.radikal.ru/i522/1201/50/f6a6ea445507.jpg

Try this code in userChrome.css below the default @namespace line.
*http://kb.mozillazine.org/userChrome.css
The customization files userChrome.css (interface) and userContent.css (websites) are located in the chrome folder in the user profile folder.
*http://kb.mozillazine.org/Editing_configuration
<pre><nowiki>*http://www.mozilla.org/en-US/firefox/channel/
#titlebar-buttonbox { display:none!important; }
</nowiki></pre>

I am trying to hide the Options menu in UserChrome.css but it is not working. Here is what I have tried menuitem[label="Options..."] {display:none !important;}

In the userChrome.css I have tried the following entry: #updateSeparator, #checkForUpdates {display: none !important;}
menuitem[label="Options..."] {display:none !important;}
menuitem[label="Add-ons"] {display:none !important;}
menuitem[label="Get Bookmark Add-ons"] {display:none !important;}
The other lines work, but the line to hide the Options menu does not. This in on Windows 32-bit XP sp3.

It is an ellipsis (…) and not three dots.
If there is an ID for a menu entry like in this case #menu_preferences then it is better to use that ID.
<pre><nowiki>#menu_preferences, #menu_openAddons, {display:none!important;}</nowiki></pre>
"Get Bookmark Add-ons" is a normal bookmark that you can remove via the right-click context menu or move elsewhere.

UserChrome.css works on XP but not on Windows 7

Hello.
I have modified userChrome.css which mainly fiddles with tab widths based on if it is selected or not. This works fine on XP but does absolutely nothing on Windows 7.
Any idea where to start looking the reason for this? What is different in Win7 regarding dealing with tabs?

Nevermind, turns out that FF just didn't close properly when I was editing that file, after forcing it to close using taskmanager and starting again that userchrome.css worked just fine. Bug in closing the FF in this case.

Where can I find "\chrome\userChrome.css" of Firefox 5 in Win7

Hi Guys
I can't find folder "chrome" in C:\Users\<Windows login/user name>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile folder> any more.
What's changed in firefox5. Now i want to change something in userChrome.css. What should i do?

You need to create a new text file userChrome.css if that file doesn't exist yet. 
If you have an example file userChrome-example.css then you can rename that file.
Make sure that the file starts with an @namespace line.
<pre><nowiki>@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
</nowiki></pre>
See:
* http://kb.mozillazine.org/Editing_configuration
* http://kb.mozillazine.org/Editing_configuration/Manual_editing
* http://kb.mozillazine.org/Editing_configuration/Troubleshooting

#bookmarksBarContent toolbarbutton modifications in userChrome.css no longer working

Similar Messages

Maybe you are looking for