Centre social share buttons and re-colour - Support | Kriesi.at

Tagged: centre, colour, social share buttons

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
November 12, 2016 at 3:53 pm #711446

Swarez
Participant

Hey guys and girls!
I found a forum post from 2014 covering this but the code doesn’t seem to work for me.
So the question simply is this: how can I center the ‘Share this entry’ text for the Social Share Buttons?
Additionally i would like to reverse the colour of them so that they hover white from their respective colours.
Any help is appreciated.
The code from this post: https://kriesi.at/support/topic/reverse-the-colours-of-the-social-share-buttons/ isn’t working for me in either functions.php or Quick CSS.
Cheers
Ed

November 13, 2016 at 9:03 am #711560

Rikard
Keymaster

Hi Ed,

Could you post a link to the site in question so that we can take a closer look please?

Best regards,
Rikard

November 13, 2016 at 11:13 am #711598

Swarez
Participant

Hi Rikard

Thanks for the reply

Sure – its: https://www.swarez.co.uk

A typical page would be this one: https://www.swarez.co.uk/modern-art-paintings-for-sale/last-train-home/
At the bottom I have placed the social share buttons which is great. However I would simply like to reverse the colours so that they show the hover colour as standard then hover to white on mouse-over (and I need to centre the text please).

By the way on iOS devices you have to tap a button twice to get it to perform the function – can that be changed? No bother if not.

Many thanks
Ed

November 13, 2016 at 3:53 pm #711630

Basilis
Inactive Moderator

Hi!

Can you please disable your cache so we can be able to help you?

Thanks a lot

Regards,
Basilis

November 13, 2016 at 9:17 pm #711687

Swarez
Participant

Sure
Thanks Basilis – cache disabled.
Regards
Ed

November 15, 2016 at 12:21 am #712232
Yigit
Keymaster
Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
```
.av-share-box .av-share-link-description { 
text-align: center;
}
#top #wrap_all .av-social-link-facebook a {
    color: #fff;
    background-color: #37589b;
}
#top #wrap_all .av-social-link-twitter a {
    color: #fff;
    background-color: #46d4fe;
}
#top #wrap_all .av-social-link-gplus a {
    color: #fff;
    background-color: #de5a49;
}
#top #wrap_all .av-social-link-pinterest a {
    color: #fff;
    background-color: #cb2027;
}
#top #wrap_all .av-social-link-linkedin a {
    color: #fff;
    background-color: #419cca;
}
#top #wrap_all .av-social-link-mail a {
    color: #fff;
    background-color: #9fae37;
}
```
If that does not work, please create a temporary admin login and post it here privately

Best regards,
Yigit
November 15, 2016 at 1:41 am #712267

Swarez
Participant

Hey Yigit

It works! You’re a genius! Thank you :)

I noticed that Instagram is the only one of the top icons not changed…. Can you send me the code for that too please?

Thank you so much!!!!!!!!

Regards
Ed

November 15, 2016 at 1:45 am #712268
Yigit
Keymaster
Hi!

Not at all :)
Please add following code to Quick CSS as well
```
#top #wrap_all .av-social-link-instagram a {
    color: #fff;
    background-color: #a67658;
}
```
Regards,
Yigit
November 15, 2016 at 1:47 am #712274

Swarez
Participant

Perfect! Thank you so much :)
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Centre social share buttons and re-colour’ is closed to new replies.