Joomla Templates Club 406,261 posts

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#197774

Hi,

I followed the http://www.joomlart.com/documentation/joomla-templates/ja-decor#custom-html
and I got my code from Addthis site: but the youtube icon doesnt show. only facebook and G+.

Please help. thanks,

<!– AddThis Follow BEGIN –>
<div class=”addthis_toolbox addthis_32x32_style addthis_default_style”>
<a class=”addthis_button_facebook_follow” addthis:userid=”ddddd”></a>
<a class=”addthis_button_google_follow” addthis:userid=”ddddd”></a>
<a class=”addthis_button_youtube_follow” addthis:userid=”ddddd”></a>
</div>
<script type=”text/javascript” src=”//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-52c4dc6a6f54bdd9″></script>
<!– AddThis Follow END –>

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#535288

You need to go to Addthis.com to register and get the button code. Then add userid in this module as follows:


<!-- AddThis Follow BEGIN -->
<div class="addthis_toolbox addthis_32x32_style addthis_default_style">
<a class="addthis_button_facebook_follow" addthis:userid="ddddd"></a>
<a class="addthis_button_google_follow" addthis:userid="ddddd"></a>
<a class="addthis_button_youtube_follow" addthis:userid="ddddd"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-52c4dc6a6f54bdd9"></script>
<!-- AddThis Follow END -->


and open templates/ja_decor/less/modules.less file, find and remove


.addthis_32x32_style .at15nc.at300bs,
.addthis_32x32_style .at15nc.at15t {
background-image: url("@{t3-image-path}/ico/social.png") !important;
height: 30px !important;
line-height: 30px !important;
width: 30px !important;
}

.addthis_32x32_style .at15nc.at15t_twitter {
background-position: 0px -30px !important;

&:hover {
background-position: -30px -30px !important;
}
}

.addthis_32x32_style .at15nc.at15t_facebook {
background-position: 0px 0px !important;

&:hover {
background-position: -30px 0px !important;
}
}

.addthis_32x32_style .at15nc.at15t_google_follow {
background-position: 0px -60px !important;
&:hover {
background-position: -30px -60px !important;
}
}


[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#535428

Hi, I followed the steps, but still not able to get it done.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#535524

<em>@okkhalid 427623 wrote:</em><blockquote>Hi, I followed the steps, but still not able to get it done.</blockquote>

Your site is using yellow theme, thus my solution above doesn’t work. I just fixed directly on your site.

In the templates/ja_decor/css/themes/yellow/template.css file, I added comment to the rules below.

/*.sticky-module .addthis_32x32_style .at15nc.at300bs,
.sticky-module .addthis_32x32_style .at15nc.at15t {
background-image: url("../../../images/ico/social.png") !important;
height: 30px !important;
line-height: 30px !important;
width: 30px !important;
}
.sticky-module .addthis_32x32_style .at15nc.at15t_twitter {
background-position: 0px -30px !important;
}
.sticky-module .addthis_32x32_style .at15nc.at15t_twitter:hover {
background-position: -30px -30px !important;
}
.sticky-module .addthis_32x32_style .at15nc.at15t_facebook {
background-position: 0px 0px !important;
}
.sticky-module .addthis_32x32_style .at15nc.at15t_facebook:hover {
background-position: -30px 0px !important;
}
.sticky-module .addthis_32x32_style .at15nc.at15t_google_follow {
background-position: 0px -60px !important;
}
.sticky-module .addthis_32x32_style .at15nc.at15t_google_follow:hover {
background-position: -30px -60px !important;
}*/

Please check your site again.

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#535544

HI, Thank you yes I can see its working now.

Is that possible to keep Jdecor black icons instead of this. ja decor social icon are black very nicer.

Thanks

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#535610

@okkhalid: From this link your_domain/dcl/templates/ja_decor/images/ico/social.png, you will see it only works with facebook, twitter, google plus icons and the custom css style only works for those 3 icons.

That’s why you add new youtube button however it didn’t display on your site.

My fixed above just covers default style from Addthis, if you want to work with JA Decor as you expect, you have to change this image here your_domain/dcl/templates/ja_decor/images/ico/social.png and add new style for youtube button.

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#535708

Great will do that, thank you for all your help. you are a great :laugh:

[Author]

Posts