Creating personalized badges for attendees to wear has always been a difficult and time-consuming process. In the past we’ve had some tools to make it easier, but they still required a lot of expertise and manual work.
@georgestephanis recently came up with a great idea to change all that, though, by creating the badges with HTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. and CSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site.. He then went even further, building a proof-of-concept, and a prototype. After a few enhancements to the prototype, the new tool is now available on your site!
Here’s an example of what the badge preview looks like with the default design. The first area that you see is the back of the badge (which is why it’s upside-down), and the area below that is the front of the badge. Both sides are identical, and the front has a marker to punch holes for lanyards.
You can find the tool under Tickets > Tools > Generate Badges, or by opening the Customizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. and looking for CampTix HTML Badges.
When you get there, you’ll find personalized badges for all of your attendees, including their names and Gravatars. You can then edit the CSS to customize the badges, so that they fit your camp’s design. As you edit your CSS in the Customizer, you’ll get a live preview of the how the badges will look.
The underlying markup has plenty of CSS classes to help with customization. For example, you could make volunteer badges have a different background color (so that volunteers are easier to find), or make attendee’s last name appear in a smaller font than their first. There are also plenty of empty
<div> elements that you can re-purpose for arbitrary design features.
Once you’re ready, just print them to a PDF and take that file to a local print shop for printing and cutting. You can check out a sample PDF to get a better idea of what it will look like.
Full documentation is available in the Organizer Handbook.
This is just a v1, so there’s lots of room for improvement. If you have any feedback, please leave a comment! If you’d like to contribute a patch, the source code is available in the Meta repository or through the Meta Environment.
If you’d like to have some more advanced design options, we also have a tool for creating personalized badges with InDesign, but at the moment it requires a lot more work than this new tool. If you’d like to help improve that process, you can contribute to Meta ticket #262.