Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • November 11, 2016 at 12:27 am #710937
    amatton

    Hello! What is the easiest way to make it so that the social media icons are shown with their unique colors without requiring the hover? So instead of a user having to hover over the Facebook icon to see it switch from the black ‘f’ to white with a blue background, this appearance would be shown by default. I didn’t see a setting that would do this by default.
    Any code snippets to help me out would be appreciated!
    Thanks!

    November 12, 2016 at 7:55 am #711399
    Nikko

    Hey amatton,

    You can use this code snippets and add it to Quick CSS (located in Enfold > General Styling):

    Facebook Icon (2nd block of code is for hover):

    .responsive #top #header_meta .social_bookmarks li.av-social-link-facebook a {
    background: #000;
    color: #fff;
}

.responsive #top #header_meta .social_bookmarks li.av-social-link-facebook a:hover {
    background: #fff;
    color: #000;
}

    Twitter Icon (2nd block of code is for hover):

    .responsive #top #header_meta .social_bookmarks li.av-social-link-twitter a {
    background: #000;
    color: #fff;
}

.responsive #top #header_meta .social_bookmarks li.av-social-link-twitter a:hover {
    background: #fff;
    color: #000;
}

    Linkedin Icon (2nd block of code is for hover):

    .responsive #top #header_meta .social_bookmarks li.av-social-link-linkedin a {
    background: #000;
    color: #fff;
}

.responsive #top #header_meta .social_bookmarks li.av-social-link-linkedin a:hover {
    background: #fff;
    color: #000;
}

    Google Plus Icon (2nd block of code is for hover):

    .responsive #top #header_meta .social_bookmarks li.av-social-link-gplus a {
    background: #000;
    color: #fff;
}

.responsive #top #header_meta .social_bookmarks li.av-social-link-gplus a:hover {
    background: #fff;
    color: #000;
}

    Just adjust the colors as you see fit. Hope this helps :)

    Best regards,
    Nikko

    November 15, 2016 at 7:19 pm #712568
    amatton

    This worked perfectly — thank you!

    FYI, in case this helps anyone else:

    • Facebook: #37589B
    • Twitter: #46D4FE
    • LinkedIn: #419CCA
    • G+: #DE5A49
    November 16, 2016 at 5:54 am #712754
    Rikard

    Hi,

    Great, glad we could help and thanks for sharing the colours :-)

    Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

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