Here is an example of how you can style your RSVPMaker listings for different types of events, using class tags in the HTML that correspond to the event type you set in the WordPress editor. RSVPMaker’s event types work like categories for your blog. I prepared this example in response to a question:

The question was whether the color coding could be associated with an RSVPMaker event template.

The answer is yes — if you assign a category to the template, it will be applied to all the events you generate based on that template. Here’s an example of a color-coded calendar and event listing. I’m not offering this as an example of good design necessarily, just an example of what’s possible.

Event With No Color Coding

Monday January 29, 2018 7:00 PM

 

This one does not have colored styles.

Event Types: colors test

Color Me Red

Tuesday January 30, 2018 7:00 PM

 

Sample showing how to style event posts by event type.

Let’s see how this works.

Event Types: colors test, team red

Color Me Blue

Wednesday January 31, 2018 7:00 PM

 

Sample showing how to style event posts by event type.

Let’s see how this works.

Event Types: colors test, team blue

The event headlines shown in the calendar are coded like this

<div><a class="calendar_item Color_Me_Blue colors_test team_blue" href="https://rsvpmaker.com/rsvpmaker/color-me-blue-2018-01-31/" title="Color Me Blue">Color Me Blue<br />&nbsp; 7:00 PM</a></div>

While the body of an event post as listed on the page begins with this coding on the div

<div id="rsvpmaker-116601" class="post-116601 rsvpmaker type-rsvpmaker status-publish hentry 
rsvpmaker-type-colors-test rsvpmaker-type-team-blue" itemscope itemtype="http://schema.org/Event" >  

This means we have two class tags we can target .team_blue vs .team_red (on the a tag) and .rsvpmaker-type-team-blue vs .rsvpmaker-type-team-red (on the enclosing div or the article tag on a single post view).

In addition to styling the div or article tag with class .rsvpmaker-type-team-blue we can target the headline, paragraph and div tags etc. inside of it as in this code for the example above.

.team_blue {background-color: blue;} 
.rsvpmaker-type-team-blue {border: thin solid blue; padding: 5px; margin-bottom: 10px;}
.rsvpmaker-type-team-blue h1 a {background-color: blue;color: #fff;}
.rsvpmaker-type-team-blue p,.rsvpmaker-type-team-blue div {color: blue;}
.team_red {background-color: red;} 
.rsvpmaker-type-team-red {border: thin solid red; padding: 5px; margin-bottom: 10px;}
.rsvpmaker-type-team-red h1 a {background-color: red;color: #fff;}
.rsvpmaker-type-team-red p,.rsvpmaker-type-team-red div {color:red;}

If you do not want to hack your theme’s style.css or the stylesheet used by RSVPMaker, you can add a few quick CSS customizations of this sort using the Additional CSS tab of the Customizer.

Note: One inconsistency is that the RSVPMaker class tags for calendar items have terms separated by underscores, whereas the rsvpmaker-type tags on posts have terms separated by hyphens and all the terms are rendered in lower case. The class tags on calendar items are not necessarily lower case. So the event type entered as “Special Event” in the editor comes out as Special_Event on the calendar but rsvpmaker-type-special-event as the class wrapped around the event post. (I could change it to make it more consistent, but I won’t because I don’t want to break the website of anyone who is using these tags as-is.)

The important thing is it works.