Joomla Templates Club 406,261 posts

[Klaus Ondrich Friend Klaus OndrichJoin date: April 2015Posts: 67Downloads:13Uploads:0 Thanked: 2 times in 1 posts]

#694885

Hello,

unfortunately, Fubix’ social footer just supports Facebook, Flicker, Twitter and RSS-Feed. We would miss Google+ and Instagram (others would probably want other ones as well).

Could you please update “/templates/ja_fubix/images/ico/ico-social.png” as well as corresponding css files to support those social networks? I could integrate this as a hot fix on our site until a Fubix update would be released.

Right now, <li class=”instagram”><a href=”https://instagram.com/ulc_riverside_moedling” target=”_blank” title=”Instagram”><span class=”icon”> </span>Instagram</a> shows the first icon of the sprite, i.e. Facebook icon (see https://www.ulc-moedling.at/).

Thanks,

Klaus

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

#695341

Hi Klaus,

In this case, maybe you have to customize on that, below is my workaround:

+ Go to Admin site -> Global Configuration -> under Site tabs-> set Default Editor: Editor – None

+ Go to Module Manager -> find module 142 and change it to

<div class="footer-follow">
<ul class="social-list">
<li class="facebook"><a title="Facebook" href="#"><span class="icon-facebook"> </span>Facebook</a></li>
<li class="twitter"><a title="Twitter" href="#"><span class="icon-twitter"> </span>Twitter</a></li>
<li class="google-plus"><a title="Feed" href="#"><span class="icon-google-plus"> </span>Google Plus</a></li>
<li class="instagram"><a title="Feed" href="#"><span class="icon-instagram"> </span>Instagram</a></li>
</ul>
</div>

+ Create templates/ja_fubix/css/custom.css file and add new rule


.footer-social ul li span {
background-image: none;
padding: 14px 0px 2px 14px;
}

.footer-social ul li a:hover span {
background-color: none !important;
}


Hope it helps

Regards

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

1. imported_kondrich

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

#750582

Hi Klaus,

In this case, maybe you have to customize on that, below is my workaround:

+ Go to Admin site -> Global Configuration -> under Site tabs-> set Default Editor: Editor – None

+ Go to Module Manager -> find module 142 and change it to

<div class="footer-follow">
<ul class="social-list">
<li class="facebook"><a title="Facebook" href="#"><span class="icon-facebook"> </span>Facebook</a></li>
<li class="twitter"><a title="Twitter" href="#"><span class="icon-twitter"> </span>Twitter</a></li>
<li class="google-plus"><a title="Feed" href="#"><span class="icon-google-plus"> </span>Google Plus</a></li>
<li class="instagram"><a title="Feed" href="#"><span class="icon-instagram"> </span>Instagram</a></li>
</ul>
</div>

+ Create templates/ja_fubix/css/custom.css file and add new rule


.footer-social ul li span {
background-image: none;
padding: 14px 0px 2px 14px;
}

.footer-social ul li a:hover span {
background-color: none !important;
}


Hope it helps

Regards

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

1. imported_kondrich

[Klaus Ondrich Friend Klaus OndrichJoin date: April 2015Posts: 67Downloads:13Uploads:0 Thanked: 2 times in 1 posts]

#695433

Hi @ninja Lead,

thank you for this workaround. It’s online on our test site: https://test.ulc-moedling.at/

I removed padding from .footer-social ul li span to left-align it with “FOLLOW” menu title. However, the lines are not vertically aligned with the other footer lines (“Facebook” is below “ULC-Fotos” and so on).
Do you have any idea to fix this?

Best regards,

Klaus

[Klaus Ondrich Friend Klaus OndrichJoin date: April 2015Posts: 67Downloads:13Uploads:0 Thanked: 2 times in 1 posts]

#750629

Hi @ninja Lead,

thank you for this workaround. It’s online on our test site: https://test.ulc-moedling.at/

I removed padding from .footer-social ul li span to left-align it with “FOLLOW” menu title. However, the lines are not vertically aligned with the other footer lines (“Facebook” is below “ULC-Fotos” and so on).
Do you have any idea to fix this?

Best regards,

Klaus

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

#695555

Hi Klaus,

You can add the css style below into custom.css file


.footer-social .module-ct {
padding-top: 4px;
}

.footer-social ul li {
margin-bottom: 10px;
}


The problem on your site will be gone.

Regards

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

1. imported_kondrich

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

#750704

Hi Klaus,

You can add the css style below into custom.css file


.footer-social .module-ct {
padding-top: 4px;
}

.footer-social ul li {
margin-bottom: 10px;
}


The problem on your site will be gone.

Regards

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

1. imported_kondrich

[Klaus Ondrich Friend Klaus OndrichJoin date: April 2015Posts: 67Downloads:13Uploads:0 Thanked: 2 times in 1 posts]

#750906

Thanks @ninja Lead,

however, I kept list-style: none; in there to avoid list dots in front of the social sites:

.footer-social ul li {
list-style: none;
margin-bottom: 10px;
}

Best regards, Klaus

[Author]

Posts