Favicons for Folders in Bookmark toolbar

TheTrueMasterofTheTower · January 24th, 2005, 2:45 pm

One thing I do miss is not having a mouseover to tell me exactly what I stuck that Icon TO tho hehehe

i know what you mean. folders and bookmarks have a description in their properties context menu, but it doesnt show for folders. and for bookmarks, it shows the url only, not what you typed for a description. it would be nice to figure that out.

Raila · Post by **Raila** » January 24th, 2005, 2:57 pm

I am really digging this

::snaps a screenshot and pastes to the SHOW OFF thread::

WHEEEEEEEEEE

Now, to figure out how to get some other things changed

TheTrueMasterofTheTower · January 24th, 2005, 3:04 pm

hey! i want to see your screen shot. wheres the show off thread? couldnt find anything like that...

Raila · Post by **Raila** » January 24th, 2005, 3:12 pm

I cant find it either LOL
Im looking...I was there before dangit!

Lv426 · Post by **Lv426** » January 24th, 2005, 5:36 pm

It works!! It works!! $\:D/$ TheTrueMasterOfTheTower indeed.... =D>

Ryman, Phoneman is your code anything like TheTrueMasterOfTheTower's.....?? Why does this one work and not the others. Anyway just a small thing but the new icon replaces the old icon and the text "Fish" which was to the right of the icon. Is there a way I can keep the new icon and retrieve the text. Then I will be oh so very happy.

so i dont have to look at much when opening Chromedit, i put the icons in my userchrome folder [url('fish.ico')]. i guess that can even be cooler, because your icons can stay withing your profile.

You mean you do it because you dont have anything to look at apart from text in your folder?. If I move my ico's into my userchrome folder then will the code change like follows. It has to be precise otherwise it wont work doh [-o<

url('file:///g:/Temp1/Icons/fish.ico ') .... exact current code

new code

url('fish.ico')

Again I thank you all for having patience with a noob.....cheers :turn-l:

TheTrueMasterofTheTower · January 24th, 2005, 6:34 pm

Right on!

Actually, my code is PhoneMan and MechanicalMan's both, but Im not sure where they overlapped.

so i dont have to look at much when opening Chromedit, i put the icons in my userchrome folder [url('fish.ico')]. i guess that can even be cooler, because your icons can stay withing your profile.

You mean you do it because you dont have anything to look at apart from text in your folder?. If I move my ico's into my userchrome folder then will the code change like follows. It has to be precise otherwise it wont work doh Pray

I just meant that id rather look at: url('icon.ico') rather than: url('file:///g:/Blah/moreblah/icon.ico '), when looking at my userchrome.css file. its a little cleaner. And if yuo wanted to bring your profile with you to another computer, your icons would be right there.

the new icon replaces the old icon and the text "Fish" which was to the right of the icon. Is there a way I can keep the new icon and retrieve the text. Then I will be oh so very happy.

Im not sure whats happening with new and old icons, just make sure your pointing to the icon you want [its case sensitive, too]. As far as the text, just remove this line from the code:

Code: Select all

#personal-bookmarks toolbarbutton[label="Fish"] .toolbarbutton-text {display: none !important;}

PhoneMan · Post by **PhoneMan** » January 24th, 2005, 7:59 pm

Lv426 wrote:Why does this one work and not the others.

You needed to have the correct url to your image and name for your folder, and it is case sensitive.
Based on what you had posted from your userChrome I thought you had named your folder fish. TheTrueMasterofTheTower correctly guessed your folder was named Fish and not fish, that was the only change that was made to the code that had to do with replacing the icon.

Lv426 · Post by **Lv426** » January 24th, 2005, 8:48 pm

TheTrueMasterofTheTower wrote:Im not sure whats happening with new and old icons, just make sure your pointing to the icon you want [its case sensitive, too]. As far as the text, just remove this line from the code:
Code: Select all
#personal-bookmarks toolbarbutton[label="Fish"] .toolbarbutton-text {display: none !important;}

Give that man a beer..... =D>

you did it again. So now if i want to change the rest of my icons i just substitute the folder name and the new location into the url line. Phoneman i now have an extra line which TrueMasterOfTheTower has.

thanks gents...move on to the next poor soul

Raila · Post by **Raila** » January 24th, 2005, 9:17 pm

Just remember it will only work for one set

If you want to make multiple sets, you gotta copy the code and change the names and icons accordingly..

