Joomla Templates Club 406,261 posts

[sunrise Friend sunriseJoin date: February 2007Posts: 920Downloads:0Uploads:5 Thanks: 103 Thanked: 166 times in 114 posts]

#191176

I’d like to add LinkedIn to the Social Module. That would make four links.

When I try now, LinkedIn goes below the other three.

Also, the others all change color when hover, but not LinkedIn.

Any solutions would be very welcome. Thanks.:)

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#508164

Hi sunrise,

In order to add LinkedIn or other social link into Social module, you can follow these steps:

– Go to Global Configuration >> set Editor – None in Default Editor option.
– Replace the Social module’s HTML codes with below ones:

<a class="icon-facebook" href="#" title="facebook"><span>Facebook</span></a>
<a class="icon-twitter" href="#" title="twitter"><span>Twitter</span></a>
<a class="icon-google-plus" href="#" title="googleplus"><span>Google +</span></a>
<a class="icon-linkedin" href="#" title="LinkedIn"><span>LinkedIn</span></a>

– Create a custom.css file at templates/ja_beranis/css/ path, then put below css styles into:

/*Adding LinkedIn to Social module*/
.t3-social a.icon-linkedin {
background-color: green; /*Change to your background color*/
}

.t3-social a {
width: 240px;
}

Note: Acutally, you just need to use the 3rd step, but i intend that JA users can benefit with full guides.

2 users say Thank You to phong nam for this useful post

1. sunrise
2. rope

[sunrise Friend sunriseJoin date: February 2007Posts: 920Downloads:0Uploads:5 Thanks: 103 Thanked: 166 times in 114 posts]

#508342

Hi Leo,

I tried, but could not quite seem to get it working.

The text in red, above, <a class=”icon-linkedin” href=”#” title=”LinkedIn”><span>LinkedIn</span></a> is fine.

But I had problem getting the css working.

Your answer gave me the idea to check the template.css and there I found the answer. Here is what I did.

I changed

.t3-social a {
display: inline-block;
width: 320px;
float: left;
height: 240px;
color: #fff
line-height: 240px;
font-size: 120px;
text-align: center;
-webkit-transition: 0.2s linear 0s;
-moz-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}

to .t3-social a {
display: inline-block;
width: 240px;
float: left;
height: 180px;
color: #fff
line-height: 180px;
font-size: 100px;
text-align: center;
-webkit-transition: 0.2s linear 0s;
-moz-transition: 0.2s linear 0s;
-o-transition: 0.2s linear 0s;
transition: 0.2s linear 0s;
}
And I added:

.t3-social a.icon-linkedin {
background-color: #4875B4
}
.t3-social a.icon-linkedin:focus,
.t3-social a.icon-linkedin:hover {
color: #4875B4
background: #fff
}

1 user says Thank You to sunrise for this useful post

1. phong nam

[Author]

Posts