Advanced Custom Settings

  • Resolved bbwacker

    (@bbwacker)


    6 months ago

    Hi there,

    I’m currently using the Foobar plugin (version 2.1.36) on our WordPress site, to display a newsletter sign-up bar.

    The bar itself is showing correctly on the site ([foobar id="48098"]), but any Custom CSS added in the “Advanced Custom Settings → Custom CSS” box doesn’t seem to apply — even when using !important flags and the scoped selector #foobar_48098.

    Here’s what I’ve tried so far:

    • Added custom background and button colour styles in the Custom CSS section.
    • Confirmed the Foobar is visible and active on all pages.
    • Cleared cache (site, plugin, Cloudflare).
    • Verified that the correct bar ID is being targeted (#foobar_48098).

    Despite these steps, the Foobar continues to display the default colours.

    Could you please help confirm:

    1. Whether Custom CSS overrides are supported in Foobar Free v2.1.36,
    2. If there are any known conflicts or theme-specific overrides, and
    3. Whether there’s another method or hook I should use to apply styling (e.g., via functions.php or enqueueing CSS).

    I’d appreciate any guidance or examples of CSS selectors that reliably target button and background styles in this version.

    Thank you very much for your help!

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

Viewing 1 replies (of 1 total)
  • Plugin Support elviiso

    (@elviiso)

    5 months, 3 weeks ago

    Hi @bbwacker

    I can confirm that you can use CSS to customize your FooBar even further, and this includes those created using Foobar Free v2.1.36. To customize the background and button colour styles for your FooBar, you can use the CSS below which should work without any issues:

    .foobar-cta.fbr-layout-top .fbr-content {
    background-color: blue;
    color: #ce1313;
    }

    .foobar-cta.fbr-layout-top .fbr-button {
    background-color: orange;
    color: maroon;
    }

    You will simply need to replace the colors used with your preferred colors and then add it to the “Custom CSS” field of the FooBar you are trying to customize: https://prnt.sc/kOaFjZDbYSVd

    Alternatively, you can add it to your theme’s style.css file or on the CSS textfield of the “Customize” section.

    Thanks

Viewing 1 replies (of 1 total)

You must be logged in to reply to this topic.

Tags