Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 21, 2024 at 7:51 pm #1437815
    blaisen

    I followed Guenni007 design for adding a social bookmarks widget to my site so that I could display the icons in the main content area https://kriesi.at/support/topic/social-bookmarks-widget-how-to/ This worked and with a little CSS formatting, I’m almost there. The one thing I can’t achieve is centering the widget items on the page. I’ve tried everything in the CSS and cannot find the right way to do it. Can you help? https://ibb.co/hByqwDr

    March 22, 2024 at 10:18 am #1437991
    Rikard

    Hey Blaise,

    We are getting blocked by your firewall, please disable it so that we can have a closer look.

    Sorry 83.233.188.233, your request cannot be processed.
    For security reasons, it was blocked and logged.

    NinjaFirewall

    If you believe this was an error please contact the
    webmaster and enclose the following incident ID:

    [ #8498090 ]

    Best regards,
    Rikard

    March 22, 2024 at 5:15 pm #1438024
    blaisen
    This reply has been marked as private.
    March 23, 2024 at 4:39 pm #1438056
    Rikard

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    #add_social_bookmarks-2 .social_bookmarks {
  width: auto;
  display: table;
  margin: 0 auto;
}

    Best regards,
    Rikard

    March 23, 2024 at 10:55 pm #1438095
    blaisen

    Rikard, Unfortunately this did not work.

    I used Guenni007’s javascript and CSS with few modifications. Perhaps something is in conflict? CSS for the icons:

    /* ———- Social Icons ———- */
    #top .socialbookmarks-widget .social_bookmarks {
    float: left;
    margin: 15px 0 0 ;
    position: relative;
    }

    #top .socialbookmarks-widget .social_bookmarks li {
    float: left;
    clear: right !important;
    }

    #top .socialbookmarks-widget .social_bookmarks {
    display: inline;
    }

    #top .socialbookmarks-widget .social_bookmarks li {
    border-right-width: 0;
    width: 50px;
    }

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

    #top .socialbookmarks-widget .social_bookmarks li a:before {
    font-size: 30px
    }

    /* social icons style */
    #top #wrap_all .social_bookmarks li a {
    width: 50px;
    line-height: 50px;
    margin-left: 50px;
    border-radius: 100px;
    }
    #top #wrap_all .social_bookmarks {
    height: 50px;
    margin-left: 50px;
    }
    #top #wrap_all .social_bookmarks li {
    width: 50px;
    font-size: 15px;
    margin-left: 50px;
    }
    #top #wrap_all .av-social-link-instagram a {
    color: #fff;
    background-color: #78e7e4;
    }
    #top #wrap_all .av-social-link-instagram:hover a,
    #top #wrap_all .av-social-link-instagram a:focus {
    color: #fff;
    background-color: #efc511;
    }
    #top #wrap_all .av-social-link-facebook a {
    color: #fff;
    background-color: #78e7e4;
    }
    #top #wrap_all .av-social-link-facebook:hover a,
    #top #wrap_all .av-social-link-facebook a:focus {
    color: #fff;
    background-color: #efc511;
    }
    #top #wrap_all .av-social-link-twitter a {
    color: #fff;
    background-color: #78e7e4;
    }
    #top #wrap_all .av-social-link-twitter:hover a,
    #top #wrap_all .av-social-link-twitter a:focus {
    color: #fff;
    background-color: #efc511;
    }
    #top #wrap_all .av-social-link-youtube a {
    color: #fff;
    background-color: #78e7e4;
    }
    #top #wrap_all .av-social-link-youtube:hover a,
    #top #wrap_all .av-social-link-youtube a:focus {
    color: #fff;
    background-color: #efc511;
    }
    #top #wrap_all .av-social-link-linkedin a {
    color: #fff;
    background-color: #78e7e4;
    }
    #top #wrap_all .av-social-link-linkedin:hover a,
    #top #wrap_all .av-social-link-linkedin a:focus {
    color: #fff;
    background-color: #efc511;
    }

    March 25, 2024 at 8:15 am #1438226
    Ismael

    Hi,

    Thank you for the update.

    Please add this code at the very bottom of the css modifications.

    #top #wrap_all #social .social_bookmarks {
    margin: 0;
    display: flex;
    float: none;
    justify-content: center;
    margin-left: -50px;
}

    Best regards,
    Ismael

    March 25, 2024 at 6:48 pm #1438296
    blaisen

    Thank you. That worked!

    March 25, 2024 at 11:18 pm #1438314
    Mike

    Hi,
    Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Social Icons Widget Alignment’ is closed to new replies.