Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1052088

    Good evening folks,

    new question: how can I change the size of the social media profile icons?
    And also the space between the icons. Please take a look on the screenshots,
    than you know what I mean.

    I’ve still read the enfold documentation but I only find content about “social
    share buttons“, but this is not what I’m looking for. ;)

    I’m looking forward to your new answer.

    Best regads
    Carsten

    #1052092

    Hey Carsten,

    Please provide a link to the site/page in question so we can look into this further.

    Best regards,
    Jordan Shannon

    #1052117

    Hey Jordan,

    thx for your answer. The link to the site, you wished, is now in the private field.
    But for what do you need it concrete? I didn’t think my question is so difficult? ;)

    I’m looking forward to your new answer.

    Best regards
    Carsten

    #1052783

    Hi,

    Add this to quick css:

    .social_bookmarks {
    font-size:30px!important;
    }

    Best regards,
    Jordan Shannon

    #1052854

    Hi Jordan,

    thx for your answer! It works, nice!

    But – I also wrote that I want to change the space between the icons.
    And by the way – how can I change the colour of the round back-
    ground-highlights of the icons? That would be nice, too. :-)

    Short note: if you change the font-size, the highlight-size doesn’t
    change! So it would be good, to have also an css-snippet
    for that. :-)

    Best regards
    Carsten

    #1053132

    Hi Carsten,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    
    #top .social_bookmarks li {
      margin-left: 20px;
    }
    
    #top #wrap_all .av-social-link-twitter:hover a {
        color: #fff;
        background-color: red;
    }
    #top #wrap_all .av-social-link-facebook:hover a {
        color: #fff;
        background-color: #37589b;
    }
    #top #wrap_all .av-social-link-xing:hover a {
        color: #fff;
        background-color: #006567;
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #1053240

    Hi Victoria,

    thx for your answer! All works very well in the »Quick CSS«, thx! :)

    Only thing is left…please read this again:
    If you change the font-size, the highlight-size doesn’t
    change! So it would be good, to have also an css-
    snippet for that. ;)

    Best regards
    Carsten

    #1053671

    Hi Carsten,

    If you change font-size you need to change the width and the height of the li element:

    
    #top .social_bookmarks li a {
        width: 50px;
        line-height: 50px;
    }
    #top .social_bookmarks li {
      width: 50px;
      height: 50px;
    }
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #1053946

    Hi Victoria,

    thx for your answer and the code-snippets…everything works fine…great!
    That was exactly what I have looking for. :-)

    Please don’t close the thread right now, maybe there is a question left. ;-)

    Best regards
    Carsten

    #1054206

    Hi Carsten,

    Glad we got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

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

You must be logged in to reply to this topic.