|
December 18, 2020 at 2:33 pm
I don’t see it modified by default, I’m applying your styles in Chome Dev tools to confirm they work, which they do, but when I load the page I don’t see that styling.
Ok, first, a quick guide on Chrome Dev Tools. Or a least how I use Chrome Dev Tools to find the selector I need.
So you want to target the Ticket Selector button, right-click on it and do inspect.
That will open Chrome Dev Tools on the inspect tab and select the element you are inspecting. Like this:
https://monosnap.com/file/Djr4NEfKBH3jXtu7p1YjWPyoaV0yAN
Do know the difference between ID’s and classes?
ID’s use # and classes use ., an ID should only be used once on a page where as classes can be used multiple times.
So knowing that we can look at the button input itself, if we use the ID it’s only going to target THAT specific button, but it has a class of ticket-selector-submit-btn meaning all those buttons will have that class and all can be targets using it.
So start with:
.ticket-selector-submit-btn {
// Styles here
}
Now working up through the ‘parent’ elements allows us to get a little more specific on where those styles apply, so let’s use your example:
.espresso_events .ticket-selector-submit-btn {
// Styles
}
Work right to left and that says any element with class ticket-selector-submit-btn that is within an element espresso_events.
Looking at our inspector again: https://monosnap.com/file/jhgio9iYFfdoN9k5CGPUWN6dGlVdB1
Which means your selector is fine and will target that button, your specifically targeting that button within an element that has a class of espresso_events but in this case thats fine. The point is that your getting more specific with your styling now because your dialling in on specific parent/child relationships etc.
Now, on your site your CHild theme’s CSS is currently using this selector:
.single-espresso_events .ticket-selector-submit-btn {
// Styles
}
Now you have a bit of a problem here as that’s specific targeting SINGLE espresso_events posts and an event list is NOT a single event post, its multiple. Notice in our inspector we do NOT have that single-espresso_events class on that page? That style doesn’t apply there, it will only apply on a page like this:
https://ljk.vandegriftphotography.com/ljk_dev/events/infrared-a-to-z/
(When you’ve clicked through to the event)
Use inspector again and you’ll see that class is on the above page, but you’ll also see is has an article element with class .espresso_events just like the other. So, switching the above style back to what you posted earlier means it targets both of those pages.
The above gets a little easier the more you do it, you start to notice classes that can be used on all the various sections you want to target and pick up how you can use the same class for multiple outputs, there isn’t really a shortcut to learning how to do that other than walking through it.
May I ask why you switched to use .single-espresso_events?
|
