That is possible with some custom CSS code:
[id*=”give-form”] {
text-align: center;
}
[id*=”give-form”] .give-total-wrap {
display: inline-block;
float: left;
clear: none;
margin: 16px 0;
position: relative;
}
[id*=”give-form”] ul#give-donation-level-button-wrap {
float: right;
max-width: 65%;
clear: none;
border-left: 1px solid #DDD;
padding-left: 20px;
position: relative;
}
[id*=”give-form”] ul#give-donation-level-button-wrap:before {
content: “or”;
font-family: ‘give-icomoon’;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #000;
font-size: 20px;
background: #FFF;
padding: 3px 0;
position: absolute;
top: 22px;
left: -10px;
}
[id*=”give-form”] ul#give-donation-level-button-wrap li button {
width: 175px;
margin: 0;
}
[id*=”give-form”] .give-btn-modal {
display: block;
float: none;
clear: both;
width: 100%;
}
[id*=give-form] .give-total-wrap {
display:inline-block !important;
float:none !important;
}
[id*=give-form] .give-donation-amount{
display:inline-block;
}
[id*=give-form] .give-total-wrap:before{
content:”Give a Custom Amount”;
display:block;
font-size:13px;
margin:0 auto 1em auto
}
[id*=give-form] .give-btn-level-custom {
display:none;
}
[id*=give-form] .give-donation-amount #give-amount {
width:100px;
min-width:0 !important;
}
Note that for that code to function correctly, you’ll need to be using a Multilevel form with the option for a custom amount and the display set to Modal.
If you want it to display like this only on a certain form, each spot where you see [id*=give-form] can be changed to include the form id like this [id*=give-form-997] (if you only want to target form 997)
Also please keep in mind that every theme has it’s own custom CSS which might interfere (sometimes very badly!) with these styles. We cannot provide support for this kind of CSS customization, but provide this as a starting point for you to do what you like with it.
If you need assistance implementing custom CSS on your WordPress website, we have this guide for you:
https://givewp.com/documentation/resources/handling-custom-css-in-wordpress/
Thanks!
