Styling based on category

yes, but you need to know some PHP/CSS ??

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)

<tr class="eventscat-#_CATEGORYID"><td>col 1</td><td>col 2</td></tr>

This will call give a class of eventscat-1 etc based on the category ids you can find listed in the Events > Categories menu

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 https://contactdance.co.uk/events/

My code writing is limited, so any help would be much appreciated.
Many thanks,
Saskia

keep an eye on the blog, might have more on that tomorrow, if not next week

Hi Saskia – if you format your events listing as I posted above:

<tr class="eventscat-#_CATEGORYID"><td>col 1</td><td>col 2</td></tr>

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

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:

<tr>

			<td>
               <strong> #_{D d M Y} #@_{- D d M Y}</strong><br/>
               <i>#_12HSTARTTIME - #_12HENDTIME</i>
            </td>
            <td>
               <strong> #_EVENTLINK</strong><br/>
                <i>#_LOCATIONLINK</i>
            </td>
<td>
               <i>#_ATT{Teacher}</i><br/>
           </td>
<td>
               <i>#_ATT{Price}</i><br/>
           </td>
<td>
               <i>#_CATEGORYLINK</i><br/>
            </td>
        </tr>

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.

No problem – the first set of ‘<tr>’ 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:

<tr class="eventscat-#_CATEGORYID">

			<td>
               <strong> #_{D d M Y} #@_{- D d M Y}</strong><br/>
               <i>#_12HSTARTTIME - #_12HENDTIME</i>
            </td>
            <td>
               <strong> #_EVENTLINK</strong><br/>
                <i>#_LOCATIONLINK</i>
            </td>
<td>
               <i>#_ATT{Teacher}</i><br/>
           </td>
<td>
               <i>#_ATT{Price}</i><br/>
           </td>
<td>
               <i>#_CATEGORYLINK</i><br/>
            </td>
        </tr>

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.

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.

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.

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?

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.

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
			}

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.

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?

@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?