This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

css code to hide texts in bookmark toolbar

  • 9 replies
  • 3 have this problem
  • 1 view
  • Last reply by hochoi

more options

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; }
I am trying to hide all the texts in Bookmark toolbar. Tried the following code but it does not work. Thanks in advance. <pre><nowiki> #personal-bookmarks.bookmark-item >.toolbarbutton-text { display:none !important; }</nowiki></pre>

Modified by cor-el

All Replies (9)

more options

You need a space between #personal-bookmarks and .bookmark-item as they are both selectors

#personal-bookmarks .bookmark-item > .toolbarbutton-text { display:none !important; }
more options

Thanks. I tried

  1. 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.

more options

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.
more options

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.

more options

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

more options

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 {}
more options

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?

more options

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.

more options

Thanks a lot your your prompt help. It is appreciated.