Joomla Templates Club 406,261 posts

[George Pitaru Friend George PitaruJoin date: September 2014Posts: 62Downloads:83Uploads:6 Thanks: 8 Thanked: 3 times in 1 posts]

#194544

Something went wrong (I don’t know what) and now there is a HUGE gap under the social media module in JA Beranis. Can anyone help out?

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

#521616

The following fix should help:

Open the templates/ja_beranis/css/template.css file,

Change

.t3-social a {
display: inline-block;
width: 320px;
float: left;
height: 280px;
color: #fff;
line-height: 280px;
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: 320px;
float: left;
height: 280px;
color: #fff;
line-height: normal;
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;
}

1 user says Thank You to Ninja Lead for this useful post

1. George Pitaru

[George Pitaru Friend George PitaruJoin date: September 2014Posts: 62Downloads:83Uploads:6 Thanks: 8 Thanked: 3 times in 1 posts]

#521730

Thank you, that fixed the problem with the gap, however now I have text over the module. Could you please help me take out the HUGE Facebook, Twitter and Linkedin text that appears over the module?

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

#521982

I have changed the html syntax in social media module:

Change


<p><a class="icon-facebook" title="" href="#">Facebook</a> <a class="icon-twitter" title="twitter" href="#">Twitter</a> <a class="icon-linkedin" title="linkedin" href="#">Linkedin</a></p>

To

<p><a class="icon-facebook" title="" href="#"><span>Facebook</span></a> <a class="icon-twitter" title="twitter" href="#"><span>Twitter</span></a> <a class="icon-linkedin" title="linkedin" href="#"><span>Linkedin</span></a></p>


Also you need to change css style in the templates/ja_beranis/css/template.css file:

Change


.t3-social span,
.t3-social span {
display: none;
}

.t3-social a {
display: inline-block;
width: 320px;
float: left;
height: 280px;
color: #fff;
line-height: normal;
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 span, .t3-social span {
display: block;
font-size: 40px;
margin-top: -180px;
vertical-align: middle;
}
.t3-social a {
color: #FFFFFF;
display: inline-block;
float: left;
font-size: 90px;
height: 280px;
line-height: 240px;
text-align: center;
transition: all 0.2s linear 0s;
width: 320px;
}

Let me know how it goes.

1 user says Thank You to Ninja Lead for this useful post

1. George Pitaru

[jumanji4u Friend jumanji4uJoin date: December 2008Posts: 2Downloads:0Uploads:0]

#548953

Hi, I have the same problem where the text is appearing below the social icons and I followed the steps above and i cannot get it working, the strange thing is the I am not able to get the <span> element saved, every-time updating the social media with the above code with the <span> for all the social icons it not update with it, i just removes the span and with out as below.

1. <p><a class=”icon-facebook” title=”” href=”#”>Facebook</a> <a class=”icon-twitter” title=”twitter” href=”#”>Twitter</a> <a class=”icon-linkedin” title=”linkedin” href=”#”>Linkedin</a></p>

I greatly appreciate the help here.

[Eragon H Friend Eragon HJoin date: July 2014Posts: 468Downloads:1Uploads:39 Thanks: 5 Thanked: 156 times in 149 posts]

#549001

Hi jumanji4u,

By default, the editor normally strips HTML tags like span, id, etc .You should turn off editor when config the Custom HTML module.
System >> Global configuration >> Tab: Site >> Editor >>Editor -None

Regards

[Author]

Posts