felipe’s Blog

Thanx! Really cool!

But useless for me without associating tag icon with native tag of bookmark. It would be better to allow personal favorite’s icon pack and create manual link between icon and text tag of bookmark in order to automatic tagging by click on icon.

Good luck

very useful and cool add-ons.

My ideal solution to view tagmark would be to show a floating medium box when pressing ctrl+clicking the icon and showing a list of all the bookmarks tagged with that icon (just like the box that float when editing bookmark in ff3 by clicking the star in address bar). is this possible to do?

Felipe,

Thanks for the extension. I also have the problem that if I click the expand arrow, the icons won’t hide anymore. I am using the Linux version of Firefox.

Tide

Can you make it customizable tags/icons? I like that 5 or so show up automatically, but I want to pick which 5 as well.

eee =)!

I found out I can customize the icons in the taglist.js file that’s aprt of the extension, but I’d like to customize the list of six default icons as well – will have to dig into the code to figure out how to do that (it would be cool if those were my most used tags, or most recently used tags).

Thats a really nice project. For sure it wasnt a perfect project firefox would reward it.. Congrats to the developer..

This is a great add-on!
I am excited and can’t wait for the next version where we can customize our tags!

Thank you and good luck!

Hi
Yet another little enhancement: currently the tags icon list expands as soon as the mouse rolls over the yellow star, but also the RSS feed icon or the Go green arrow. Could you change it to the yellow star only? Subscribing to an RSS feed is made uneasy, currently.
THanks

I’m new to Firefox and just love all the addons. Death to IE!
Your “instatagging” is a great utility, and I agree that we should be able to customize our tags. I do mostly scientific research and many of the standard tags are meaningless for me. Rather than having to make my own, could you offer a set of “science tags”? Such as a little rock hammer for geology, a pair of test tubes for chemistry, a flask for chemistry 2, a frog for biology, a skull for anthropology, an amoeba for microbiology, a dinosaur for paleontology,an atom for physics, telescope for astronomy, a well for hydrogeology, etc? I could help with ideas for a few simple tags for each the major fields of science.
I also LOVE the idea of being able to set the default six tags to most-used, last-used and specific-set.
If you could do this I’d give it five stars. (The Sun, Antares, Betelguise, Andromeda, and Sirius)

I hope I am not overstepping my bounds here, but I have been opening up your source recently, and made a whole bunch of my own modifications, such as custom buttons, changing mouse-over effects, and such…. a quick very simple tweak that I made that I think that others will appreciate is changing the ‘star-button’ value from ‘insertbefore’, to ‘feed-button’, that way on the mouse over effect will not displace the RSS-feed button that appears in certain websites…. another nice change might be shifting the RSS-feed button to the RIGHT of the Star, which we can do by editing FF’s chrome…

Alright, as long as Felipe doesn’t mind me putting this on here. I am typing as I explain it (on a fresh installation on a new FF profile to simulate you

guys)…

——– INSTRUCTIONS ———

1) Go ahead and open up Notepad++, Dreamweaver, or what ever program you like to do your code editing in.

2) open up your Application Data folder (Run>%appdata*%), then go into Mozilla>Firefox>Profiles>[YOUR PROFILE]>extensions>tagmarks@felipec.com

Your folder will look like the Following:

chrome.manifest
install.rdf
[chrome] <–another folder

3)Ignore ‘chrome.manifest’ and ‘install.rdf’ and go into the chrome folder, those two files deal with the linking aspects to integrate into firefox, and we

don’t need to mess with…

now, inside of the chrome folder, you will have two more folders:

[content]
[skin]

4) ‘skin’ contains the image that you see, along with a few .js files that control how you see the icons, both in the bookmarks page, and in the browser

bar. (in firefox’s code it is called the -moz-box, so I will refer to it by that from now on).

‘content’ contains a few more .js files as well as the viewtags.htm page that you see when you load up your bookmarks… we will deal with this folder

first, so let me list the files and explain their basic purpose.

taglist.js <– this is what we will edit to change which icons appear in the -moz-box.
tagmarks.js <– most of the brutework of this add-on, it does all your back-end work. we will work with this file later on to do some custom modifications

changing mouse-over behaviors, and visibility options.
tagmarks.xul <– changes the add-on’s display options in firefox.
viewtags.js <– you need this file to change how it loads up images into the bookmarking file (see below)
viewtags.htm <– your bookmark file, this is the really well engineered system for pulling up your bookmarks, or tags, based on their tagged status.

5) Wow, ok, I am taking too long to type this 🙂 I won’t dumb it down so much from now on…

Open up your taglist.js file from your /chrome/content/ folder, and you will see the beautiful list of tags that control what you see. here is where we can

