Firefox 4 - userChrome questions

[Lazy Jones]

Hello everyone!

I have recently moved to Firefox 4 Beta 7 and i wanted to remove some stuff i have never used through userChrome.css file. However, me being a complete newbie when it comes to css, i encountered a lot of problems. I have found a similar thread on this forum (from 2008) that partially helped me to achieve what i wanted to do.

userChrome CSS code im currently using is this:

Code: Select all

menu[label="Bookmarks Toolbar"] {display: none !important;}
menuitem[command="Browser:BookmarkAllTabs"] {display: none !important;}
menuitem[id="subscribeToPageMenuitem"] {display: none !important;}
#organizeBookmarksSeparator { display: none !important;}

However, i would also like to remove following things but for the life of me i can't figure how to do it:

1. When i press CTRL+B and open bookmarks sidebar i would like to remove "Bookmarks Toolbar" that is located just below the Search bar.


so it would look like this:



2. When i press Bookmarks button on the right side of the tab bar i would like to remove following things: View Bookmarks Toolbar, Separator (between View Bookmarks Toolbar and Show All Boomarks), Subscribe to this page, one of the separators on the bottom.



So after messing with userChrome file it would look like this:




Thanks everyone for reading and i hope someone will be able to help me or at least point me into the right direction.

[LIMPET235]

Moving to the Builds Forum...

[tuoppi]

Try using DOM Inspector to find out the id's of the UI elements and use those to select elements instead of attributes (label, command, etc). After installing and opening DOM Inspector click on File - Inspect Chrome Document - choose the top one that says something like Page Title - Mozilla Firefox. Then you can find info about an element by clicking on the icon that looks like square and mouse arrow and then clicking on the element you want to inspect. In menus though (afaik) you have to first inspect the menu and look for the individual elements from the tree view (left side of DOM Inspector) manually because the menu keeps closing before you can click on a element inside it. On the right side of DOM Inspector you can see info about the current element, you can use the label to identify you are looking at the correct item. Then look at the id, bit and use that to select that element in your userChrome-file.

instead of

Code: Select all

menuitem[id="subscribeToPageMenuitem"] {display: none !important;}

you should write

Code: Select all

menuitem#subscribeToPageMenuitem {display: none !important;}

or simply

Code: Select all

#subscribeToPageMenuitem {display: none !important;}

[Lazy Jones]

I installed DOM Inspector but it's really confusing. I get lost inside of it.

Thanks for taking the time to help me.

[wright76878]

https://addons.mozilla.org/af/firefox/addon/7884/
then in its options: check only middle box to hide all except bookmarks
(have to override compatibility-check first in about:config before installing),
Some CSS entries I have:
/* hide some context menu items in sidebar*/
menuitem[label="Open All in Tabs"],menuitem[label="Copy"], menuitem[label="Paste"],
menuitem[label="Cut"], menuitem[label="New Separator"] {display: none !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;}
/*Set font-size of sidebar panel */
#bookmarksPanel, #history-panel{ font-size: 17pt !important; }

[dickvl]

Code: Select all

#menu_bookmarkThisPage
#subscribeToPageMenuitem
#subscribeToPageMenupopup
#menu_bookmarkAllTabs
#bookmarksShowAll
#organizeBookmarksSeparator
#bookmarksToolbarFolderMenu
#bookmarksToolbarFolderMenu+menuseparator

[johnnyan]

Could someone help me with the codes for the Bookmarks Button from the Navigation Toolbar ? I use FF4 and I dont really care about the menus, they are hidden, my browser looks like this. I would really love to hide "View Bookmars Toolbar", "Subscribe to This Page" and "Unsorted Bookmarks" from there, if possible.

[dickvl]

If you don't want that button then drag it back in the View > Toolbars > Customize window.

If you do not want some bookmarks to show up in the drop down list of that button then remove them or move them to another bookmarks folder.

[johnnyan]

Let me try explain this one more time.

[dickvl]

There are these selectors for the #BMB_bookmarksPopup (#bookmarks-menu-button-container)

Code: Select all

