Customize Button CSS in Thrive Architect

  • Resolved rkuwahara

    (@rkuwahara)


    7 years, 8 months ago

    Hi,

    Saw the previous help you gave girlcrewhq for a similar issue (https://wordpress.org/support/topic/use-shortcode-with-a-different-button/)

    We’re also using Thrive Architect and on the last button on the landing page we want to be able to use Direct Stripe.

    So we tried to go the route of using a shortcode, then applying CSS to it, but you can see it rendered with a left justification and the default button style inside the CSS.

    I left the way it should look on top for comparison. I could be creating the CSS wrong, but basically created a class for MyButton, and applied it so that it would edit the shortcode.

    Any help would be appreciated.

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

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

    (@nahuelmahe)

    7 years, 8 months ago

    Hello @rkuwahara,

    Thank you for using Direct Stripe.

    The styles you need require changing the class applied to the outer box, the one you called .MyButton, change it to .thrv-button, ( note that I’m talking about the outer box, the button is still given the css ID MyButton in this example ). Then I copied the styles from the button generated to our button ID and box as this :

    .direct-stripe {
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 8px;
  overflow: hidden;
  border-bottom: 3px solid rgb(215, 99, 30);
  box-shadow: rgba(198, 92, 30, 0.3) 0px 8px 30px 0px;
  font-weight: bold;
  background-image: none !important;
  padding: 24px 24px 20px !important;
  background-color: rgb(242, 111, 33);
}
#MyButton {
  font-family: Hind;
  font-weight: 300;
  font-size: 22px;
  line-height: 1em;
  color: #fff;
  background-color: transparent;
  border: none;
  padding: 0;
}

    You can see the result here https://screenshots.firefox.com/BjG9hG7UT8hTHHkj/www.higheredugrowth.com
    You will need to also apply hover styles.

    Best wishes,

    Thread Starter rkuwahara

    (@rkuwahara)

    7 years, 8 months ago

    Thanks so much for the quick reply. This worked.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Customize Button CSS in Thrive Architect’ is closed to new replies.