Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 9, 2019 at 9:12 pm #1052088
    designbasis

    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

    January 9, 2019 at 9:19 pm #1052092
    Jordan Shannon

    Hey Carsten,

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

    Best regards,
    Jordan Shannon

    January 9, 2019 at 10:44 pm #1052117
    designbasis

    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

    January 11, 2019 at 4:32 pm #1052783
    Jordan Shannon

    Hi,

    Add this to quick css:

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

    Best regards,
    Jordan Shannon

    January 11, 2019 at 7:05 pm #1052854
    designbasis

    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

    January 12, 2019 at 3:35 pm #1053132
    Victoria

    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

    January 12, 2019 at 10:55 pm #1053240
    designbasis

    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

    January 14, 2019 at 1:41 pm #1053671
    Victoria

    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

    January 15, 2019 at 4:44 am #1053946
    designbasis

    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

    January 15, 2019 at 5:53 pm #1054206
    Victoria

    Hi Carsten,

    Glad we got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

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