Favicons for Folders in Bookmark toolbar

Discussion of general topics about Mozilla Firefox
hhol
Posts: 4
Joined: January 17th, 2005, 11:28 am

Favicons for Folders in Bookmark toolbar

Post by hhol »

Hello,
I have been trying to change the Icons for folders on bookmark toolbar from standard folder icon to a icon of my choice and have had no luck so far. I saw some postings on changing the userchrome.css file, but this changes all the folders. I want to be able to have seperate Icons for all the folders. I used favicon picker extension(awesome tool !) to assign to icons to individual bookmark, but it doesn't give me option to change the folders though. Anybody out there who has done this?

hhol
GameController
Posts: 470
Joined: October 1st, 2004, 9:13 pm
Location: Sunny California

Post by GameController »

I have been wanting it longer than you

http://forums.mozillazine.org/viewtopic ... 47d08dc945
User avatar
Rymann
Posts: 303
Joined: May 12th, 2004, 4:53 pm
Location: Portland, Oregon

Post by Rymann »

<a href="http://forums.mozillazine.org/viewtopic.php?t=99042&postdays=0&postorder=asc&postsperpage=15&start=15"><b>Mechanical Man</b></a> had a neat work around for this (read page 2 half way down). He changed the folders to a dropdown marker (upside down triangle) using userChrome.css, then put an icon (no text) between each one. The icons were bookmarks with icons determined using favicon picker. It's not as nice as being able to change individual folder icons, but a nice way around the issue for now. You can see his screenshot in the linked post.
Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.5) Gecko/2008120122 Firefox/3.0.5 [extensions]
User avatar
TheTrueMasterofTheTower
Posts: 25
Joined: June 14th, 2004, 12:35 am
Location: California
Contact:

Post by TheTrueMasterofTheTower »

That is neat.
I made an icon for a folder, but now I'm not sure where to put it.
In keeping with MechanicalMans code:

Code: Select all

toolbarbutton.bookmark-item[container="true"],
toolbarbutton.bookmark-item[open="true"],
toolbarbutton.bookmark-item[container="true"][open="true"] {
  list-style-image: url("dropmarker.png") !important;
  -moz-image-region: auto !important;
  max-width: 16px !important;
}

where would dropmarker.png be? I put one in my chrome folder, and another in chrome\icons\default, but that doesn't seem to get the job done.
User avatar
MechanicalMan
Posts: 1416
Joined: June 16th, 2004, 11:29 pm
Location: Missouri

Post by MechanicalMan »

I like my idea too, but I might be biased. Anyhow, that method basically does what I wanted, because I was just trying to make my own Yahoo! Toolbar-type-thing. I think I remember someone mentioning that you can find the individual folder references and change the pics for them in userChrome, but I've never tried that...

TheTrueMasterofTheTower, you can put the pic anywhere if you specify the location. But using the above code, the pic needs to be in the same folder as your userChrome file. If you want to use a different location, try this: url("file://C:/folder/image.png")
PhoneMan
Posts: 36
Joined: November 29th, 2004, 5:56 pm
Location: North Carolina
Contact:

Post by PhoneMan »

Here is a way to do what you want, just change "New Folder" to the name of your folder , and change "yourfoldericon.png" to your image name and location

Code: Select all

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


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: Select all

/* 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;}

the code above also included code to remove the margin/padding from the button
User avatar
TheTrueMasterofTheTower
Posts: 25
Joined: June 14th, 2004, 12:35 am
Location: California
Contact:

Post by TheTrueMasterofTheTower »

Rad...Thanks MechanicalMan and PhoneMan!
I also like how you can make very thin folders, with similarly sized icons.
PhoneMan
Posts: 36
Joined: November 29th, 2004, 5:56 pm
Location: North Carolina
Contact:

Post by PhoneMan »

The code works on folders and bookmarks that are in the Bookmarks Toolbar.

Need a Gmail button?
Go to http://gmail.google.com/ and save a bookmark to the page on your Bookmars Toolbar, name the bookmark Gmail. Then go to http://gmail.google.com/favicon.ico and save the image in the same folder as your userChrome.css, name the ico image gmail. Then add the following to your userChrome.css

Code: Select all

#personal-bookmarks toolbarbutton[label="Gmail"] {background-color: transparent !important; padding: 0px 0px 0px 0px !important; margin-right: 5px !important; -moz-border-radius: 0px !important;}
#personal-bookmarks toolbarbutton[label="Gmail"] .toolbarbutton-icon {display: block !important; list-style-image: url('gmail.ico') !important; -moz-image-region: auto !important; margin: 0px 0px 0px 0px !important;}
#personal-bookmarks toolbarbutton[label="Gmail"] .toolbarbutton-text {display: none !important;}
hhol
Posts: 4
Joined: January 17th, 2005, 11:28 am

Post by hhol »

Phoneman,
I changed userchrome.css like you suggested and I now see an icon for the folder. But this works only for the first folder(Gmail). Any idea why?
Here's my code. I have included code for the first 2 folders only

Code: Select all

#personal-bookmarks toolbarbutton[label="Gmail"] {background-color: transparent !important; padding: 0px 0px 0px 0px 

!important; margin-right: 5px !important; -moz-border-radius: 0px !important;}
#personal-bookmarks toolbarbutton[label="Gmail"] .toolbarbutton-icon {display: block !important; list-style-image:

url('gmail.ico') !important; -moz-image-region: auto !important; margin: 0px 0px 0px 0px !important;}
#personal-bookmarks toolbarbutton[label="Gmail"] .toolbarbutton-text {display: none !important;}
/*second folder
#personal-bookmarks toolbarbutton[label="Ipod"] {background-color: transparent !important; padding: 0px 0px 0px 0px

!important; margin-right: 5px !important; -moz-border-radius: 0px !important;}
#personal-bookmarks toolbarbutton[label="Ipod"] .toolbarbutton-icon {display: block !important; list-style-image:

url('apple.ico') !important; -moz-image-region: auto !important; margin: 0px 0px 0px 0px !important;}
#personal-bookmarks toolbarbutton[label="Ipod"] .toolbarbutton-text {display: none !important;}

User avatar
TheTrueMasterofTheTower
Posts: 25
Joined: June 14th, 2004, 12:35 am
Location: California
Contact:

Post by TheTrueMasterofTheTower »

I think you just have to close your comment line for the second folder.

Code: Select all

/*second folder*/
hhol
Posts: 4
Joined: January 17th, 2005, 11:28 am

