How to modify the Shortcode

  • Resolved best4eid

    (@best4eid)


    6 years, 2 months ago

    I have a problem I just add the plug and it is amazing but I couldn’t customize it as I am using Vbakery
    I tried to edited CSS and trying everything but it is not working !!!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Nicolas Figueira

    (@nahuelmahe)

    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.

    Thread Starter best4eid

    (@best4eid)

    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

    Plugin Author Nicolas Figueira

    (@nahuelmahe)

    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

    Thread Starter best4eid

    (@best4eid)

    it worded thank you soooo much

    but i need to take off the arrows inside the input how ?

    Thread Starter best4eid

    (@best4eid)

    and how to add word next to the input or inside

    Plugin Author Nicolas Figueira

    (@nahuelmahe)

    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,

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to modify the Shortcode’ is closed to new replies.