Support » Plugin: GiveWP - Donation Plugin and Fundraising Platform » Center the fields and translate Donation Goals

  • Resolved studioporpora

    (@studioporpora)


    hi, I can’t find a way to center the fields to get something like the link screenshot, which css should I use
    also, where can I translate the text of the Donation Goals

    thanks

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Rick Alday

    (@mrdaro)

    Hi @studioporpora,

    Glad you reached out here. There are many ways to center elements with CSS.
    You can use this code as a basis:

    .give-total-wrap, form[id*="give-form"] .give-donation-amount { display: flex; justify-content: center; }

    You can use Loco Translate to translate the text in the form.

    studioporpora

    (@studioporpora)

    thanks Mrdaro,
    with the css you provided me with center only amount for all gateways
    I would like to hit all the fields

    url link, look at the bottom of the page
    https://www.viverevegan.org/landing-page/

    thanks

    Plugin Support Ben Meredith

    (@benmeredithgmailcom)

    Hi @studioporpora,

    We’re happy to give pointers regarding CSS, but we’re not able to really guarantee anything in terms of functionality for this type of custom styling work.

    Here’s a code block that worked for me to center those items:

    .give-total-wrap, ul#give-donation-level-button-wrap, form[id*="give-form"] .give-donation-amount { 
        display: flex; justify-content: center;
      }
    .give-btn-modal{
      display:block;
      width: 96%;
    }

    The button was the hard part to make centered, so instead I made it essentially full-width.

    Have a great day!

    studioporpora

    (@studioporpora)

    great!! now the elements are centered.
    Thank you very much
    it’s true, the button remains full-width, but I think I can be satisfied.
    thanks again for the help
    Have a great day you too

    studioporpora

    (@studioporpora)

    I have found this solution
    I added the short code inside a div
    <div style=”width: 290px; margin: auto; text-align: center;”>[give_form id=”8394″ show_title=”false” show_goal=”false” show_content=”above” display_style=”modal” continue_button_title=”FAI UNA DONAZIONE”]</div>

    and added this css
    .give-btn-modal{
    display:block;
    width: 85%;
    }

    the result satisfies me 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.