Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

Avatar for Username

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

Denc nañu waxtaan wii. Yónneel yeneen laaj soo soxlaa ndimbal.

How to change space between folder icon and text on personal toolbar?

  • 4 tontu
  • 1 am na jafe-jafe bii
  • 1 view
  • i mujjee tontu mooy cor-el

Ripplinger
Ripplinger
more options

I have a few folders on the personal toolbar with just a letter to indicate what they are, but on the theme I'm using, the letter is too far away from the folder it belongs to and partially falls under the next folder icon. I don't want to increase the spacing between all icons to show the full letter, as this decreases the amount of icons you can have on the toolbar. Instead I want to decrease the space between the folder and text belonging to it, so it's right next to it instead of 5 pixels away.

I've found various entries to change padding and margins in userChrome.css, but it's always for around the icon, I don't know where to look to close the space between the icon and its corresponding text.

Any help would be greatly appreciated, thanks.

I have a few folders on the personal toolbar with just a letter to indicate what they are, but on the theme I'm using, the letter is too far away from the folder it belongs to and partially falls under the next folder icon. I don't want to increase the spacing between all icons to show the full letter, as this decreases the amount of icons you can have on the toolbar. Instead I want to decrease the space between the folder and text belonging to it, so it's right next to it instead of 5 pixels away. I've found various entries to change padding and margins in userChrome.css, but it's always for around the icon, I don't know where to look to close the space between the icon and its corresponding text. Any help would be greatly appreciated, thanks.

Saafara biñ tànn

Did you check the value of the margin-left of the text?

You can set negative margin values if necessary. 

#PlacesToolbarItems .toolbarbutton-text { margin-left: -2px !important; }

Add .bookmark-item[container] if you only need this for folder items 

#PlacesToolbarItems .bookmark-item[container] .toolbarbutton-text { margin-left: -2px !important; }
Jàng tontu lii ci fi mu bokk 👍 0

All Replies (4)

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Saafara yiñ Tànn

Did you check the value of the margin-left of the text?

You can set negative margin values if necessary. 

#PlacesToolbarItems .toolbarbutton-text { margin-left: -2px !important; }

Add .bookmark-item[container] if you only need this for folder items 

#PlacesToolbarItems .bookmark-item[container] .toolbarbutton-text { margin-left: -2px !important; }
Ripplinger
Ripplinger Ki laajte
more options

I just tried both codes in the userChrome.css file, and the result each time was that the icons themselves were moved closer together instead of staying where they were. The text still stayed partially under the next folder icon. So it seemed to affect the icons and did nothing for the text placement next to the icons.

Ripplinger
Ripplinger Ki laajte
more options

Actually, it does work. I just deleted everything else from my userChrome.css file and tried again with a clean css file with nothing but your first example in it, and it did work. Some existing lines probably were conflicting with the new code. So I'll go back and add in the others one by one to see that there's no conflict.

Many thanks for the help, appreciate it.

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

You're welcome.

If you have style rules that work on all toolbars then you may need to override them for #PlacesToolbarItems