#BMB_viewBookmarksToolbar, #BMB_viewBookmarksToolbar+menuseparator
#BMB_bookmarksShowAll, #BMB_bookmarksShowAll+menuseparator
#BMB_bookmarkThisPage
#BMB_subscribeToPageMenuitem
#BMB_subscribeToPageMenupopup, #BMB_subscribeToPageMenupopup+menuseparator
#BMB_bookmarksToolbar, #BMB_bookmarksToolbar+menuseparator
#BMB_unsortedBookmarks

[mgagnonlv]

You don't need any fancy programming to remove or add any icons from the bars at the top of the Firefox window.

Right-click in the navigation bar (between icons) and chose the last menu item (Personalize) that appears on the screen.

Then, while the window is open, take any icon you don't want to see from the toolbar and drag it into the "Personalize" window. Voilà, it will be gone.

Likewise, if you want that Bookmarks icon but prefer it on the left side, drag it to the left side of the navigation bar while the Personalize window is open.

[Krueger_Industrial]

I have some items in my userchrome.css, they no longer work in the last couple Firefox 4 betas. Is there a document somewhere that lists information about userchrome.css so that I can keep up with the changes? Here's what I have that no longer works:

/* Change the tab-bar height */
tab {height: 32px !important;}
.tabbrowser-strip {height: 36px !important;}
.tab-text {font:16px tahoma !important; font-weight: 690 !important;}

/* Change Color of Active tab */
tab{-moz-appearance: none !important; }
tab[selected="true"] {background-color: rgb(222,218,210) !important; color: black !important; }

[vasa1]

I have some items in my userchrome.css, they no longer work in the last couple Firefox 4 betas. Is there a document somewhere that lists information about userchrome.css so that I can keep up with the changes? Here's what I have that no longer works:

/* Change the tab-bar height */
tab {height: 32px !important;}
.tabbrowser-strip {height: 36px !important;}
.tab-text {font:16px tahoma !important; font-weight: 690 !important;}

/* Change Color of Active tab */
tab{-moz-appearance: none !important; }
tab[selected="true"] {background-color: rgb(222,218,210) !important; color: black !important; }

I too am having trouble getting the active tab background color to take effect. Whatever color I use appears as a very thin border on the top of the tab but the bulk of the tab remains "white". The text color changes as expected. This is with Firefox 4 beta 8. I don't have any experience about earlier versions of Firefox 4.

[johnnyan]

@dickvl: Thank you man, I'm away for the moment but I will try them when I get back.

[A30N]

I've been using Google Chrome on my netbook, which has a low resolution/small screen, to maximize screen real estate. However, there have been some serious and unresolved issues with the latest update that causes the browser to crash when loading Adobe Shockwave, making it completely useless. After uninstalling it, I decided to give Firefox 4 a test drive.

Firefox 4 is a definite step in the right direction, but the Bookmarks menu/button should be more easily customizable, especially for monitors with low vertical resolution. Here is my code (thanks to dickvl) for allowing more bookmarks on screen without having to scroll through a list, which can be tedious:

Code: Select all

#subscribeToPageMenuitem {display: none !important;}
#subscribeToPageMenupopup {display: none !important;}
#organizeBookmarksSeparator {display: none !important;}
#bookmarksToolbarFolderMenu {display: none !important;}
#bookmarksToolbarFolderMenu+menuseparator {display: none !important;}
#BMB_viewBookmarksToolbar {display: none !important;}
#BMB_viewBookmarksToolbar+menuseparator {display: none !important;}
#BMB_bookmarksShowAll+menuseparator {display: none !important;}
#BMB_subscribeToPageMenuitem {display: none !important;}
#BMB_subscribeToPageMenupopup {display: none !important;}
#BMB_subscribeToPageMenupopup+menuseparator {display: none !important;}
#BMB_bookmarksToolbar {display: none !important;}
#BMB_bookmarksToolbar+menuseparator {display: none !important;}
#BMB_unsortedBookmarks {display: none !important;}
#BMB_bookmarksPopup menuseparator:nth-last-child(2) {display: none !important;}

All in all, I am very happy with Firefox 4, and after making a few tweeks to improve screen real estate, I will keep it as my default browser for my netbook.