Hello @best4eid
Thank you for using Direct Stripe.
I understand that you want to style a Direct Stripe button but I’m not sure, could you explain what you want to do and is not working ? ( Sharing a url if possible )
The common CSS classes you can use are .direct-stripe for the outer box and .direct-stripe-button for the button.
Hello @nahuelmahe
Thank you for replying
the URL is qurany.io
and you can see in the below link where is the problem
https://snag.gy/mUEIPD.jpg
i want the bottom to be under the input and wide as the column
i used the code :
<html>
<body>
<div style=”background-color:transparent;color:white;padding:20px;text-align:center;line-height: 3em;width: 100%;display: inline-block;border-radius: 10px 10px 10px 10px; padding: -4% -25% -4% -25%;”>
<p>[direct-stripe value=”ds-1547315839211″]</p>
</div>
</body>
</html>
but still not fixing the problem I need it to look professional with the rest of the designs please help
Hello @best4eid,
The inline style you are setting are applied to the outer element where you add a direct stripe button.
To give you an idea how to style the button, insert the css code at Appearance -> Customize -> Additional CSS
.direct-stripe #donation-value { //This targets the donation input field
display: block;
margin: 0 auto;
}
.direct-stripe button { //This targets the button element inside direct stripe
display: block;
margin: 10px auto 0;
width: 100%;
}
You can check more at https://www.w3schools.com/css/
I hope this will help,
Best wishes
it worded thank you soooo much
but i need to take off the arrows inside the input how ?
and how to add word next to the input or inside
Hello @best4eid,
I’m glad that’s what you wanted.
I can’t help with a more precise integration to your design, please contract a front end dev to do so.
Also know that the html and elements is filterable with hooks, that allows devs to customize the button. You can find the hooks available at https://github.com/New0/direct-stripe/wiki/Actions-and-filter-hooks
Best wishes,
