Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 25, 2016 at 9:16 pm #638282
    DMONAHAN

    Hi – I am looking to have these social icons to show the colors that is currently shown when you hover it. Bascially I want to reverse it so you can see the colors. As well if can make the squares into round. I tried border-radius: 100px !important in the CSS and still doesn’t change.

    Here is what I have in the footer 1 widget:
    <ul class=”noLightbox social_bookmarks icon_count_2″><li class=”social_bookmarks_twitter av-social-link-twitter social_icon_1″><span class=”avia_hidden_link_text”>Twitter</span><li class=”social_bookmarks_linkedin av-social-link-linkedin social_icon_2″><span class=”avia_hidden_link_text”>Linkedin</span>

    CSS:
    #footer .social_bookmarks li {
    clear: none !important;
    border: 0 !important;
    border-radius: 100px !important;
    font-size: 16px;
    }

    May 26, 2016 at 5:48 pm #638853
    Andy

    Hey Devon,

    use this code:

    #footer .social_bookmarks li {
background-color: blue !important;
}

    Best regards,
    Andy

    May 26, 2016 at 8:44 pm #638948
    DMONAHAN

    Thanks, however is there a way to not have both of them showing the same blue? As well when you hover the social media icons, is there a way to remove the square box?

    May 27, 2016 at 5:10 pm #639398
    Andy

    Hi,

    for twitter use this:

    #top #wrap_all .av-social-link-twitter:hover a {
background-color: #46d4fe;
}

    and for linked in:

    #top #wrap_all .av-social-link-linkedin:hover a {
background-color: #46d4fe;
}

    Adjust colors as needed.

    Best regards,
    Andy

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