Joomla Templates Club 406,261 posts

[iwadeaz Friend iwadeazJoin date: January 2008Posts: 100Downloads:0Uploads:3 Thanks: 18]

#197257

I want to include social icons for Blogger & Linked in. I changed the .png in themes, but how do i get them to show??

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#533052

Where, on your site page, are you trying to add social icons?

It would be helpful if you could provide the url of the site you’re working on.

[iwadeaz Friend iwadeazJoin date: January 2008Posts: 100Downloads:0Uploads:3 Thanks: 18]

#533176

It would be under “awesome team” as personal bio info

http://ileibowi.u149.websitesource.net/mg/

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#533178

I don’t see an “awesome team” link or heading anywhere. :-[

[iwadeaz Friend iwadeazJoin date: January 2008Posts: 100Downloads:0Uploads:3 Thanks: 18]

#533210

“Awesome Team” was the default module title for Onepage, “About Mark” is the current.

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

#533232

<em>@iwadeaz 424519 wrote:</em><blockquote>I want to include social icons for Blogger & Linked in. I changed the .png in themes, but how do i get them to show??</blockquote>

Do you want to change the link in Linkedin?

If yes, you can try as follows :

+ Go to Admin site > Global Configuration -> Default Editor -> set Editor – None -> Save

+ Go to Module Manage -> Open ABOUT MARK module and change link in HTML script

---

Attachments:

1. 

[iwadeaz Friend iwadeazJoin date: January 2008Posts: 100Downloads:0Uploads:3 Thanks: 18]

#533247

I want to include social icons for Blogger & Linked in. I changed the .png in themes, and in the code, but how do i get them to show??

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

#533267

<em>@iwadeaz 424782 wrote:</em><blockquote>I want to include social icons for Blogger & Linked in. I changed the .png in themes, and in the code, but how do i get them to show??</blockquote>

It would be great if you can include an illustrated screenshot of what you are trying to achieve, It would help to understand the issues and give you specific answers.

[iwadeaz Friend iwadeazJoin date: January 2008Posts: 100Downloads:0Uploads:3 Thanks: 18]

#533339

Pretty simple, i want to include two social icons into the section “About Mark” (which was once the onepage default module “Awesome Team”); for Blogger and LinkedIn. I changed the social-icons.png (to reflect the changes) but the changes don’t show (on the module). Additionally, I went into the code but need to know if there is anything else I need to change other than what is in the code in the module. (attachment included) thanks.

---

Attachments:

1. 

[iwadeaz Friend iwadeazJoin date: January 2008Posts: 100Downloads:0Uploads:3 Thanks: 18]

#533506

So now in Chrome, the correct number of icons appear, but they are the wrong ones, with triplicates of the first… In I.E. only half the icons show…??

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

#533542

+ Please follow steps mentioned earlier first http://www.joomlart.com/forums/topic/social-icons-3/#post-533232

+ Then, go to Admin site -> Open About Mark module and change html structure

Find and change

<ul class="social-list">
<li><a class="facebook" href="#" title="Facebook">Facebook</a></li>
<li><a class="twitter" href="#" title="Twitter">Twitter</a></li>
<li><a class="flicker" href="#" title="Flicker">Flicker</a></li>
</ul>

To

<ul class="social-list">
<li><a class="facebook" href="#" title="Facebook">Facebook</a></li>
<li><a class="linkedIn" href="#" title="Blogger and LinkedIn">Blogger and LinkedIn</a></li>
<li><a class="twitter" href="#" title="Twitter">Twitter</a></li>
<li><a class="flicker" href="#" title="Flicker">Flicker</a></li>
</ul>

+ Edit the templates/ja_onepage/images/themes/modern/social-icons.png file and add new icon to this image

+ Open the templates/ja_onepage/css/themes/modern/template.css file and find these css style:


ul.social-list li a {
background-image: url(../../../images/social-icons.png);
background-repeat: no-repeat;
display: block;
height: 20px;
text-indent: -999em;
width: 20px;
}
ul.social-list li a.facebook {
background-position: 0px -20px;
}
ul.social-list li a.facebook:hover,
ul.thumbnails li:hover li a.facebook {
background-position: 0px -40px;
}
ul.social-list li a.twitter {
background-position: -20px -20px;
}
ul.social-list li a.twitter:hover,
ul.thumbnails li:hover li a.twitter {
background-position: -20px -40px;
}
ul.social-list li a.flicker {
background-position: -40px -20px;
}
ul.social-list li a.flicker:hover,
ul.thumbnails li:hover li a.flicker {
background-position: -40px -40px;
}


and add new rule for Blogger and LinkedIn, for instance:

ul.social-list li a.linkedIn {
background-position: -20px -20px;
}

2 users say Thank You to Ninja Lead for this useful post

1. iwadeaz
2. xdesigner

[iwadeaz Friend iwadeazJoin date: January 2008Posts: 100Downloads:0Uploads:3 Thanks: 18]

#533875

Thank you.

[Author]

Posts