css code to hide texts in bookmark toolbar
I am trying to hide all the texts in Bookmark toolbar. Tried the following code but it does not work.
Thanks in advance.
#personal-bookmarks.bookmark-item >.toolbarbutton-text { display:none !important; }
Okulungisiwe
All Replies (9)
You need a space between #personal-bookmarks and .bookmark-item as they are both selectors
#personal-bookmarks .bookmark-item > .toolbarbutton-text { display:none !important; }
Thanks. I tried
- personal-bookmarks .bookmark-item > .toolbarbutton-text { display:none !important; }
and it still does not work. When I hoover the mouse on the icon, the text is shown.
The following code does what I need but it only works for each individual bookmark. Can we make it work for all bookmarks?
toolbarbutton.bookmark-item[label="Mperks"] { list-style-image: url("file:///xyz.ico") !important }
/* Hide the text of this bookmark */ .bookmark-item[label="label"] {
margin-right: 0px !important; width: 22px !important;
} .bookmark-item[label="label"] > .toolbarbutton-text {
display: none !important;
}
.bookmark-item[label="label"] image {
margin-left: 4px !important;
}
Is the last line important? I dropped it and still get what I need but id o not know if dropping it may cause some unexpected effect.
Quote: When I hoover the mouse on the icon, the text is shown.
Do you mean that you see the label appearing and not a tooltip when you hover?
Firefox doesn't do that by default, so you appear to have an extension that causes this effect.
Start Firefox in Safe Mode to check if one of the extensions (Firefox/Tools > Add-ons > Extensions) or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox/Tools > Add-ons > Appearance).
- Do NOT click the Reset button on the Safe Mode start window.
Please see the picture below.
https://sites.google.com/site/nttung/home
when I hover the mouse on the icon, the text F1 appears. Once the mouse is not on the icon, the F1 disappear.
You are right. I am using the Roomy Bookmark Toolbar. If the icon does not have any text in the Name file, it is ok. However, to change the favicons of certain icons, I need to put some text in the name field and that is when this happens. It is not overly annoying but if I can get rid of this behavior, it is better :)
You do not need to use the extension if you hide the text with code in userChrome.css unless you need the extension for other features.
I don't know if you can override this with a :hover code
#personal-bookmarks .bookmark-item:hover > .toolbarbutton-text {}
Thanks again for your very quick response. The code does not help. I need the add-on to get two lines for the bookmark toolbar. Is it possible to archive that with css code?
No, you can't achieve this with CSS code.
You can check the code of the extension and comment out the part you hides the label text and shows the text on hover. An extensions XPI file is a ZIP archive. Most archive manager allow to open and edit files in such an archive without unpacking the files first.
Thanks a lot your your prompt help. It is appreciated.