Donate Button color

  • Resolved RGrissom

    (@rgrissom)


    8 years, 8 months ago

    How do you change the hover color and donate button color. You can’t see them in Chrome & Firefox, they are #fff and I’m not sure which CSS they are pulling from.

Viewing 7 replies - 1 through 7 (of 7 total)

  • Can you post a link to your site?

    Thread Starter RGrissom

    (@rgrissom)

    https://leslieduncan4kc.com/donate-today/

    Try this custom CSS, either using a plugin or your theme’s built-in custom CSS option:

    .give-form-wrap input[type="submit"] {
	background-color: #ef5350;
}

.give-form-wrap input[type="submit"]:hover {
	background-color: #f27573;
}
    Thread Starter RGrissom

    (@rgrissom)

    I tried both the theme Custom CSS and added the Simple Custom CSS plugin, neither worked. Emptied the Cache, tried another browser, but it’s not working.
    Here’s what I Added
    /*
    Give Form Button Customization
    */
    .give-form-wrap input[type=”submit”] {
    background-color: #ef5350;
    }

    .give-form-wrap input[type=”submit”]:hover {
    background-color: #f27573;
    }

    /*
    End Give Form Button Customization
    */

    Thread Starter RGrissom

    (@rgrissom)

    I just checked again and I see that the Donate Button is now red, but the donate amounts are not. They are give-gateway-radio-list, when I look at the code.

    I think this is the CSS that is loading for the donation amount buttons:
    <fieldset id=”give-payment-mode-select”>
    <div id=”give-payment-mode-wrap”>
    <legend class=”give-payment-mode-label”>Select Payment Method <span class=”give-loading-text”><span class=”give-loading-animation”></span> Loading…</span></legend>

    <ul id=”give-gateway-radio-list”>

    • <label for=”give-gateway-paypal-36″ class=”give-gateway-option” id=”give-gateway-option-paypal”><input type=”radio” name=”payment-mode” class=”give-gateway” id=”give-gateway-paypal-36″ value=”paypal”>PayPal</label>
    • <label for=”give-gateway-offline-36″ class=”give-gateway-option give-gateway-option-selected” id=”give-gateway-option-offline”><input type=”radio” name=”payment-mode” class=”give-gateway” id=”give-gateway-offline-36″ value=”offline” checked=’checked’>Offline Donation</label>

      • </div>
      </fieldset>

    You could try something like this, instead:

    .give-btn {
	background-color: #ef5350;
}

.give-btn:hover {
	background-color: #f27573;
}

    As you appear to be using a caching/minifying plugin, you’ll likely have to temporarily disable that plugin and flush the cache before you’ll see any changes.

    Thread Starter RGrissom

    (@rgrissom)

    Awesome! Thank you very much. I deactivated the plugin I just installed and continued to use the CSS Stylesheet Editor and it worked great.
    <beer>
    <head>
    </head>
    <body>
    *
    *
    *
    *
    </body>
    </beer>

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Donate Button color’ is closed to new replies.