MozillaZine

Favicons for Folders in Bookmark toolbar

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

Post Posted January 17th, 2005, 11:30 am

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 Posted January 17th, 2005, 6:31 pm

I have been wanting it longer than you

http://forums.mozillazine.org/viewtopic ... 47d08dc945

Rymann

User avatar
 
Posts: 303
Joined: May 12th, 2004, 4:53 pm
Location: Portland, Oregon

Post Posted January 17th, 2005, 8:10 pm

<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

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

Post Posted January 18th, 2005, 12:25 am

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.

MechanicalMan

User avatar
 
Posts: 1416
Joined: June 16th, 2004, 11:29 pm
Location: Missouri

Post Posted January 18th, 2005, 1:01 am

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

Post Posted January 18th, 2005, 11:39 am

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

TheTrueMasterofTheTower

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

Post Posted January 18th, 2005, 3:31 pm

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

Post Posted January 18th, 2005, 4:09 pm

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 Posted January 18th, 2005, 9:02 pm

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


TheTrueMasterofTheTower

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

Post Posted January 18th, 2005, 10:02 pm

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 Posted January 19th, 2005, 6:24 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!)
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 Posted January 23rd, 2005, 5:36 am

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 Posted January 23rd, 2005, 7:39 am

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 Posted January 23rd, 2005, 7:42 am

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

Post Posted January 23rd, 2005, 9:45 am

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.

Return to Firefox General


Who is online

Users browsing this forum: No registered users and 5 guests