Make adjustments to layout of fundraising plugin

I want to customize the look of my plugin. Currently it looks like this

I would like it to look like this (jpg mockup)

I am strong at editing css and html, but no so good with php.

I want to remove certain elements like the date range for the fundraising, and move other elements around. Some items I want to adjust so they appear on the same line, others I want to reorder.

Is this something you can help me with?

  • Patrick


    Sure thing! Just needs a bit of CSS lovin'

    I see you've tried floating the .wdf_reward_item element to the left. You actually need to get a bit more specific and float the elements within it to get them all on the same line. Then a bit of fiddling with margins to get stuff looking pretty.

    Try this for starters, and adjust to suit:

    .wdf_reward_choice { float:left; }
    .wdf_reward_choice input { float:left; margin-right:10px; }
    .wdf_reward_choice span { float:left; margin-top:4px; }
    .wdf_reward_description { float:left; margin:4px 15px 0 10px; }
  • geomaniac11

    Thanks Patrick,
    Now that's looking better.

    So now, if you could help me with the arrangement of a few items, I'd be most appreciative.

    I would like to move the div wdf_donate_button ( choose the amount, $, input field, donate button) below the rewards items.

    I expect this means adjusting the php file.

    I followed the instructions in the fundraising-templates.txt file and did not have success.

    I did get the wp-config to point to my custom template file, but I'm not entirely sure what that custom template file should contain? The file is titled fundraiser_June04.php. I tried using the exact content from the fundraiser.php file but that caused errors. I left my fundraiser_June04.php empty and that caused errors as well. My page showed the shortcde exactly s it appears in an editor ( [fundraiser_panel id="157" style="wdf-custom" show_title="no" show_content="no"] )


  • Patrick

    Hi again @geomaniac11

    Terribly sorry about the response delay. We're busy as beavers at the moment with some major changes, and some things have gotten a bit backed up.

    I think the instructions in the text file included in Fundraising need a bit of editing love, as they seem to have confused what is really a rather simple thing.

    To create a custom fundraising template, the simplest way to do it is follows:

    1. Make a copy of your theme's single.php and rename it wdf_funder.php. That will ensure that the post loop will correctly display your fundraiser content in your theme.

    2. Then add the functions you need from fundraising/lib/template-functions.php inside the loop of your new template. For example, to get the entire fundraiser panel above the post content in the Twenty-Twelve theme, you would add this
    <?php wdf_fundraiser_page(); ?>
    ...just after this
    <?php while ( have_posts() ) : the_post(); ?>

    3. Save and upload your new template to the root of your theme.

    You should now see the fundraiser panel on the single fundraiser pages with all the content you have added in the post editor. You will need to style the display with some custom CSS because the new template will likely not pick up on existing styles.

    Following this method, all you really need to do is pick and choose which functions you want to copy to your new template from template-functions.php. You can then order and style them however you like.

    Try a few different functions to see exactly what they output. Have fun experimenting :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.