play around.

-To Delete an Icon-
Simply delete a COMPLETE LINE that starts with the name of the icon that you want to remove, for example, I remove green star, because I prefer the yellow

and blue ones, I would delete “stargreen: {img: “icons/stargreen.png”, description: “Green star”}”.

-To Rename the Tag-
After you tag something, you see it has the default name of that tag (such as : search, radioactive, gears, puzzle, earphone….), If you don’t like these,

or you don’t think they suit the icon, you can change it! simply change the first word of the line, and the repetition of the word at the end of the line

(its in quotation marks, before the end clause and new line statements). the first word has to be ONE WORD, it is only for identification, the second one

you change, in the quotation marks can be capitalized, or more than one word, this is what it will be moused over as, so you can make it look pretty. For

example I think that ‘music’ would suit the ‘earphone’ icon better, in that case I would change this line of code:

earphone: {img: “icons/earphone.png”, description: “Earphone”},

to

music: {img: “icons/earphone.png”, description: “Music”},

-To Rearrange Icons-
Copy and Paste, or Drag and Drop the lines of code into a new order, the higher the line number, the more to the left the Icon will be, so line number three

in my case, will be the left most icon, with the 4th line showing the second to the left, and so on)

-To Add New Icons-
This is a two step process (actually its optional, but you have come this far, and read so much already, why not do it 🙂 ).
First you need to Choose what you want your new icon to be, How about you want one that you can tag every time you see a page related to sheet music, and

you want the icon to be a musical note. What you would do is add a line of code (BEFORE THE final ‘};’, so basically don’t make it the last line, make it

the second to last line or something, remember the order of the lines and icons define in what order the appear in the -moz-box) which defines what icon

will appear and what its tag will be called. You can be lazy like me and just copy and paste a pre-existing line and rename parts, this is what you should

end up with:

sheetmusic: {img: “icons/note.png”, description: “Sheet Music”},

but if you’re following along, you will realize that we changed the image source. and there was no ‘note.png’ in the icons folder. a-ha! this is where the

semi-optional step two comes in…

open up your skin/icons/ folder, and decide if you are going to put effort into this or not. if you are not, you can simply copy and paste an icon that you

like, for instance I would use the earphone one again, and just reneame the copy as ‘note.png’, so now you have ‘earphone.png’ and ‘note.png’ which are both

the exact same icon. you could add a little more effort in and simply open the ‘note.png’ file up in photoshop or your image editing software of choice and change the colours of it, to something different that the regular ‘earphones.png’ file. (To do this in photoshop, open up your image, type control+U and then click the colorize option on the bottom right, and move the sliders until you achieve the result you like… you should already know this though…)

If you want more effort you can create a new image, with a width of 30px and a height of 15px. then in a 15px x 15px bounding box come up with an icon you like. once you like your icon, shift the image to the rightmost 15×15 square, and duplicate the layer and move it to the left. now you have two icons in your image. select your left icon, and do one or two of the following things. turn it opaque (semi-transparent) by editing the layers visibility, and/or desaturate the icon by typing control+U and dragging the saturation slider all the way, or partially to the left. I personally like it partially desaturated with 50% transparency.

This covers the basics, but seeing how I live in Houston, and am still recovering from Hurricane Ike, and 4 days with no electricity, and what not. I am going to take a break, and write the others tomorrow.

Thank you felipe,
I’m using Hyperwords (5.0) FF 3.0.1
it’s been only 2 hours since i’ve installed Tagmarks and it is so so nice extension. but it conflect with HW (5.0) I will try HW (4.0.2) to see if that will work. Thank you again for this nice add-on.

Yes! it is HW (5.0) problem. HW (4.0.2) works with Tagmarks and Flagfox. Sorry felipe!

And thank you so much again for Tagmarks. so smart add-on. and should be implemented in new version of FF.

I’m sure 100% it is a HW 5.0 bug. Don’t waste your time. Tagmarks works great.

Flagfox flag icon does not appear on the address bar next to the QBM Star. and that’s with HW 5.0

Also, Tagmarks Icons do not appear on the address bar with HW 5.0

Thank you again and again.

I like the idea of changing which icons to display by default. Personally i changed line 207 in your tagmarks.js..

