Conference Events in the Editor

In this example, an event post had to be tagged with the Event Type “Conference Programming” to be included in the listing. Long event descriptions can be broken up with the “More” tag. The content after that tag will be hidden until the viewer clicks the “Read more” button. So this is a good way of handling speaker bio details viewers don’t necessarily need to see when they are trying to get a quick overview of your event.

Styling the Schedule Block

The CSS used with the schedule shown on the home page of this website is here:

.track-1 {
	border-top: thick solid red;
	padding: 10px;
}
.track-2 {
	border-top: thick solid blue;
	padding: 10px;
}
.track-3 {
	border: thick solid green;
	padding: 10px;
}
.track-1, .track-2 {
	border-bottom: none;
}
.rsvpmaker-schedule-item {
	margin: 15px;
}

Different conference tracks identified with RSVP Type tags can be styled using the slugs for those types. RSVP Types are event equivalent of blog categories.

You can find those slugs and add or edit Event Types on this screen under RSVP Events.

The whole series of events is wrapped with the class .rsvpmaker-schedule.

Each event is wrapped with a .rsvpmaker-schedule-item you can target to adjust spacing and other parameters.

The original conference website used a somewhat different design with a colored dotted border down the left of each event item to reflect its type.

Here is the CSS used with that layout.

.track-1 {
	border-left: thick dotted red;
	padding: 5px;
}
.track-2 {
	border-left: thick dotted blue;
	padding: 5px;
}
.track-3 {
	border-left: thick dotted green;
	padding-left: 5px;
}