|
Sarah Bruns
|
January 21, 2015 at 8:46 pm
I am trying to change the default color for a category on the event List View. I have found a variety of articles for changing the category color on the calendar view, but not the list view.
For instance, our events have three categories — Women’s, Men’s, and General/Mixed. I want to assign a background color for the header (title bar) and a background color for the body text (event details).
Is there an easy snippet of custom CSS I can add to override the general theme styling? We’ve tried a variety of things and nothing seems to be working. We can add custom CSS to override all the events in general, but not specifically by category.
Any assistance would be greatly appreciated!
|
|
Dean
|
January 22, 2015 at 5:56 am
Hi,
It depends on your set up.
If for example you have each category on it’s own page (say via [EVENT_LIST category_identifier=your_category_identifier]), you could change it to [EVENT_LIST category_identifier=your_category_identifier css_class=my-custom-class]
What this would allow is for those events to be styled differently from events in another category on another page.
The difficulty lies in if you have a single list of events with mixed categories, as the event category isn’t actually displayed.
The only way to enable this would be via code. I will outline the basics below but if you are not comfortable with PHP you will need to contact your web developer.
$category_identifier = espresso_event_category_data($this_event_id, $all_cats = FALSE);
$category_identifier = $category_identifier['category_name'];
You could edit the template file and do something like this: http://take.ms/OrcXu
Which basically grabs the category for the event and uses an existing variable to output it (you could easily add a separate variable).
Then you would be able to use CSS to target elements via that class. E.g. if the class was MyEvents, you could use .myevents h3 { background: yellow; }
|
|
Sarah Bruns
|
January 22, 2015 at 8:13 am
Thanks. We can try the php route, but I was hoping to avoid that so we don’t risk any inadvertent loss due to future plugin updates, etc.
We had it working fine on our test site, using the following CSS:
/* Mixed/Default group*/
#event_content .event_title,
#event_espresso_registration_form .event_title {
background: black;
}
#event_content > .event_data > div.event-data-display,
#event_espresso_registration_form div.event-data-display {
background: #cccccc;
}
/* Mens group */
#event_content > .event_data.category_Mens .event_title,
#event_espresso_registration_form.category_Mens .event_title {
background: #003366;
}
#event_content > .event_data.category_Mens > div.event-data-display,
#event_espresso_registration_form.category_Mens div.event-data-display {
background: #c6deff;
}
/* Womens group */
#event_content > .event_data.category_Womens .event_title,
#event_espresso_registration_form.category_Womens .event_title {
background: #990000;
}
#event_content > .event_data.category_Womens > div.event-data-display,
#event_espresso_registration_form.category_Womens div.event-data-display {
background: #FDEEF4;
}
But somehow on our live site it’s only recognizing the default category, not the two other categories.
Any suggestions?
|
|
Lorenzo Orlando Caum
|
January 22, 2015 at 10:41 am
Hi Sarah, you mentioned that this is working on the testing/development site but you are seeing something different on the live site.
Are they both on similar environments (e.g. similar theme, same version of Event Espresso, etc)?
—
Lorenzo
|
|
Sarah Bruns
|
January 22, 2015 at 11:22 am
They are both identical.
|
|
Sarah Bruns
|
January 22, 2015 at 11:22 am
Can you confirm that the custom CSS above should be working?
|
|
Lorenzo Orlando Caum
|
January 22, 2015 at 4:03 pm
Hi, I can’t confirm that by viewing the CSS as there may be other factors to account for on the site.
Can you post a link to the page?
—
Lorenzo
|
