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: