Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 8, 2018 at 9:25 pm #938883
    friefodspor

    Hi Kriesi

    I have installed social sharing icons onb my site (se details below). I would like to style them differently. What I would like is to make them the green colour I am using throughout the site #74b86b and in the design with circles that I have linkes to as link number two in private section.

    How to?

    Best regards Marie

    April 8, 2018 at 10:43 pm #938898
    Mike

    Hey friefodspor,
    I took a look at your site, but didn’t see the social share buttons on your posts, perhaps they were disabled when I looked, so I assume they are the Social Share Button Element like the demo.
    I wrote this css to work on the default buttons:

    #top .av-share-box ul,#top .av-share-box ul li {
    border-style: none!important; 
    border-width: 0px!important;    
}
#top .av-share-box ul li a {
    border: none!important; 
    height: 50px!important; 
    width: 50px!important; 
    border-radius: 100%;
    padding: 15px!important; 
    margin: auto !important; 
    background-color: #74b86b; 
}
#top .av-share-box ul li a[data-av_icon]:before {
color: #fff !important;
}

    Expected results:
    2018-04-08_163417

    Best regards,
    Mike

    April 8, 2018 at 11:16 pm #938912
    friefodspor

    I have only added them to a single post, the one you see below. I added it manually from the conten area I learned about yesterday. The code you sent works well.
    1. Can you make the code to make the mouse over colour this #857949
    2. Can you make the diatance between the blog post text and the social icons bigger?

    Thanks… Marie

    April 8, 2018 at 11:51 pm #938916
    Mike

    Hi,
    To change the hover color, try:

    #top #wrap_all .av-social-link-facebook:hover a,#top #wrap_all .av-social-link-pinterest:hover a,#top #wrap_all .av-social-link-mail:hover a {
color:#fff; background-color:#857949 !important; 
}

    To add some padding, try:

    .av-social-sharing-box {
padding-top: 50px !important;
}

    adjust the number to suit.

    Best regards,
    Mike

    April 16, 2018 at 8:16 pm #942744
    friefodspor

    Much better now. I seems that the padding is not centred – in the sense that now the icons are not in the middle of the circles?

    April 17, 2018 at 12:39 am #942836
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    #top .av-share-box ul li a {
    line-height: 20px;
}

    Best regards,
    Yigit

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