I wish to enlarge the background shadow by 2px or 4px of my Bookmarks on my PersonalToolbar and personal-bookmarks Bookmarks Toolbar, which are all on the same level, when on Hover and Active. I am talking about the actual size of the shadow box.
I have tried various methods but none work. I believe I am talking about toolbarbutton-active-background and toolbarbutton-hover-background.
I have tried various Selectors, ID's and elements:
toolbarbutton-badge
box-shadow
box-sizing: border-box;
To name a few and, well, I am having no luck.
How to Enlarge Button/Icon Background Shadow
- FineWine
- Posts: 230
- Joined: July 16th, 2004, 12:21 am
- FineWine
- Posts: 230
- Joined: July 16th, 2004, 12:21 am
Re: How to Enlarge Button/Icon Background Shadow
I am talking about a light grey box that appears behind the bookmark on hover. In the below screen shot it is behind the geekzone bookmark. I wish to increase its size just by a few pixels all round.
-
- Posts: 6434
- Joined: February 3rd, 2009, 6:29 pm
Re: How to Enlarge Button/Icon Background Shadow
I would think increasing the padding would increase the background shadow.
CSS Box Model
http://www.w3schools.com/css/css_boxmodel.asp
Code: Select all
#PersonalToolbar .bookmark-item {
padding: 8px !important;
}
http://www.w3schools.com/css/css_boxmodel.asp
- FineWine
- Posts: 230
- Joined: July 16th, 2004, 12:21 am
Re: How to Enlarge Button/Icon Background Shadow
Thank you #morat.
5px did the trick.
5px did the trick.
- FineWine
- Posts: 230
- Joined: July 16th, 2004, 12:21 am
Re: How to Enlarge Button/Icon Background Shadow
Spoke too soon.
That mucks up the line spacing in #PlacesChevronPopup bookmarks overflow menu because it increases the hover highlight width. In otherwords distance between bookmarks items in the list has now exponentially widened. I thought this might fix it but I don't think it has:
It was suggested in http://www.reddit.com/r/FirefoxCSS/ that the following might work, it does not:
That mucks up the line spacing in #PlacesChevronPopup bookmarks overflow menu because it increases the hover highlight width. In otherwords distance between bookmarks items in the list has now exponentially widened. I thought this might fix it but I don't think it has:
Code: Select all
#PersonalToolbar .bookmark-item:not(#PlacesChevronPopup .bookmark-item) {
padding: 5px 3px 2px 3px !important;
}
Code: Select all
#PersonalToolbar .bookmark-item:not(.subviewbutton) {
padding: 5px 3px 2px 3px !important;
}
- FineWine
- Posts: 230
- Joined: July 16th, 2004, 12:21 am
Re: How to Enlarge Button/Icon Background Shadow
Ok I have got it now:
Code: Select all
#PlacesToolbarItems > .bookmark-item {
padding: 5px 3px 2px 3px !important;
}