How to expand bookmark area in firefox 3.x

Posted by Chetan Sachdev | Posted in , | Posted on 2:08 PM

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 Plushttp://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 :)


Cheers;
--
Chetan Sachdev

Freelance Programmer | Trainer | Teacher

Site: http://www.riageeks.com

___________________________________________

Chat Skype: cksachdev Google Talk: cksachdev Y! messenger: cksachdev


Contact Me LinkedinFacebookBloggerTwitter
blog comments powered by Disqus