Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • December 6, 2024 at 9:06 pm #1473126
    dreyerjm

    Hello, I’m trying to add some social icons to my footer which I built with the page builder. I ended up using the icon flipbox grid. Is there a better way for me to do this?

    If the icon flipbox grid is the best way is there a way to
    1. remove the hover effect?
    2. left justify the icons?
    3. make the icons closer..

    December 7, 2024 at 10:42 am #1473137
    Rikard

    Hey dreyerjm,

    You might want to consider using the Social Buttons or Icon List elements instead?

    Best regards,
    Rikard

    December 9, 2024 at 6:49 pm #1473274
    dreyerjm

    Good Suggestion, I went ahead and used social button element instead. How do I customized that a bit more? I would like these functions to stay on my blog share buttons but for the footer be adjusted.
    1. Remove the text Share This Entry
    2. Remove the Hover Tabs “link to facebook” etc
    3. Make the icons smaller – one one line?
    4. Change the background color of the icons and icon color?

    December 10, 2024 at 1:34 pm #1473347
    Ismael

    Hi,

    Thank you for the update.

    1. Remove the text Share This Entry
    2. Remove the Hover Tabs “link to facebook” etc
    3. Make the icons smaller – one one line?

    Please add the following css code to adjust the social icons based on your requests above:

    #top #footer-page .av-social-sharing-box:not(.av-social-sharing-box-default) .av-share-box ul li .avia-related-tooltip.avia-tt {
    display: none !important;
}

#top #footer-page .av-social-sharing-box:not(.av-social-sharing-box-default) .av-share-box ul {
    display: flex;
}

#top #footer-page .av-social-sharing-box.av-social-sharing-box-same-width .av-share-box ul li a {
    width: 30px;
    height: 30px;
}

#top #footer-page .av-share-box ul li a {
    display: block;
    padding: 2px 0;
    text-decoration: none;
    color: inherit;
    font-size: 11px;
    transition: all 0.2s ease-in-out;
}

    4. Change the background color of the icons and icon color?

    Then use this css code to adjust the background and color of the social icons — note the selector “.av-social-link-facebook” when modifying other social icons.

    #top #footer-page .av-social-sharing-box.av-social-sharing-box-color-bg .av-social-link-facebook a {
    color: #fff;
    background-color: #37589b;
}

    Best regards,
    Ismael

    December 10, 2024 at 6:41 pm #1473374
    dreyerjm

    Thank you for this code. I went ahead and added it look good. What code would I adjust to make the icons more centered? I also noticed that the header text is “Share this entry” is still there. It is the same color as the background though so that is why you cannot see it. How do I remove that text? I included a screenshot if that text highlighted so you can see it.

    December 11, 2024 at 7:59 am #1473389
    Ismael

    Hi,

    To remove the heading, please include this css code:

    #footer-page .av-share-link-description.av-no-toc {
    display: none;
}

    And to adjust the alignment, try adjust the width of the social icons.

    #top #footer-page .av-social-sharing-box.av-social-sharing-box-same-width .av-share-box ul li a {
    width: 32px;
    height: 32px;
}

    Best regards,
    Ismael

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