Joomla Templates Club 406,261 posts

[kristinnjon Friend kristinnjonJoin date: July 2011Posts: 15Downloads:0Uploads:6 Thanks: 9]

#172263

Hello. I have a question. I am using Ja-Social Template to setup a website and I would like to add an icon like as in “Follow us” or “Contact us” in User8 or User9 as this website shows: http://templates.joomlart.com/ja_social/?tp=1

I would like to add a googleplus icon and youtube icon. I tried to add the icons in this folder templates/ja_social/images/icons

It is not working. In template.css – I figured it out in “Follow us” with this for facebook and twitter as:

#ja-wrapper ul.social-list li.ja-facebook a { background-image: url(../images/icons/icon-facebook.png); }
#ja-wrapper ul.social-list li.ja-twitter a { background-image: url(../images/icons/icon-twitter.png); }

I would like to add for googleplus and youtube. I have the icons.

also for contact us it is for home and phone. I would like to add my icon for online chat there.

#ja-wrapper ul.contact-list li.add { background-image: url(../images/icons/icon-home.png); }
#ja-wrapper ul.contact-list li.tel { background-image: url(../images/icons/icon-phone.png); }

I am not sure what steps I should do to modificate this to being able to add youtube and googleplus icons on the website and also the icon for online chat.

Thanks,

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#432150

Hi kristinnjon

Have you solved or still need help on this ?

Thanks

[kristinnjon Friend kristinnjonJoin date: July 2011Posts: 15Downloads:0Uploads:6 Thanks: 9]

#432152

I have not solved this. I would appreciate to get some help with this.

Thanks,

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#432157

You can do in this way

Goto template.css and find this line around 940

#ja-wrapper ul.social-list li.ja-facebook a { background-image: url(../images/icons/icon-facebook.png); }
#ja-wrapper ul.social-list li.ja-twitter a { background-image: url(../images/icons/icon-twitter.png); }
#ja-wrapper ul.social-list li.ja-linkedin a { background-image: url(../images/icons/icon-linkedin.png); }
#ja-wrapper ul.social-list li.ja-rss a { background-image: url(../images/icons/icon-rss.png); }

add this two line of code

#ja-wrapper ul.social-list li.ja-gplus a { background-image: url(../images/icons/gplus.png); }
#ja-wrapper ul.social-list li.ja-youtube a { background-image: url(../images/icons/youtube.png); }

copy the two png images gplus.png and youtube.png in the templatesja_socialimagesicons folder

then go to backend and edit the follow us module published in the user-8 position and add this lines of code

<li class="ja-gplus"><a href="#" title="Sample link">Google Plus</a></li>
<li class="ja-youtube"><a href="#" title="Sample link">YouTube</a></li>

That’s all if you want publish these link to another position you can simply create a new custom-html module with that code a publish it in a new position

For the contact list the procedure is the same shwed above

Let me know if you need more help

1 user says Thank You to pavit for this useful post

1. kristinnjon

[kristinnjon Friend kristinnjonJoin date: July 2011Posts: 15Downloads:0Uploads:6 Thanks: 9]

#432204

Thank you for the help. I tried both “Find us” and “Contact us”. The icons does not show up for Google Plus and Youtube in “Find us” in the FrontEnd. However, in the “Contact us” the icon did show up.

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#432216

If you can send me your admin details for the backend via PM, i can do for you

[Author]

Posts