I want to replace the print and e-mail links with icons as well as add the StumbleUpon and Twitter buttons there. I have new .png buttons ready, but need to know how to add it there instead of the text.

Anyone to the rescue?

Have the same question. How to replace link texts with icons?

Hi,
about replacing print and email links with icons just recently did something with featured notice (replaced it with image). I suppose that you are talking about print and email links beside font resizer in item view.

so what i did:
1. create custom template and assign it to your category (custom template placing issue here

2. go in your custom template folder and open item.php, on line 104 there is block starting about print button

3. here is changed code:
ehh ok i pasted code but as in this forum there is no code block or something it messed all up i will try to attach image or file...


ok attached image click on it for bigger version

That would be it - short version. And instead of print text link you have a button :) Same process should be applied on email or any other change if i am not mistaking.

This works absolutely perfect! Thanks! Sorry that I was not able to get around to test it before now, but now I have it done And it looks great :-)

One thing worth mentioning is that the way you have set it up here, the icons needs to be in the images folder of the template you are using for Joomla, not the images folder of the K2 component. But as long as you know, it is all good!

My next project is to move a few of the Social buttons up next to the print and e-mail button. But I will make a separate topic for that so it is easier to find later.

Again - thanks a lot for your tip. VERY useful!

Regards,

Svein

Erebrum said:Hi, about replacing print and email links with icons just recently did something with featured notice (replaced it with image). I suppose that you are talking about print and email links beside font resizer in item view.
so what i did:
1. create custom template and assign it to your category (custom template placing issue here

2. go in your custom template folder and open item.php, on line 104 there is block starting about print button

3. here is changed code:
ehh ok i pasted code but as in this forum there is no code block or something it messed all up i will try to attach image or file...


ok attached image click on it for bigger version

That would be it - short version. And instead of print text link you have a button :) Same process should be applied on email or any other change if i am not mistaking.

I did a similar trick on my site, here is a link to the guide I wrote.


Svein Wisnaes said:This works absolutely perfect! Thanks! Sorry that I was not able to get around to test it before now, but now I have it done And it looks great :-)
One thing worth mentioning is that the way you have set it up here, the icons needs to be in the images folder of the template you are using for Joomla, not the images folder of the K2 component. But as long as you know, it is all good!

My next project is to move a few of the Social buttons up next to the print and e-mail button. But I will make a separate topic for that so it is easier to find later.

Again - thanks a lot for your tip. VERY useful!

Regards,

Svein

Erebrum said:Hi, about replacing print and email links with icons just recently did something with featured notice (replaced it with image). I suppose that you are talking about print and email links beside font resizer in item view. so what i did:
1. create custom template and assign it to your category (custom template placing issue here

2. go in your custom template folder and open item.php, on line 104 there is block starting about print button

3. here is changed code:
ehh ok i pasted code but as in this forum there is no code block or something it messed all up i will try to attach image or file...


ok attached image click on it for bigger version

That would be it - short version. And instead of print text link you have a button :) Same process should be applied on email or any other change if i am not mistaking.

Simon,

After I wrote this, I tried to figure out how to move a couple of the social media icons up beside the print and e-mail icons. The solution I came up with was very close to what you have done here and I liked your solution very much. I think I will use that one instead of the one suggested by Erebrum as it involves less code and seems a bit "cleaner" to me.

I will post a message in this forum about my solution for the social media icons. Things are working, but I have two problems you might be able to give me a tip about.

Thank you very much for your tip!

Simon Wells said:I did a similar trick on my site, here is a link to the guide I wrote.

Actually - the title of the thread covers everything, so it is ok to add things here :-)




I copied the href statements from the row of social buttons at the bottom of the article and added the image source. This is basically just a picture with a link built in an absolute standard way. But the link URL has been replaced by a php expression.

I have two problems here. I could not find the correct Twitter code for the button. Actually, I would not mind having a button that show the number of Tweets for this article and allows the user to Tweet is with a click.

The other problem I have is that I do not get any tooltip (alt-tag) when hovering the mouse over the icons. Any idea why? I get it on several other things on the same page, just not the new icons.

I will be looking into this too as I would like to have a row at the top of each post showing the Print, Email, Twitter and other Social icons as well.

I also need to re-ook at my code as the Alt text is not works, although it appears to be present, so I will update shortly.


Svein Wisnaes said:Actually - the title of the thread covers everything, so it is ok to add things here :-)



I copied the href statements from the row of social buttons at the bottom of the article and added the image source. This is basically just a picture with a link built in an absolute standard way. But the link URL has been replaced by a php expression.

I have two problems here. I could not find the correct Twitter code for the button. Actually, I would not mind having a button that show the number of Tweets for this article and allows the user to Tweet is with a click.

The other problem I have is that I do not get any tooltip (alt-tag) when hovering the mouse over the icons. Any idea why? I get it on several other things on the same page, just not the new icons.

I also noticed in your article that you had two span statements with no closing. Maybe they are closed further down, but I thought they should be inside the if-then loop?

Here is what the bar under the main picture in my articles look like now. It is still a bit rough and needs adjustments, but you get the idea:

Thanks for spotting that, strangely, it continued to work.
I have redone the code and cleaned it a bit more too, plus added "title" to display tooltip on hover.

Svein Wisnaes said:I also noticed in your article that you had two span statements with no closing. Maybe they are closed further down, but I thought they should be inside the if-then loop?
Here is what the bar under the main picture in my articles look like now. It is still a bit rough and needs adjustments, but you get the idea:

Thank you for that tip. I have cleaned up a bit and got the tooltip to work on all icons now.

The print icon:




The e-mail icon:




And the two social media icons:




Only thing left now is Twitter.

For some reason, I have to enter my Twittername in the settings to be able to show the built-in Twitter link. But this should not be necessary. I am not the one that will be clicking this link all the time :-)

So I need something more general. The cool thing would be if it could pick up how many times the article had been tweeted before, but it is not really necessary.

Ideas?

How about a TweeMeMe hack?
tweetmeme.com

Svein Wisnaes said:Thank you for that tip. I have cleaned up a bit and got the tooltip to work on all icons now.
The print icon:




The e-mail icon:




And the two social media icons:




Only thing left now is Twitter.

For some reason, I have to enter my Twittername in the settings to be able to show the built-in Twitter link. But this should not be necessary. I am not the one that will be clicking this link all the time :-)

So I need something more general. The cool thing would be if it could pick up how many times the article had been tweeted before, but it is not really necessary.

Ideas?

I like the compact version, but would prefer to have all code on my own server so I do not have to wait for anything to load from their server. So the function itself is interesting, but I would prefer to not use an external service for it. Will have to do some more research. If you find anything in the mean time, please let me know.

Svein

Simon Wells said:How about a TweeMeMe hack? tweetmeme.com

After looking a little closer at the Twitter code in K2, I realised it is not too bad at all, so I decided to do a little modification and include it with the two other icons. Here is the code I ended up with:




By clicking on the button you get this message:

Reading @twittername Main-article-title tinyurl.com/xyxyxyx

I think this is absolutely acceptable, so for now I think I will let this part stay as it is. Only thing I might do is tweak the icons a little :-)

Only thing you have to remember is to add the twittername you want to use as the main twitter reference in the K2 settings. And don't include the @.

Dan,

Did you look at my final suggestion? I thought I had the alt-tags in there, and using Firebug on a project page, it looks like it is in place. Could you test it, please?

Regards,

Svein

Dan Englander (highrockmedia) said:Why not just add CSS background images and then just offset the text with a negative margin?
So for a print icon, use something like this (using K2's CSS classes):

.itemToolbar ul li a.itemPrintLink
{
background: url(/images/print-icon.gif) no-repeat center;
text-indent: -9999px;
}

Also with your code, your images don't not have alt tags.

Erebrum said:Hi, about replacing print and email links with icons just recently did something with featured notice (replaced it with image).
Hi
Is it possible that you can show me the code you use to replace featured notice with an image.
It will help me at lot.
Many thk.
Peter

Hi i just noticed your Q (did not been around for some time)
Ok code to replace featured notice with image:



file is category_item.php in template files and this changes featured notice with image you choose in article category listing - if you follow featured article, text notice will be there - template for article display needs to be changed for this (possibly same/similar code)

hope this helps



Peter Jørgensen said:Erebrum said:Hi, about replacing print and email links with icons just recently did something with featured notice (replaced it with image). Hi
Is it possible that you can show me the code you use to replace featured notice with an image.
It will help me at lot.
Many thk.
Peter

Hi thk. a lot
just what i need.
I have fixed the article featured icon.
Have a god day :)
Peter

Erebrum said:Hi i just noticed your Q (did not been around for some time) Ok code to replace featured notice with image:



file is category_item.php in template files and this changes featured notice with image you choose in article category listing - if you follow featured article, text notice will be there - template for article display needs to be changed for this (possibly same/similar code)

hope this helps



Peter Jørgensen said:Erebrum said:Hi, about replacing print and email links with icons just recently did something with featured notice (replaced it with image). Hi Is it possible that you can show me the code you use to replace featured notice with an image.
It will help me at lot.
Many thk.
Peter

You people need to learn CSS (= Not everything has to be a hack

Not everything can be done with css . But yes a lot can


Carlos Salas said:You people need to learn CSS (= Not everything has to be a hack