Favicons for Folders in Bookmark toolbar
-
- Posts: 4
- Joined: January 17th, 2005, 11:28 am
Favicons for Folders in Bookmark toolbar
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
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
-
- Posts: 470
- Joined: October 1st, 2004, 9:13 pm
- Location: Sunny California
- Rymann
- Posts: 303
- Joined: May 12th, 2004, 4:53 pm
- Location: Portland, Oregon
<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]
- TheTrueMasterofTheTower
- Posts: 25
- Joined: June 14th, 2004, 12:35 am
- Location: California
- Contact:
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:
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.
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.
- MechanicalMan
- Posts: 1416
- Joined: June 16th, 2004, 11:29 pm
- Location: Missouri
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")
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")
-
- Posts: 36
- Joined: November 29th, 2004, 5:56 pm
- Location: North Carolina
- Contact:
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
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:
the code above also included code to remove the margin/padding from the button
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
- TheTrueMasterofTheTower
- Posts: 25
- Joined: June 14th, 2004, 12:35 am
- Location: California
- Contact:
-
- Posts: 36
- Joined: November 29th, 2004, 5:56 pm
- Location: North Carolina
- Contact:
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
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;}
-
- Posts: 4
- Joined: January 17th, 2005, 11:28 am
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
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;}
- TheTrueMasterofTheTower
- Posts: 25
- Joined: June 14th, 2004, 12:35 am
- Location: California
- Contact:
I think you just have to close your comment line for the second folder.
Code: Select all
/*second folder*/
-
- Posts: 4
- Joined: January 17th, 2005, 11:28 am
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!)
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.
-
- Posts: 12
- Joined: January 21st, 2005, 8:51 pm
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
/* 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
-
- Posts: 4
- Joined: January 17th, 2005, 11:28 am
-
- Posts: 0
- Joined: December 31st, 1969, 5:00 pm
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
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
-
- Posts: 36
- Joined: November 29th, 2004, 5:56 pm
- Location: North Carolina
- Contact:
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.