|
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
|
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
|
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
|
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)
|
