Title: Styling based on category Last modified: August 20, 2016 --- # Styling based on category * [benclowney](https://wordpress.org/support/users/benclowney/) * (@benclowney) * [14 years, 10 months ago](https://wordpress.org/support/topic/styling-based-on-category/) * This is a brilliant plugin. * As my PHP knowledge is a little limited I was wondering if anyone had done something like this before: * I’d like to apply background shading to the boxes on the full size calendar, dependent on the category the event is listed in * Realise it is based on conditions but the tutorial went a little over my head. Does anyone have any advice? * Cheers Viewing 15 replies - 1 through 15 (of 36 total) 1 [2](https://wordpress.org/support/topic/styling-based-on-category/page/2/?output_format=md) [3](https://wordpress.org/support/topic/styling-based-on-category/page/3/?output_format=md) [→](https://wordpress.org/support/topic/styling-based-on-category/page/2/?output_format=md) * Plugin Author [Marcus (aka @msykes)](https://wordpress.org/support/users/netweblogic/) * (@netweblogic) * [14 years, 10 months ago](https://wordpress.org/support/topic/styling-based-on-category/#post-2191919) * yes, but you need to know some PHP/CSS 🙂 * [Marc Heatley](https://wordpress.org/support/users/barkerbaggies/) * (@barkerbaggies) * [14 years, 9 months ago](https://wordpress.org/support/topic/styling-based-on-category/#post-2192012) * In your events list format you can call the event category as a class for the table row (if that’s how you’re listing events) * `col 1col 2` * This will call give a class of eventscat-1 etc based on the category ids you can find listed in the Events > Categories menu * [Bristol CI](https://wordpress.org/support/users/bristol-ci/) * (@bristol-ci) * [14 years, 9 months ago](https://wordpress.org/support/topic/styling-based-on-category/#post-2192015) * Hi, I would love some help on doing something similar to this. * Is it possible to colour code by category for each event in the event list so that the text of the event or it’s background shading is specific to the category it’s in? Also, Is it possible to get the table to group the events into months so that there would be a series of header months e.g. August 2011 then the relevant events listed by date beneath? Both of these would help enable people to see at a glance what month each event is in and what type of event it is. * The page on my website I want to change the look of is [http://contactdance.co.uk/events/](http://contactdance.co.uk/events/) * My code writing is limited, so any help would be much appreciated. Many thanks, Saskia * Plugin Author [Marcus (aka @msykes)](https://wordpress.org/support/users/netweblogic/) * (@netweblogic) * [14 years, 9 months ago](https://wordpress.org/support/topic/styling-based-on-category/#post-2192017) * keep an eye on the blog, might have more on that tomorrow, if not next week * [Marc Heatley](https://wordpress.org/support/users/barkerbaggies/) * (@barkerbaggies) * [14 years, 9 months ago](https://wordpress.org/support/topic/styling-based-on-category/#post-2192018) * Hi Saskia – if you format your events listing as I posted above: * `col 1col 2` * You can then style each event category accordingly in your CSS. * For example: `tr.eventscat-1{background:blue;}` would give every event in category 1 a blue background. * Hope that helps * [Bristol CI](https://wordpress.org/support/users/bristol-ci/) * (@bristol-ci) * [14 years, 9 months ago](https://wordpress.org/support/topic/styling-based-on-category/#post-2192020) * Hi barkerbaggies, * Thanks for your help. I’m not sure if i’m doing it right though as the results aren’t happening as i’d like. Where would i insert the first bit of code? I have tried different places but it simply adds 3 extra cells below each line with the first two having the words ‘col 1′ and col 2’ in it. The existing code in the ‘Default event list format’ box is: * ``` #_{D d M Y} #@_{- D d M Y}
#_12HSTARTTIME - #_12HENDTIME #_EVENTLINK
#_LOCATIONLINK #_ATT{Teacher}
#_ATT{Price}
#_CATEGORYLINK
``` * I have added the second bit of code into the Custom Code section of PlatformPro. Is that correct? * Sorry, you can probably tell that my code writing abilities are limited! * Many thanks. * [Marc Heatley](https://wordpress.org/support/users/barkerbaggies/) * (@barkerbaggies) * [14 years, 9 months ago](https://wordpress.org/support/topic/styling-based-on-category/#post-2192021) * No problem – the first set of ‘’ tags in your event format create the table row, so you need to define the class of the row in there. So now your event format will be: * ``` #_{D d M Y} #@_{- D d M Y}
#_12HSTARTTIME - #_12HENDTIME #_EVENTLINK
#_LOCATIONLINK #_ATT{Teacher}
#_ATT{Price}
#_CATEGORYLINK
``` * Now in your custom CSS settings (I’m guessing that’s what you mean in PlatformPro, but I’ve never used that theme) you need to add a different css class for each category id, so: * ``` tr.eventcat-1{ background:red; } tr.eventcat-2{ background:blue; } tr.eventcat-3{ background:green; } ``` * etc * This will style the whole row of an event in a certain category. You’ll find the category id numbers in your events menu under categories. * good luck. * [Bristol CI](https://wordpress.org/support/users/bristol-ci/) * (@bristol-ci) * [14 years, 9 months ago](https://wordpress.org/support/topic/styling-based-on-category/#post-2192022) * Thanks for your time with this. * I have replaced the first bit of code with your suggestion. All fine, though looks the same as before. * I have tried adding the second bit of code in the PlatformPro Custom Code section and in the style.css stylesheet for PlatformPro, with no effect whatsoever. I have checked that I am testing existing category ID’s and have also tried different formats of the colour e.g. #bdbdbd instead of the word for a colour, again with no effect. Am I puttin it in the wrong place? * best wishes. * [Marc Heatley](https://wordpress.org/support/users/barkerbaggies/) * (@barkerbaggies) * [14 years, 9 months ago](https://wordpress.org/support/topic/styling-based-on-category/#post-2192023) * Hey – so sorry. There’s a typo in my instructions. The class we’ve specified is eventscat-X with an s and the css styles are for eventcat with no s. * Change either and problem solved. * Duuuh. * [Bristol CI](https://wordpress.org/support/users/bristol-ci/) * (@bristol-ci) * [14 years, 9 months ago](https://wordpress.org/support/topic/styling-based-on-category/#post-2192025) * Hey – that’s great, works now. Thank you!! I will have a play with colors etc…. * Another cheeky ask, I don’t suppose you know how to get the listing to group under month/ year headings do you? * [Marc Heatley](https://wordpress.org/support/users/barkerbaggies/) * (@barkerbaggies) * [14 years, 9 months ago](https://wordpress.org/support/topic/styling-based-on-category/#post-2192026) * No problem – sorry for the silly mistake. * RE grouping by date, I wish I did. I’m working on a site for a listings magazine who have multiple events per day and so would love to group by Month and Day. * [Bristol CI](https://wordpress.org/support/users/bristol-ci/) * (@bristol-ci) * [14 years, 7 months ago](https://wordpress.org/support/topic/styling-based-on-category/#post-2192048) * Is there a way to change the linked text color too? * I have my events colour coded by category (background and text) but the text for those elements in the table that are linked to other pages is the same as for the rest of my website. In the interest of making it nicer to view, is there a way of changing this colour specific to each category? * I can’t figure out the code – please help! * What I have so far is: * ``` } tr.eventcat-2{ background:#ebebeb; border:1px solid #000000; border-right:2px solid #000000; border-left:2px solid #000000; color: #801103 } ``` * [Marc Heatley](https://wordpress.org/support/users/barkerbaggies/) * (@barkerbaggies) * [14 years, 7 months ago](https://wordpress.org/support/topic/styling-based-on-category/#post-2192049) * Hi – all you would need to do is add a new style to the links for just those table rows. Something like: * ``` tr.eventcat-2 a{ color:red; } ``` * So this code reads: * “Links in table rows with the class “eventcat-2″ should be red.” * You’d need to specify a style for each category. * [Bristol CI](https://wordpress.org/support/users/bristol-ci/) * (@bristol-ci) * [14 years, 7 months ago](https://wordpress.org/support/topic/styling-based-on-category/#post-2192059) * Many thanks for that barkerbaggies, it worked and my events table is slowly getting there! Still not managed to find a solution to group events by month though – have you had any luck with that yet? * [agelonwl](https://wordpress.org/support/users/angelonwl/) * (@angelonwl) * [14 years, 7 months ago](https://wordpress.org/support/topic/styling-based-on-category/#post-2192061) * [@bristol](https://wordpress.org/support/users/bristol/) CI * What do you mean by Group Events by months? is it thru widget or events page? and could you answer this on a new post? Viewing 15 replies - 1 through 15 (of 36 total) 1 [2](https://wordpress.org/support/topic/styling-based-on-category/page/2/?output_format=md) [3](https://wordpress.org/support/topic/styling-based-on-category/page/3/?output_format=md) [→](https://wordpress.org/support/topic/styling-based-on-category/page/2/?output_format=md) The topic ‘Styling based on category’ is closed to new replies. * ![](https://ps.w.org/events-manager/assets/icon-256x256.png?rev=1039078) * [Events Manager - Calendar, Bookings, Tickets, and more!](https://wordpress.org/plugins/events-manager/) * [Frequently Asked Questions](https://wordpress.org/plugins/events-manager/#faq) * [Support Threads](https://wordpress.org/support/plugin/events-manager/) * [Active Topics](https://wordpress.org/support/plugin/events-manager/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/events-manager/unresolved/) * [Reviews](https://wordpress.org/support/plugin/events-manager/reviews/) * 36 replies * 5 participants * Last reply from: [Marc Heatley](https://wordpress.org/support/users/barkerbaggies/) * Last activity: [14 years, 4 months ago](https://wordpress.org/support/topic/styling-based-on-category/page/3/#post-2192100) * Status: not resolved