I now have Fundraising setup and working using the default

Hello.

I now have Fundraising setup and working using the default Dark style but I would like to change the look slightly using custom css. Could anyone tell me how to do the following:

1. The colour of the text in the "Make this Donation" selection box is very light and I would like to make it black.

2. I would like to change the colour of the "Back this Project" button.

3. I would also like to change the overall background colour of the pledge box

4. If possible, I would like to alter the size and colours of the progress bar making it slightly fatter with the background being blue and the bar being orange.

Thanks for your help! Jon.

  • Patrick

    Hi there @Jon

    Welcome to WPMU DEV, glad to have you aboard!

    Those elements are inheriting styles from your theme. If you want to change the color of the "Make this Donation" selectbox only, add the following and change the color value to suit your site:
    .wdf_recurring_select, .wdf_recurring_select:focus {color:#000000;}

    But if you want all similar elements on your site to use the same color, add this instead (these are the same elements as declared on lines 47 & 83 of your theme's style-sheet):
    textarea, input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="password"], select, .light-div textarea, .light-div input[type="text"], .light-div input[type="email"], .light-div input[type="url"], .light-div input[type="number"], .light-div input[type="password"], .light-div select, textarea:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, select:focus {color:#000000;}

    To change the "Back this Project" button color, you first need to decide if you want a solid color or a gradient color as in the default. If you want a solid color, with a color change on hover, add the following and adjust to suit:

    .wdf-dark .wdf_send_donation, .wdf-dark .wdf_button {background-color:#555555; background-image:none; color:#ffffff;}
    .wdf-dark .wdf_send_donation:hover, .wdf-dark .wdf_button:hover {background-color:#000000; background-image:none; color:#cccccc;}

    But if you want the button to still have a gradient effect, you'll need to declare the colors you want use for the gradients, and include style declarations with appropriate prefixes for all browsers, like so:

    .wdf-dark .wdf_send_donation, .wdf-dark .wdf_button {background-color: #cccccc;
    color:#ffffff;
    background-image: -o-linear-gradient(90deg , #cccccc, #000000 100%);
    background-image: -moz-linear-gradient(90deg , #cccccc, #000000 100%);
    background-image: -webkit-linear-gradient(90deg , #cccccc, #000000 100%);
    background-image: -ms-linear-gradient(90deg , #cccccc, #000000 100%);
    background-image: linear-gradient(90deg , #cccccc, #000000 100%);}

    Here again, if you want a different color gradient on hover, you'll need to declare that too, like so:

    .wdf-dark .wdf_send_donation:hover, .wdf-dark .wdf_button:hover {background-color: #ffffff;
    color:#000000;
    background-image: -o-linear-gradient(90deg , #ffffff, #555555 100%);
    background-image: -moz-linear-gradient(90deg , #ffffff, #555555 100%);
    background-image: -webkit-linear-gradient(90deg , #ffffff, #555555 100%);
    background-image: -ms-linear-gradient(90deg , #ffffff, #555555 100%);
    background-image: linear-gradient(90deg , #ffffff, #555555 100%);}

    Changing the background color of the pledge box itself is much like changing the color of the button as above. If you want a solid color, this will fo it:
    .wdf-dark .wdf_rewards {background-color: #cccccc; background-image:none; color:#000000;}

    But if you want a gradient, add this and adjust the colors here too:

    .wdf-dark .wdf_rewards {background-color: #123456;
    color:#ffffff;
    background-image: -o-linear-gradient(90deg , #123456, #555555 100%);
    background-image: -moz-linear-gradient(90deg , #123456, #555555 100%);
    background-image: -webkit-linear-gradient(90deg , #123456, #555555 100%);
    background-image: -ms-linear-gradient(90deg , #123456, #555555 100%);
    background-image: linear-gradient(90deg , #123456, #555555 100%);}

    If you want to learn more about gradient colors and how fabulously convoluted stuff can get, check out this article at CSS-Tricks:
    http://css-tricks.com/css3-gradients/

    And here's a very handy tool that enables you to generate color gradients any way you want 'em:
    http://www.cssmatic.com/gradient-generator

  • Jon

    Hi @Patrick

    That's great, thank you. All works.

    I tried changing the colour of the text in the donation amount to black also using:
    .wdf_pledge_amount, .wdf_pledge_amount:focus {color:#000000;}
    but it didn't work. Have I got something wrong?? (I'm no expert)

    How do I change the colour of the text in the main box from black to white?

    Can I change the size and colour of the pledge bar?

    Thanks very much. Jon.

  • Patrick

    Hi again @Jon

    Ah, for the wdf_pledge_amount box, that's your theme CSS that is actually more specific than what you added. Your theme is declaring this for input elements:
    input[type="text"]

    The type being declared is trumping the simple declaration of the element class in
    .wdf_pledge_amount

    So we need to make your addition more specific than the theme by declaring the element name as well, like so:
    input.wdf_pledge_amount, input.wdf_pledge_amount:focus {color:#000000;}

    Here's some more bedtime reading for ya on CSS specificity :slight_smile:
    http://css-tricks.com/specifics-on-css-specificity/
    http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

    To change the color of the text in the pledge box, this should do the trick (there are a few selectors that need to be targeted in there):
    .wdf_custom_donation_label, .wdf_custom_donation_label, .wdf-dark .wdf_rewards {color:#ffffff;}

    And whoops, I missed the part about the progress bar. Sorry about that. This will make it the way you have described above:

    div.ui-progressbar {background:#58beec; padding:10px;}
    div.ui-progressbar .ui-progressbar-value {background:#ee8424; margin:-11px; padding:10px;}

    To make it fatter or slimmer still, adjust the padding in both declarations above. Then adjust the negative margin in the second line to get the value bar to line up nicely inside.

  • Jon

    @Patrick

    It could be my fault. I changed the style from Dark to Fresh (the default button colour for fresh is green) but I think I have changed the CSS correctly. Here is what I have in my Custom CSS box:

    .wdf_recurring_select, .wdf_recurring_select:focus {color:#000000;}
    input.wdf_pledge_amount, input.wdf_pledge_amount:focus {color:#000000;}
    .wdf_custom_donation_label, .wdf_custom_donation_label {color:#000000;}
    .wdf-fresh .wdf_send_donation, .wdf-fresh .wdf_button {background-color:#03476a; background-image:none; color:#ffffff;}
    .wdf-fresh .wdf_send_donation:hover, .wdf-fresh .wdf_button:hover {background-color:#ee8424; background-image:none; color:#ffffff;}
    div.ui-progressbar {background:#03476a; padding:30px;}
    div.ui-progressbar .ui-progressbar-value {background:#ee8424; margin:-11px; padding:30px;}

    The fundraising page looks perfect it's just the widget.

    Is there any code for changing the border of the 'send donation' button. It's currently green but I would like it to be black.

    Thanks for all your help. I'm really happy with the plugin. Jon.

  • Predrag Dubajic

    Hi @Jon,

    My apologies for the long overdue on this thread.

    Is there any code for changing the border of the 'send donation' button. It's currently green but I would like it to be black.

    Are you referring to Back this project green button in your sidebar?
    You can change it with this CSS code:

    #sidebar .wdf-fresh .wdf_send_donation {
      border: 1px solid #000000;
    }

    Let us know if this is what you wanted to change or if you need some more help.

    Best regards,
    Predrag

  • Predrag Dubajic

    Hey @Jon,

    The CSS I provided should work on sidebar but as I did test it only from browser directly it is possible that some other CSS is rewriting those attributes if you want me to take a closer look at this please provide support access and will testing by adding it directly on in your CSS plugin.

    Also it would be helpful if you could provide some screenshots of the parts you want to change so I can better understand the issue.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.