Support

Home Forums Event Espresso Premium CSS for Checkout Buttons

CSS for Checkout Buttons

Posted: January 13, 2023 at 7:17 pm


mkreik

January 13, 2023 at 7:17 pm

I looked at this link that shows the CSS we can use to style all of the registration and checkout buttons. I tried it with the proceed to payment button and it doesn’t work. Is there anything else I can do?


Tony

  • Support Staff

January 16, 2023 at 5:42 am

Hi there,

Which CSS have you tried so far, the exact snippet from that page?

Try:


#spco-go-to-step-payment_options-submit {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   padding: 5px 10px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   text-decoration: none;
   vertical-align: middle;
   }
#spco-go-to-step-payment_options-submit:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
#spco-go-to-step-payment_options-submit:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }


mkreik

January 16, 2023 at 10:05 am

I coped that content and then removed lines for the pieces I didn’t want to change. So I used:

#spco-go-to-step-payment_options-submit {
border-top: 1px solid #405e9b;
background: #405e9b;
color: white;
font-size: 18px;
}
#spco-go-to-step-payment_options-submit:hover {
border-top-color: #405e9b;
background: #405e9b;
color: #ccc;
}
#spco-go-to-step-payment_options-submit:active {
border-top-color: #405e9b;
background: #405e9b;
}

None of those changes worked even when I added !Important


mkreik

January 16, 2023 at 11:03 am

I changed the color hex code so here is what is currently in our website CSS:

#spco-go-to-step-payment_options-btn {
border-top: 1px solid #588d61;
background: #588d61;
color: white;
font-size: 18px;
text-decoration: none;
vertical-align: middle;
}
#spco-go-to-step-payment_options-btn:hover {
border-top-color: #588d61;
background: #588d61;
color: #ccc;
}
#spco-go-to-step-payment_options-btn:active {
border-top-color: #588d61;
background: #588d61;
}


Tony

  • Support Staff

January 16, 2023 at 1:49 pm

Looks like there’s a typo in the docs, or the ID’s have changed.

The code in use on the site uses -btn at the end but the elements themselves use -submit, so the code on your site needs to be:

#spco-go-to-step-payment_options-submit {
border-top: 1px solid #588d61;
background: #588d61;
color: white;
font-size: 18px;
text-decoration: none;
vertical-align: middle;
}
#spco-go-to-step-payment_options-submit:hover {
border-top-color: #588d61;
background: #588d61;
color: #ccc;
}
#spco-go-to-step-payment_options-submit:active {
border-top-color: #588d61;
background: #588d61;
}


mkreik

January 16, 2023 at 2:13 pm

That worked! Since the support link I referenced above has -btn instead of -submit, for the process to payment button, should I assume I should trade out the -btn for -submit for the other CSS at that support link?


mkreik

January 16, 2023 at 2:39 pm

I used the following to adjust the proceed to finalize registration and the pay buttons where I also included adjustments to the borders and to have the buttons uppercase:

#spco-go-to-step-finalize_registration-submit{
border-top: 10px solid #588d61;
border-bottom: 10px solid #588d61;
background: #588d61;
color: white;
font-size: 18px;
text-transform: uppercase;
vertical-align: middle;
}
#spco-go-to-step-finalize_registration-submit:hover {
border-top-color: #588d61;
background: #588d61;
color: #ccc;
}
#spco-go-to-step-finalize_registration-submit:active {
border-top-color: #588d61;
background: #588d61;
}
#eea-square-pay-button {
border-top: 10px solid #588d61;
border-bottom: 10px solid #588d61;
border-left: 10px solid #588d61;
border-right: 10px solid #588d61;
background: #588d61;
color: white;
font-size: 18px;
text-transform: uppercase;
vertical-align: middle;
}
#eea-square-pay-button:hover {
border-top-color: #588d61;
background: #588d61;
color: #ccc;
}
#eea-square-pay-button:active {
border-top-color: #588d61;
background: #588d61;
}


Tony

  • Support Staff

January 17, 2023 at 4:45 am

Yeah, that’s correct.

If you right-click on the element you are trying to style and do ‘Inspect element’ your browser should open up a console showing you the classes and ID’s you can use on specific elements.

For example this: #spco-go-to-step-finalize_registration-submit

Targets an element with the ID of spco-go-to-step-finalize_registration-submit (the # at the beginning is for an ID, . is for a class)

You must be logged in to reply to this support post. Sign In or Register for an Account

Event Espresso