Joomla Templates Club 406,261 posts

[ovdb Friend ovdbJoin date: March 2012Posts: 18Downloads:11Uploads:2 Thanks: 5 Thanked: 1 times in 1 posts]

#188582

Hello,

when i save in html the follow – social module in footer-4 as described in the manual, it is saved as:

<ul class="social-list">
<li class="facebook"><a href="#" title="Facebook">Facebook</a></li>
<li class="twitter"><a href="#" title="Twitter">Twitter</a></li>
<li class="flickr"><a href="#" title="Flickr">Flickr</a></li>
<li class="feed"><a href="#" title="Feed">Feed</a></li>
</ul>

instead of

<ul class="social-list">
<li class="facebook"><a href="#" title="Facebook"><span class="icon"> </span>Facebook</a></li>
<li class="twitter"><a href="#" title="Twitter"><span class="icon"> </span>Twitter</a></li>
<li class="flickr"><a href="#" title="Flickr"><span class="icon"> </span>Flickr</a></li>
<li class="feed"><a href="#" title="Feed"><span class="icon"> </span>Feed</a></li>
</ul>

Somewhere the span class code has disappeared and the icons are not showing up on the frontpage.

Somebody any clue?

O

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

#497376

Hi

First to insert this html code inside module disable your editor from global settings, and check if it works correctly

1 user says Thank You to pavit for this useful post

1. ovdb

[ovdb Friend ovdbJoin date: March 2012Posts: 18Downloads:11Uploads:2 Thanks: 5 Thanked: 1 times in 1 posts]

#497404

Hi pavit,

I succeeded to set the editor to none and to get it worked correctly. Even edited and saved it later on with JCE editor.
As I continued to work on the project today I moved the modules in the footer and… gone where the icons again! :-[
Although the code displays correctly in the admin part of the module with editor set to none, the code is truncated when I try with JCE.

To recap:
1. set editor to none
2. copied original html code and saved
3. icons showed up correctly
4. set JCE as editor
5. played around and edited some other stuff and also this code by adding URL of facebook and twitter. Till then everything OK
6. moved some footers by shuffling places
Then icons disappeared again
7. reset of editor to none
8. repasted the original code
9. Clean cache etc…

No way to get it correctly displayed :((

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

#497652

Hi ovdb,

On JA Hawkstore template, We use a 4-icons image with padding style to display 4 social icons.
You can find these codes in templates/ja_hawkstore/css/template.css at lines:

.t3-footnav .social-list li span.icon {
background-image: url("../images/ico/ico-social.png");
background-color: #444
background-repeat: no-repeat;
display: inline-block;
height: 20px;
margin-right: 10px;
width: 20px;
}

or

span.icon {
background-image: url("@{T3ImagePath}/ico/ico-social.png");
background-color: @grayDark;
background-repeat: no-repeat;
display: inline-block;
height: 20px;
margin-right: 10px;
width: 20px;
}

in templatesja_hawkstorelessstyle.less.

The solution: Pls try to follow @pavit‘s tips with your correct HTML format & put your website’url here. I believe we can solve your issue with some css tricks.

* Remember to turn off Development mode & Optimize css before putting your url.

[Author]

Posts