Home

Wednesday, September 16, 2009

How to expand bookmark area in firefox 3.x

Posted by Chetan Sachdev at 2:08 PM Labels: ,
There are many forums which I keep visiting and its difficult to keep track of a particular post and visiting that URL again and again. I use firefox and found that it is possible to expand the bookmark area and even have it collapse on Mouse Over/Out event.
Below are 2 snap shot which shows the area, before and after state.
greenshot_2009-09-16_13-45-33
In normal state
greenshot_2009-09-16_13-46-30
On Mouse Over
To achieve this, you will need to edit userChrome.css. I keep my Profile of firefox in a separate folder, so that even when my system crashes, I should have a backup of all my firefox settings. Now, if you have done this too, then you can use a plugin named “ChromeEdit Plus” http://webdesigns.ms11.net/chromeditp.html This plugin makes the task easier. Now go to Tools –> ChromeEdit Plus –> ChromeEdit. This will show you a ChromeEdit Plus Dialog window with 3 tabs to edit userChrome.css, userContent.css and user.js respectively. See the screenshot below:
greenshot_2009-09-16_13-56-36
You need to make changes in first tab to achieve the above settings for bookmark area. Select the code given below, and paste it at the end of userChrome.css tab.

/* Multi-row bookmarks toolbar */
#bookmarksBarContent {
    display:block !important;
  }
.places-toolbar-items {
  display:block !important;
  height: 96px !important;
  overflow-y:auto!important;
}
#bookmarksBarContent toolbarseparator {
  display:inline !important;
  }
#bookmarksBarContent .bookmark-item {
  visibility: visible !important;
 }
.chevron {
  height: 0px !important;
}

/* Auto-hide bookmarks toolbar */
#PersonalToolbar {
  max-height: 500px !important;
  visibility: collapse !important;
  }
#navigator-toolbox:hover > #PersonalToolbar {visibility: visible !important;}

Click on Save and then Restart. It should reflect the changes.

Note: You can edit userChrome.css manually by going to "%APPDATA%\mozilla\firefox\profiles\" location and look for chrome folder inside your profile folder, select userChrome.css and paste the above code and save.

Few useful links:





Hope it helps someone :)

No comments :

Post a Comment

Subscribe to: Post Comments ( Atom )