if (25> .01 && count < 25) { //Changed from 0.5 to .01 changed from 6 to 25

(Its a good habit as felipe pointed out to make notice of your changes, here i just commented out the changes, so i can simply revert. also a comment-log that is dated of all your changed helps when you are trying to figure out what you changed, in which order.)

This way I have all of the icons appearing on the mouseover, but I also managed to do this through the tagmarks.css file, changing the #tagmarks-[whichever ones i wanted] to hide the arrows, and then, changed line 49 to:

display: -moz-box;

or else you can do a change in line 31 to:

display: -moz-box;

It all depends on how much you want to tinker with the code, wanting the arrows to appear or not, with the option to hide the icons…. I use a widescreen monitor, and have the screen realestate to be able to display my 25 icons all the time for quick tagging; but i know with my laptop, i simply keep 10 icons, period, so my list is shorter, but also simpler.

Felipe did point out when you do rename an icon, it only applies to future tags, so all your old tags that are tagged earphone, stay that way, but if want to, simply open up your bookmark organizer (in forefox 3 it is called your library) and click on the name of one of your tags to change on the left hand side. from here, on the bottom-right pane, rename your old tag, say from ‘earphone’ to ‘music’ and your done!

Right now i am figuring out a way to display your most frequently tagged icons to display, for my own purposes, but the re-structuring, of assigning a value to each icon, and increasing/decreasing based on its picked=’true’ status might be more trouble that its worth; im sure you have come up with a better way felipe.

Looks like the blog removed some of my words that might have looked like HTML… it should read:

…also install {language dropdown} tags
…English tags with {language dropdown} tags

How to show the same tags each time:

Open up tagmarks.js and add this function

nonRandom: function() {
var i, image, count = 0;
for (i in this.tags) {
image = document.getElementById(“tagmarks-item-” + i);
if (count < NUMBER) {
count++;
image.setAttribute(“picked”, “false”);}
else
image.setAttribute(“picked”, “true”);
}
},

NUMBER will depend on how many tags you want always displayed, and whether or not you’ve deleted any tags from the taglist.js file. Calculate NUMBER by taking the total number of tags (there are 23 by default), and subtracting the number of tags you want always displayed. So if you want 6 tags displayed and you haven’t deleted any tags, your NUMBER would be 23 – 6 = 17.

Then scroll down to the end of the file and find the onSwitch function. Comment out ‘this.randomize();’ and add the line ‘this.nonRandom();’

This will display the last tags in your taglist.js file. Rearrange them to the tags you like.

How to always display these tags:

Go into tagmarks.css and look at lines 40-44. Remove anything ending with ‘:hover’ (but nothing to the right of that).

Enjoy!

PS: Felipe, please give us these options so we don’t have to dive into the code, otherwise great job!

Is there a shortcut key to view the tagmarks page?
If not, would it possible to add one in the next version?

Thanks

Noway!

Thank you “felipe” for an add-on with great potential, and also thank you “deos” for dealing with the most wanted feature of customization…

In addition to the wish of future integration of “Tagmarks Modifier” within “Tagmarks” may I also ask:
– change of bookmarks library default tag icon with the associated ones you provide. this is also to apply AwesomeBar too
– basic tagsifter functionality; accessing all chosen “icon tagged bookmarks” via toolbar icon drop-down instead of menu or html page
– a “vertical icon chooser” while keeping horizontal chosen icon display for not so long urlbars

also
@Narga
please be kind to share your code
@William Furr
with “Tagmarks Modifier” no need to ReTag

Hello,

Felipe, I want to thank you for creating this great add-on.
Please do not give up and continue you work. We need some more configuration options!

Thanks!

Abandoned at version 1?

Extension showed such great promise, but is absolutely useless as-is without any customization options.

Shame, really.

Felipe, eu adoro o tagmarks!

você poderia adicionar mais desenhos e tags?

acho muito legal sua ideia de usar os silk icons no firefox parabens : D

exactly what I need
works fine with firefox 4.0
great job

When I originally left a comment I seem to have clicked
the -Notify me when new comments are added- checkbox and from
now on whenever a comment is added I recieve four emails with the same comment.
There has to be a means you can remove me from that service?
Thank you!

Brilliant idea, but name customization is necessary
This idea allows to use bookmarking without opening dialog window and this is very strong advantage. But some customization is needed.
1. It is highly desired to give to user possibility to reassign the tagmarks names to his own names. I don’t think it’ll be big deal.
2. It is also desired that user can assign some other folder to this set of tagmarks, and not only Unsorted Bookmarks that is currently.
The reason why it is so necessary I can explain.
Usually user installs addons when he just have a lot of bookmarks with given names. In average he will just have about 1000 bookmarks and dozens tags when he finds your addon and decides to install it. He is highly interested to assert his most used tags and not to give birth to two dozens new. And reassign his old tags to new names he also doesn’t want – he is accustomed, used to his own and it is difficult suddenly to change the names in mind and remember. That is why this is so important.
Now – regarding folder assignment (I mean one folder to all tagmarks).
The Unsorted Bookmarks folder isn’t so easy accesible that in bookmarks toolbar and it is more convenient to use some other one.
Thank you