Support » Plugin: Smash Balloon Social Photo Feed » Follow us Button Styling

  • Resolved melanie71

    (@melanie71)


    Hello! Are you able to help with Custom CSS to style the Follow us button? I have had a crack at it, but not quite working … I’m just trying to style the button the same as other buttons on my site. Not sure what I’m doing wrong 🙂

    Thank you.

    Regards
    Melanie

    • This topic was modified 4 months, 2 weeks ago by melanie71.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Smash Balloon Joel

    (@joelsmashballoon)

    Hey @melanie71,

    Thank you for reaching out to us for assistance. While we usually don’t offer personal customization snippets for the free plugin, this is quite straightforward as we can simply force the same rules as your other buttons to apply to our button as well!

    Keep in mind that if you make any changes to the other styles it will not automatically apply to this customization. Please go to the Customize options for the theme and in the ‘Additional CSS’ menu add the following:

    
    /* Custom Instagram Feed Follow button colors */
    .sbi_follow_btn a{
        font-size: 14px !important;
        font-weight: bold !important;
        text-transform: uppercase !important;
        letter-spacing: 0.6px !important;
        color: var( --e-global-color-aa0f449 ) !important;
        background-color: var( --e-global-color-6575108 ) !important;
        border-style: solid !important;
        border-width: 1px 1px 1px 1px !important;
        border-color: var( --e-global-color-aa0f449 ) !important;
        border-radius: 0px 0px 0px 0px !important;
        padding: 15px 30px 15px 30px !important;
    }
    .sbi_follow_btn a:hover{
      color: var( --e-global-color-aa0f449 )!important;
        background-color: var( --e-global-color-primary )!important;
        border-style: solid !important;
        border-color: var( --e-global-color-primary )!important;
        transform: translateY(-8px) !important;
        box-shadow: none !important;
    }

    Keep in mind that using “!important” is not best practice and should be avoided, but in this case, it’s a quick way to get it looking the way we want here. If you have any questions let me know.

    Best regards.

    Thread Starter melanie71

    (@melanie71)

    Thank you so much Joel!! That is excellent support and I really appreciate it.

    A Smash Balloon Elementor widget would be awesome, and then we could style elements much easier 😉

    Kind regards
    Melanie

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.