The RSVP and RSVP Pro plugin purposely don’t do much in the way of styling. We inherit almost all styling from whatever theme is being used. The reason for this is we want to try and make everything look as similar as possible. In this post I am going to go through some of the style classes that exist in the RSVP plugins and go through one quick example that only pertains to the pro version.
The post assumes some familiarity with stylesheets and how you can use your theme’s stylesheet to modify the look and feel of the site as a whole.
Available styles
- rsvpPlugin – ID of the main RSVP Container. Each RSVP step will be wrapped in this container
- rsvpParagraph – Class name that is used for all paragraph tags on the front end portion of the RSVP
- rsvpFormField – Class for divs that surround a given form input, which is a combination of a label and at least one form input (could be multiple form inputs)
- rsvpAdditionalAttendee – Class for the div container that holds each additional RSVP attendee you are associated with
- additionalRsvpContainer – The container that holds the plus sign that allows for people to add additional attendees
- rsvpCustomGreeting – ID for the custom greeting div that shows up if that option is enabled
- rsvpBorderTop – Class for setting a top border on certain divs in the main input form
- rsvpCheckboxCustomQ – Class for the div that surrounds each custom question checkbox
- rsvpClear – A class for div elements that we want to use to set clear both. Currently used only next to rsvpCheckboxCustomQs as they are floated
- rsvpRsvpQuestionArea (Pro Only) – A class for the RSVP attending question
An example…
Now what would we do if we want to change the radio buttons to be more like buttons side by side in the pro plugin? Well… we would leverage the rsvpRsvpQuestionArea class to modify the styles and use the fact that the labels act as buttons for the radio buttons. Before styling them this is what the “yes”/”no” question looks like in the plugin.
Now let’s open up the theme’s style.css and add in the following styles
.rsvpRsvpQuestionArea input[type="radio"] {
display: none!important;
}
.rsvpRsvpQuestionArea label {
background-color: green;
color: white;
padding: 10px;
}
.rsvpRsvpQuestionArea {
display: inline-block;
height: 30px;
}
What we did here was hide the radio button, we had to use the !important keyword because the RSVP stylesheet gets loaded first and we try and prevent the radio buttons being hidden.
We then make the labels green with white text and display them side by side. The end results looks like
This works well but we can’t tell which item is selected. So, let’s change that!
.rsvpRsvpQuestionArea input[type="radio"]:checked + label {
background-color: blue;
}
With this added style we set the label that is next to the radio that is checked to have a background-color of blue. Which now makes the buttons look like 
Now our “radio” buttons look like styled buttons.
This is just an example of how the RSVP plugin can be styled. If you are ever stuck and need some help feel free to reach out to us we are here to help.
Happy styling!