|
Tom Canfield
|
February 25, 2016 at 7:29 am
We’ve set up several events, and so far everything seems to be working well. However, the buttons on the forms (Register Now, Proceed to Checkout etc) are all white and don’t stand out. I saw in older forum posts that EE3 had several theme styles to choose from (Themeroller styles). That doesn’t seem to be available for EE4. How can I change the button color?
|
|
Tony
|
February 25, 2016 at 7:54 am
Hi Tom,
We do now included Themeroller within EE4 and instead opt for minimal styling leaving your theme to styles most of the elements itself. So whats happening is your theme is actually applying a white background on all inputs – http://take.ms/7mj5w
If i disable that style you can see the buttons then have a grey background – http://take.ms/YhqbF
So to add some custom styling to your buttons you’ll need to add some custom CSS. We recommend using either the My Custom CSS or Reaktiv CSS Builder plugins to add custom styles.
You can use something like this:
.ticket-selector-submit-btn, .spco-next-step-btn {
background-color: red;
}
You’ll likely want another color other than red, but the color choice is up to you 🙂
|
|
Tom Canfield
|
February 25, 2016 at 8:10 am
Thanks. I have My Custom CSS installed, so I’ll give that a try. I just need to copy in the code from above (with whatever color I want), and the plug in does the rest? I don’t have to specify where that code needs to go?
|
|
Tom Canfield
|
February 25, 2016 at 8:22 am
It worked. Thanks. I’m all set.
|
|
Tony
|
February 25, 2016 at 8:43 am
I just need to copy in the code from above (with whatever color I want), and the plug in does the rest? I don’t have to specify where that code needs to go?
My Custom CSS adds the styles you apply to every page load so you don’t need to tell it where to add the code.
The classes used above should be specific to Event Espresso and should not cause any problems with other elements on your site, however if you find they are just let us know and we can advise how to make the CSS more specific to prevent that.
It worked. Thanks. I’m all set.
Great 🙂
|