Post by hhol »

Yep, that was it it .
Many Thanks to PhoneMan,MechanicalMan,Rymann and TheTrueMasterofTheTower!!!
GameController, your wait is over !

P.S. Forgot to thank TheTrueMasterofTheTower(sorry!)
Last edited by hhol on January 23rd, 2005, 7:33 am, edited 1 time in total.
Lv426
Posts: 12
Joined: January 21st, 2005, 8:51 pm

Post by Lv426 »

I have been eagerly looking for a solution to this challenge which i am also experiencing. Phonman I have tried to implement your code. When i execute this code the default folder icon (in this case 'fish') dissappears and is now left blank. Im guessing it cant find the location of the ico i wish to replace it with. Here is my code in userchrome.css

/* Change Bookmark Toolbar Folder Icons */
#personal-bookmarks toolbarbutton[label=Fish] .toolbarbutton-icon {display: block !important; list-style-image: url('G:\Temp 1\Icons\fish.ico') !important; -moz-image-region: auto !important;}

What is missing here? Where have i gone wrong?
Thanks :-k
hhol
Posts: 4
Joined: January 17th, 2005, 11:28 am

Post by hhol »

Lv426 wrote:#personal-bookmarks toolbarbutton[label=Fish] .toolbarbutton-icon {display: block !important; list-style-image: url('G:\Temp 1\Icons\fish.ico') !important; -moz-image-region: auto !important;}


for the url parameter try with

url("file://G:/Temp1/Icons/fish.ico")
Old Greg S
Posts: 0
Joined: December 31st, 1969, 5:00 pm

Post by Old Greg S »

Lv426 wrote:I have been eagerly looking for a solution to this challenge which i am also experiencing. Phonman I have tried to implement your code. When i execute this code the default folder icon (in this case 'fish') dissappears and is now left blank. Im guessing it cant find the location of the ico i wish to replace it with. Here is my code in userchrome.css

/* Change Bookmark Toolbar Folder Icons */
#personal-bookmarks toolbarbutton[label=Fish] .toolbarbutton-icon {display: block !important; list-style-image: url('G:\Temp 1\Icons\fish.ico') !important; -moz-image-region: auto !important;}

What is missing here? Where have i gone wrong?
Thanks :-k


Try converting your image .ico to .png and pasting it in your Chrome folder that is in your profile folder and try this to see if it will work

Code: Select all

/* Change Bookmark Toolbar Folder Icons */
#personal-bookmarks toolbarbutton[label=Fish] .toolbarbutton-icon {display: block !important; list-style-image: url("fish.png") !important; -moz-image-region: auto !important;}

or if not and using the same image location maybe this

Code: Select all

/* Change Bookmark Toolbar Folder Icons */
#personal-bookmarks toolbarbutton[label=Fish] .toolbarbutton-icon {display: block !important; list-style-image: url("G://Temp 1/Icons/fish.png") !important; -moz-image-region: auto !important;}

Just a guess though
PhoneMan
Posts: 36
Joined: November 29th, 2004, 5:56 pm
Location: North Carolina
Contact:

Post by PhoneMan »

hhol wrote:
Lv426 wrote:#personal-bookmarks toolbarbutton[label=Fish] .toolbarbutton-icon {display: block !important; list-style-image: url('G:\Temp 1\Icons\fish.ico') !important; -moz-image-region: auto !important;}


for the url parameter try with

url("file://G:/Temp1/Icons/fish.ico")


hhol's suggestion is the fix.
I usually use 3 slashes(file:///), but I just tried with 2 slashes(file://) and it worked just as well.
Post Reply