|
arnehulstein
|
February 28, 2020 at 4:32 am
Hey guys,
I have integrated Event Espresso into a ShowThemes OpenEvent theme on the latest version of WordPress. The process works very well and so does the integration with payment provider Mollie. Thanks for that.
However, the registration pages look terrible. I would like to change the looks of the ticket purchasing page as I would like the text to sit above the ticket selection as well as remove the ticket details altogether.
Also, the look of the fields of the registration form and their spacing are just not very attractive at all. Any thoughts?
See the process here: https://icaaconference.org/events/7th-international-caa-conference/
Thanks!
|
|
Tony
|
February 28, 2020 at 7:19 am
Hi there,
In short, EE applies minimal styling to its elements and relies on your site’s theme styling. We do this to keep Event Espresso’s look consistent with the rest of your site as we aren’t overriding styles from various themes.
Which means the styling that you don’t like right now is likely the default styling from either your theme, or the minimal styling from Event Espresso because your theme doesn’t have any default styles for the elements.
I tried to look at the event you post but it shows 404 currently, is it a private event or have you remove it from the site?
|
|
Josh
|
February 28, 2020 at 7:21 am
Hi,
Maybe your event isn’t published yet? The link you shared returns a 404 page.
I would advise to contact Showthemes about this because the theme is mostly what styles the forms. Event Espresso applies very minimal styles which allows for using the theme’s styles. In other words, if the spacing of form elements looks bad, it’s the theme that’s making them look bad.
If Showthemes support isn’t helpful, we can look into what it would take to override the Showthemes theme, but we’ll need to be able to see the event pages.
|
|
arnehulstein
|
February 29, 2020 at 12:49 pm
Sorry guys, yes, the page was still private… 🤦♂️
Solved that part.
|
|
Josh
|
March 2, 2020 at 10:58 am
Great, we can see the page now.
Apparently the ShowThemes OpenEvent theme styles only dropdown inputs and nothing else in a form. Here are some CSS style rules that will target other parts of the form (mostly derived from the WordPress twentysixteen theme)
Submit button styles:
input[type="submit"],
input[type="submit"][disabled]:hover,
input[type="submit"][disabled]:focus {
background: #1a1a1a;
border: 0;
border-radius: 2px;
color: #fff;
font-family: "proximanova-bold", sans-serif;
font-weight: 700;
line-height: 1;
padding: 0.84375em 0.875em 0.78125em;
text-transform: uppercase;
}
input[type="submit"]:hover,
input[type="submit"]:focus {
background: #007acc;
}
General form styles:
label {
line-height: 2em;
}
form div div {
line-height: 1.6;
}
input[type="text"],
input[type="email"],
textarea {
background: #f7f7f7;
background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
border: 1px solid #d1d1d1;
border-radius: 2px;
color: #686868;
padding: 0.625em 0.4375em;
width: 100%;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
background-color: #fff;
border-color: #007acc;
color: #1a1a1a;
outline: 0;
}
You can add the above CSS to your site’s Appearace > Customizer > Additional CSS page.
|
