Fundraiser Pledge Checkout customization

Hello there,

Thank you again for the last support issue. You guys rock!

I would like to know how I can customize the "manual" checkout page.

When I choose the project, enter the amount, click on Manual... Submit.

I get the final pledge confirmation page with the following info:

Your pledge of ?444 is almost complete.
Please fill out all details
First Name:
Last Name:
E-mail:

[Complete Pledge] button

Here are my questions:

1) I would like to modify the content on that page to add more instructions on how to do a manual ATM transaction. Is it possible?

2) I cannot fill any values in the first name, last name, email... There are no text area boxes, I can only click "Complete Pledge" button

3) The "Complete Pledge" button is not aligned properly, I tried changing the "position: absolute" to "position:initial" which fixed the issue using Chrome preview but where can I add that line exactly to the change are in effect? I used "Global Theme CSS" but doesn't work.

.upfront-output-region-container .upfront-output-module .default.upfront-this_post .post_content input[type="submit"] {
position: initial;
etc....
}

Thank you again for your quick and efficient help as always support!

Regards

    James Morris

    Hello Stephane,

    I hope you are well today.

    1) I would like to modify the content on that page to add more instructions on how to do a manual ATM transaction. Is it possible?

    Unfortunately, other than adding the content to the text description of the fundraiser, there's no way to do this.

    2) I cannot fill any values in the first name, last name, email... There are no text area boxes, I can only click "Complete Pledge" button

    The text boxes exist; however, there's no CSS styles associated with them. See screenshot: https://goo.gl/erxi40

    The following CSS will make these fields more visible:

    .wdf_payment_form_basic_info input {
        border: 1px solid silver;
        padding: .25em;
        border-radius: 5px;
    }

    3) The "Complete Pledge" button is not aligned properly, I tried changing the "position: absolute" to "position:initial" which fixed the issue using Chrome preview but where can I add that line exactly to the change are in effect? I used "Global Theme CSS" but doesn't work.

    The issue here is the position:absolute; value in your CSS. See screenshot: https://goo.gl/vncYK1

    When I disable this style, the button falls into proper alignment. See screenshot: https://goo.gl/AxBI02

    I hope this clarifies a bit. Let us know if you have any further questions. We'll be happy to help!

    Best regards,

    James Morris

    Stephane

    Thanks James for quick reply.

    Issue with the #2 is fixed. Thank you!

    For #1, where can I modify the actual text?
    For #3, as I mentioned, I changed the value in the Global Theme CSS (position: initial) will work in Chrome Preview (same as disabling it) but the change doesn't update on the front end. To disable it as you mentioned, is it in the Global Theme CSS? Also, what is the code to disable it?

    Thanks again!

    ".upfront-output-region-container .upfront-output-module .default.upfront-this_post .post_content input[type="submit"] {
    position: initial;
    top: initial;
    left: 242px;
    padding: 4px 8px;
    border-left: 1px solid #dddddd;
    background: #01bc9d;
    color: #ffffff;
    line-height: 28px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s ease-in;
    -o-transition: background 0.3s ease-in;
    -ms-transition: background 0.3s ease-in;
    -moz-transition: background 0.3s ease-in;
    -webkit-transition: background 0.3s ease-in;
    }"