|
Nat Davis
|
September 30, 2013 at 8:59 pm
I’ve been running into problems with the custom CSS for the following website.
It appears some classes are being shared by the theme that we’re using and it’s causing havoc with the rendering by defaulting to the themes style.css rather than the EE CSS.
Do you have any suggestions on how I can solve this?
Running EE 3.1.35.P on WP 3.6.1. Installed add-ons include Volume Discounts, Multi-Event Registrations, Members & Recurring Events.
|
|
Tony
|
October 1, 2013 at 4:25 am
Hi Nat,
There’s a few options, none of which are quick fixes unfortunately.
Your right the theme is using loose selector’s like .section-title which is over-riding Event Espresso.
The easiest method is to find the rules which are causing your issues and over-ride them. So in the link you posted above for example…
.event_espresso_form_wrapper .section-title {
background: none;
color: #222222;
font-size: 1em;
letter-spacing: 0;
line-height: 0;
padding: 0;
text-align: left;
text-transform: none;
width: 100%;
}
.event_espresso_form_wrapper .section-title span {
padding: 0;
}
You would add that to the bottom of your themes CSS or using a plugin such as My Custom CSS which would get you back to somewhere close. So you would then need to go through and do the same (using the relevant selectors and rules) for any others.
A general rule of thumb is the more specific you get, the stronger the rule. So in the example above, because I’m specifying the class .section-title only when its within another class of .event_espresso_form_wrapper it will use that rule rather than just .section-title{}
You can also edit the theme or EE template files, although the method above is the easiest to manage (files wise)
Hope that helps
|
|
Nat Davis
|
October 1, 2013 at 8:11 pm
Tony,
Thanks for the help so far.
I’m running into the same situation in the Payment Overview screen by duplicating the code you used, but switching out the classes to what I believe they are from Firebug.
<code>.event_espresso_name .section-title {
background: none;
color: #222222;
font-size: 1em;
letter-spacing: 0;
line-height: 0;
padding: 0;
text-align: left;
text-transform: none;
width: 100%;
}
.event_espresso_name .section-title span {
padding: 0;
}</code>
|
|
Tony
|
October 2, 2013 at 2:32 am
For that page you would need
.espresso_payment_overview .section-title {}
But having a rethink, you should be able to do with with only one rule-set.
The first snippet I gave you, with a slightly different selector should catch all EE section-titles, try:
.event-data-display .section-title {
background: none;
color: #222222;
font-size: 1em;
letter-spacing: 0;
line-height: 0;
padding: 0;
text-align: left;
text-transform: none;
width: 100%;
}
.event-data-display .section-title span {
padding: 0;
}
That way you should only need to add the above once to do all the work 🙂
|
|
Tony
|
October 2, 2013 at 2:35 am
The above should also fix the strangeness you can see with the titles on http://makeovermasters.co.nz/event-registration/ also.
|
|
Nat Davis
|
October 2, 2013 at 2:24 pm
That code snippet worked a treat.
Many thanks. 🙂
|
