Color-Coded Event Posts

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.

January 2018
Sunday Monday Tuesday Wednesday Thursday Friday Saturday
 
1

 

2

 

3

 

4

 

5

 

6

 

7

 

8

 

9

 

10

 

11

 

12

 

13

 

14

 

15

 

16

 

17

 

18

 

19

 

20

 

21

 

22

 

23

 

24

 

25

 

26

 

27

 

28

 

29

30

31

     
Month/Year /

Monday January 29, 2018 7:00 PM
 

This one does not have colored styles.

Event Types:

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: ,

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: ,

The event headlines shown in the calendar are coded like this

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

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.

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.

  • Kat Nelson

    Awesome! Thank you so much!