YAY for you!!

PhoneMan · Post by **PhoneMan** » January 24th, 2005, 9:59 pm

Lv426 wrote: Phoneman i now have an extra line which TrueMasterOfTheTower has.

The extra line you have only changes the toolbarbutton padding and has no effect on changing the icon
#personal-bookmarks toolbarbutton[label="Fish"] {padding: 3px 3px 3px 3px !important;}

The code that TrueMasterOfTheTower posted is the same as the code from my original post in this thread, except he changed the padding from 0px to 3px and changed the file names to yours.

From my original post

PhoneMan wrote:I am not using icons for my folders so to display the icon instead of text without changing the other folders I used the following:
Code:

/* Change Bookmark Toolbar Folder Icons */
#personal-bookmarks toolbarbutton[label="New Folder"] {padding: 0px 0px 0px 0px !important;}
#personal-bookmarks toolbarbutton[label="New Folder"] .toolbarbutton-icon {display: block !important; list-style-image: url('yourfoldericon.png') !important; -moz-image-region: auto !important; margin: 0px 0px 0px 0px !important;}
#personal-bookmarks toolbarbutton[label="New Folder"] .toolbarbutton-text {display: none !important;}

From TrueMasterOfTheTower's post:

TrueMasterOfTheTower wrote: my code, with your particular file names, is:
Code:
#personal-bookmarks toolbarbutton[label="Fish"] {padding: 3px 3px 3px 3px !important;}
#personal-bookmarks toolbarbutton[label="Fish"] .toolbarbutton-icon {display: block !important; list-style-image: url('file:///g:/Temp1/Icons/fish.ico ') !important; -moz-image-region: auto !important; margin: 0px 0px 0px 0px !important;}
#personal-bookmarks toolbarbutton[label="Fish"] .toolbarbutton-text {display: none !important;}

TheTrueMasterofTheTower · January 24th, 2005, 10:05 pm

Yes, the beer should go to PhoneMan. I'll go get a Yoohoo for myself, though...
Thanks again for this code, PhoneMan. Boosted my Firefox experience to even more profound levels!!!

Raila · Post by **Raila** » January 24th, 2005, 10:12 pm

I changed mine to 2px cause 0 was just too flipping close for me :>

PhoneMan · Post by **PhoneMan** » January 24th, 2005, 10:21 pm

Raila wrote:I changed mine to 2px cause 0 was just too flipping close for me :>

I have mine at 0px but I added margin-right: 5px !important; to add 5px of space on the right of each button

Code: Select all

#personal-bookmarks toolbarbutton[label="New Folder"] {padding: 0px 0px 0px 0px !important; margin-right: 5px !important;}

Raila · Post by **Raila** » January 24th, 2005, 10:26 pm

actually, is there a way to edit the spacing of the Bookmarked icons, meaning not the Foldered ones? Mine are kinda.. differently spaced now and it bugs me LOL

I may try that edit tho just to see if I like it :> I dont seem to notice anything extra around the icons themselves, other than the spacing issue which was kinda weird..
oh well as long as it works, right? hehe

PhoneMan · Post by **PhoneMan** » January 24th, 2005, 10:52 pm

Raila wrote:actually, is there a way to edit the spacing of the Bookmarked icons, meaning not the Foldered ones? Mine are kinda.. differently spaced now and it bugs me LOL

The following will change the padding and margin for items in the bookmark toolbar

Code: Select all

#personal-bookmarks toolbarbutton {margin: 0px 0px 0px 0px !important; padding: 0px 0px 0px 0px !important}

In case you were wondering: 0px 0px 0px 0px = Top Right Bottom Left
One way to remember is to think of a clock face, or just remember the word TRouBLe

Padding changes the size of the button, margin changes the space outside the button.

Here is what I have in my userChrome, any bookmarks or bookmark folders I have that I have not applied my own icon to display text only and change color on mouseover

Code: Select all

#personal-bookmarks .toolbarbutton-icon {display: none !important;}
#personal-bookmarks toolbarbutton {color: #000080 !important; background-color: #ffebcd !important; margin: 3px 1px 2px 1px !important; padding: 0px 6px 0px 6px !important; -moz-appearance: none !important; -moz-border-radius: 8px !important;}
#personal-bookmarks toolbarbutton:hover {color: #ffebcd !important; background-color: #000080 !important;}