social buttons on footer

GK User
Tue Jun 30, 2015 9:30 am
In the WordPress-Template "Quark" there is a div-class named "gk-footer-social-icons" which allows to place social icons on the footer. Discussed in the following post: https://www.gavick.com/forums/quark-wp/ ... ns#p233286
When I try to paste the code in the Steak House-Templates copyright field nothing happens. Is it possible to place social icons on footer ?
User avatar
Senior Boarder

teitbite
Tue Jun 30, 2015 9:29 pm
Hi

Yes it's possible, but instead of usina our classes for icons use icons from Font Awsome http://fortawesome.github.io/Font-Awesome/icons/

So code will look more like this:

Code: Select all
<div class="gk-footer-social-icons">
<a href="#"><i class="fa-facebook"></i></a>
<a href="#"><i class="fa-twitter"></i></a>
<a href="#"><i class="fa-googleplus"></i></a>
<a href="#"><i class="fa-instagram"></i></a>
</div>
 © 2007-2015, GavickPro<br> is an authorized retailer for goods provided by Quark Store
User avatar
Moderator

GK User
Tue Jun 30, 2015 11:16 pm
Thank you for response. I paste the code in the copyright-field and add some text. My code looks as follows:
Code: Select all
<div class="gk-footer-social-icons">
<a href="https://www.facebook.com/pages/Die-Saftpresse/559226734112696?fref=ts"><i class="fa fa-facebook"></i><span>BESUCHE UNS AUF FACEBOOK</span></a>
<a href="https://twitter.com/DiE_SAFTPRESSE"><i class="fa fa-twitter"></i><span>FOLGE UNS AUF TWITTER</span></a>
<a href="http://install.diesaftpresse.de/#gkBottom4"><i class="fa fa-envelope"></i><span>KONTAKT</span></a>
<a href="http://install.diesaftpresse.de/index.php/impressum"><i class="fa fa-info-circle"></i><span>IMPRESSUM</span></a>
</div>

Unfortunately the text comes straight behind the icons instead of underneath them like in the header where I use the "gk-short-menu"-class.
My URL is: http://install.diesaftpresse.de/
User avatar
Senior Boarder

teitbite
Wed Jul 01, 2015 10:48 am
Hi

Add this to override.css to fix this :

Code: Select all
#gkCopyrights .fa {
display: block;
}

#gkCopyrights a {
    display: inline-block;
    margin: 0 15px;
}
User avatar
Moderator

GK User
Thu Jul 02, 2015 8:12 pm
Works fine, thank you.
I would like to know another thing: for the footer-icons I use font awesome-fonts just like for the header section.
What I'd like to do is to give both different colors/sizes. When I change the code in in "typography.style2.css" the font awesome is changing generally. Whenever I use it only one style is possible.
User avatar
Senior Boarder

teitbite
Sun Jul 05, 2015 7:27 pm
Hi

Try add to css a code like:

Code: Select all
.fa-facebook { color: blue; }
.fa-twitter { color: red; }
User avatar
Moderator

GK User
Tue Jul 07, 2015 6:13 pm
When I give ".fa-envelope" another color for example it changes the icon everywhere in my template. Whenever I use the icon it has the one definied color.
In my case I want to use the fa-envelope-icon in the header (white color) and in the footer (dark color).
User avatar
Senior Boarder

teitbite
Thu Jul 09, 2015 8:04 pm
Hi

Use this instead:

Code: Select all
#gkHeaderMod .fa-envelope::before {
color: #fff;
}
User avatar
Moderator

GK User
Wed Jul 15, 2015 8:58 pm
Works properly but there is still a problem with this "fa-envelope"-icon in the footer. It seems it has the same properties like the one in the header (white instead of dark).
User avatar
Senior Boarder

teitbite
Fri Jul 17, 2015 6:06 pm
Hi

That's because You haven't added the code as I wrote it. You are still missing #gkHeaderMod before the class:

Code: Select all
#gkHeaderMod .fa-envelope::before {
color: #fff;
font-size: 50px;
}


this prefix will make this code change only the icon in header and not the footer one, so remove the override for both You have now.
User avatar
Moderator

GK User
Sun Jul 19, 2015 12:22 pm
Thank's, I forgot to add "#gkHeaderMod" before each header-icon. Topic solved.
User avatar
Senior Boarder

teitbite
Sun Jul 19, 2015 7:06 pm
Hi

Great to hear that. I'm closing it than.
User avatar
Moderator


cron