Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • December 16, 2020 at 4:11 am #1267639
    samanthashea

    I used this code to add these bookmarks to my homepage:
    <ul class="noLightbox social_bookmarks icon_count_2"><li class="social_bookmarks_twitter av-social-link-twitter social_icon_1"><a target="_blank" href="http://twitter.com" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Twitter"><span class="avia_hidden_link_text">Twitter</span></a></li><li class="social_bookmarks_facebook av-social-link-facebook social_icon_2"><a target="_blank" href="http://facebook.com" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Facebook"><span class="avia_hidden_link_text">Facebook</span></a></li></ul>

    Then I added this to the CSS: .widget .social_bookmarks li { clear: none !important; }

    However, as you can see it is on the left and small. I want it to look exactly like it does on this enfold site: https://www.goingthewholehogg.com/

    Here is what it looks like on mine:screen shot of icons on my site

    December 16, 2020 at 5:44 am #1267678
    Nikko

    Hey samanthashea,

    Please add this CSS code in Quick CSS, located in Enfold > General Styling:

    #top .avia-builder-widget-area .custom-html-widget .social_bookmarks {
    text-align: center;
}

#top .avia-builder-widget-area .custom-html-widget .social_bookmarks li {
    float: none;
    display: inline-block;
    border: none;
    margin: 0 10px;
}

    Best regards,
    Nikko

    December 16, 2020 at 8:47 pm #1267938
    samanthashea

    Thank you this worked for centering.

    Now Can you please help me increase the icon size and make it half way in between “Follow Me” and “Countries”

    screen shot provided of what it looks like now.

    Thank you!

    December 17, 2020 at 5:53 am #1268012
    Nikko

    Hi samanthashea,

    Please replace the code I gave:

    #top .avia-builder-widget-area .custom-html-widget .social_bookmarks {
    text-align: center;
}

#top .avia-builder-widget-area .custom-html-widget .social_bookmarks li {
    float: none;
    display: inline-block;
    border: none;
    margin: 0 10px;
}

    to:

    #top .avia-builder-widget-area .custom-html-widget .social_bookmarks {
    text-align: center;
    position: relative;
    top: 30px;
}

#top .avia-builder-widget-area .custom-html-widget .social_bookmarks li {
    float: none;
    display: inline-block;
    border: none;
    margin: 0 10px;
    font-size: 30px;
}

    Hope it helps.

    Best regards,
    Nikko

    December 17, 2020 at 9:05 pm #1268194
    samanthashea

    Thank you everything worked perfectly. Sorry I should have asked this before but how can I change the color of this to #798eb3 ? I tried adding “color” beneath what you gave me but nothing happened. After this is fixed we can close this topic.

    December 17, 2020 at 10:40 pm #1268236
    samanthashea

    Also, I tried adding the Pinterest icon by just copying this code. Unfortunately it just added a second Instagram icon. Why is that? This is the full code. All show up correctly except Pinterest:

    <ul class="noLightbox social_bookmarks icon_count_2"><li class="social_bookmarks_twitter av-social-link-twitter social_icon_1"><a target="_blank" href="http://twitter.com" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Twitter"><span class="avia_hidden_link_text">Twitter</span></a></li><li class="social_bookmarks_facebook av-social-link-facebook social_icon_2"><a target="_blank" href="http://facebook.com" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Facebook"><span class="avia_hidden_link_text">Facebook</span></a></li>
<li class="social_bookmarks_instagram av-social-link-instagram social_icon_2"><a target="_blank" href="http://instagram.com" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Instagram"><span class="avia_hidden_link_text">Instagram</span></a></li>
<li class="social_bookmarks_pinterest av-social-link-pinterest social_icon_2"><a target="_blank" href="http://pinterest.com" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Pinterest"><span class="avia_hidden_link_text">Pinterest</span></a></li>
</ul>
    December 19, 2020 at 4:29 am #1268568
    samanthashea

    Can someone please help me with this

    December 19, 2020 at 11:17 am #1268601
    Nikko

    Hi samanthashea,

    Can you try with this code instead:

    <ul class="noLightbox social_bookmarks icon_count_2">
<li class="social_bookmarks_twitter av-social-link-twitter social_icon_1"><a target="_blank" href="http://twitter.com" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Twitter"><span class="avia_hidden_link_text">Twitter</span></a></li>
<li class="social_bookmarks_facebook av-social-link-facebook social_icon_2"><a target="_blank" href="http://facebook.com" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Facebook"><span class="avia_hidden_link_text">Facebook</span></a></li>
<li class="social_bookmarks_instagram av-social-link-instagram social_icon_2"><a target="_blank" href="http://instagram.com" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Instagram"><span class="avia_hidden_link_text">Instagram</span></a></li>
<li class="social_bookmarks_pinterest av-social-link-pinterest social_icon_2"><a target="_blank" href="http://pinterest.com" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello" title="Pinterest"><span class="avia_hidden_link_text">Pinterest</span></a></li>
</ul>

    Best regards,
    Nikko

    December 20, 2020 at 3:23 am #1268705
    samanthashea

    Great thanks, this worked :)

    December 20, 2020 at 7:07 am #1268722
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘How can I center-align this social bookmarks widget?’ is closed to new replies.