Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #767492

    Hello,

    I have added following code in quick css :

    .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;
    }

    This code I have found here : https://kriesi.at/support/topic/centre-social-share-buttons-and-re-colour/

    It works well but I’d like to know 2 things :
    – How can I add a hover color for each button. Because now they are colored and nothng happens when mouse goes over them.
    – How can I have bigger icons

    Thanks for your advice

    #768149

    Hey zaza26,

    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 ul li a {
        font-size: 20px;
    }
    #top #wrap_all .av-social-link-facebook:hover a {
        color: #fff;
        background-color: #37589b;
    }
    #top #wrap_all .av-social-link-twitter:hover a {
        color: #fff;
        background-color: #46d4fe;
    }
    #top #wrap_all .av-social-link-gplus:hover a {
        color: #fff;
        background-color: #de5a49;
    }
    #top #wrap_all .av-social-link-pinterest:hover a {
        color: #fff;
        background-color: #cb2027;
    }
    #top #wrap_all .av-social-link-linkedin:hover a {
        color: #fff;
        background-color: #419cca;
    }
    #top #wrap_all .av-social-link-mail:hover a {
        color: #fff;
        background-color: #9fae37;
    }
    

    and adjust colors as needed

    Best regards,
    Yigit

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.