Click Here to view this article as a PDF.
Author: Joel Kristenson
Last Updated: 2015-08-18
Overview
This article provides a few examples of mock events where you can take the source code (description code) and utilize it as a starting point for styling your events. There’s also a section near the bottom which details each part of the event page that can be styled using inline html/CSS.
Tip: To quickly view what an event looks like OR to view your entire event calendar in a web browser click the [View Directory] or [View Page] buttons at the top of your event record in Trail Blazer:
Steps to Style your Event
Take the source code from the examples below and paste it into the Description box of your event between two <style> tags, click [Save] once finished, and then refresh your event page:
Example #1 – Political Media Event – Come Support Our Candidate
Click here for a live preview of this mock event.
Screenshot 1 of 2 – Top of Event Page (View = 100%):
Screenshot 2 of 2 – Bottom Half of Event Page (View = 100%):
Source (description) code to style this event:
<head>
<style>
body {
background-image:url("http://www.trailblz.info/DemoCampaign_Joel/doc/MQA2ADEAOAAwADYAMgAyADgALQAxADAAMAAyADcA0/wh1920.jpg");
vertical-align:middle;
background-repeat: space;
color: black;
}
#event-top-banner h1 {
background-color:white;
font-size: 30px;
color: black;
}
#event-top-banner h2 {
background-color: white;
font-size: 20px;
color: black;
}
#event-top-banner {
background-color:white;
font-size: 20px
color: green;
}
</style>
On behalf of Trail Blazer Campaign Services and Congressman Bob Jones, we invite you to attend a reception on Saturday, August 12th, 2017 at 4:00 pm. This reception is being held outside at the offices of Strategic Public Partners, located at 620 Mendelssohn Avenue North, Suite 186, Golden Valley, MN 55427.
Example #2 – Mission/Tour Trip
Click here for a live preview of this mock event.
Screenshot 1 of 2 – Top Half of Event Page (View = 100%):
Screenshot 2 of 2 – Bottom Half of Event Page (View = 100%):
Source (description) code to style this event:
<h5><strong>(Tickets are limited to 10 people)</strong></h5><br />
<h5>Abisko Mountain Station to the Saami Village of Nikkaluokta.</h5><br />
Bring:<br />
- Sleeping Bag<br />
- Tent<br />
- Food<br />
- Clothing<br />
- Toiletry Items<br />
- Rain Gear<br />
- Passport<br />
- ID Card<br />
- Fishing Gear<br /><br />
We'll supply the rest.<br /><br />
<italic
>*We must recieve your paperwork 2 weeks prior to departure</italic
>
<head>
<style>
body {
background-image:url("http://www.trailblz.info/DemoNonprofit_Joel/doc/MQA5ADgAMgA2ADIAOAA1ADMALQAxADAAMAA2ADAA0/2000-1500-0/2015-08-17-huge-mountain-range-from-google-images-for-blazing-trails-event-75-percent.jpg");
text:white;
}
#event-top-banner {
color: white;
}
.max-img {
padding-left: 30%;
}
/*
#event-top-banner h1{
color: black;
background-color: green;
font-size: 22px;
}
#event-top-banner h2{
color: black;
font-size: 20px;
}
.container {
background-color: #339113;
}
*/
/*
.table-organizer {
background-color: black;
color: white;
}
*/
</style>
</head>
Example #3 – Theater Event – Selling Tickets for a Show
Click here for a live preview of this mock event.
Screenshot 1 of 2 – Top Half of Event Page (View = 100%):
Screenshot 2 of 2 – Bottom Half of Event Page (View = 100%):
Source (description) code to style this event:
<style>
/*BEGINNING OF EVENT CSS STYLING*/
body {
background-image: url("http://www.trailblz.info/DemoNonprofit_Joel/doc/MwA1ADYAOAA1ADgAMQAxADYALQAxADAAMAA1ADYA0/auditorium4s.jpg");
}
/*.container{
background-color: white;
}*/
#event-top-banner {
color: black;
background-color: white;
}
/*END OF EVENT CSS STYLING*/
</style>
<p>Description goes here...<br /><br /><img src="http://www.trailblz.info/DemoNonprofit_Joel/doc/NQA2ADgAOAAzADgAMQAtADEAMAAwADUANQA1/TheVenue.SeatingChart-400px-width_201508121252245962457_Temporary.jpg" /></p>
Example #4 – Nonprofit Celebrity Golf Tournament (Fundraiser)
Click here for a live preview of this mock event.
Screenshot 1 of 2 – Top Half of Event Page (View = 100%):
Screenshot 2 of 2 – Bottom Half of Event Page (View = 100%):
Source code to style this event:
<head>
<style>
body {
background-color: black;
background-image:url("http://trailblz.info/demononprofit_joel/images/beautiful_golf_course-wallpaper-1920x1440.jpg");
vertical-align:middle;
background-repeat: space;
text:white;}
#event-top-banner h1{
color: white;
font-size: 26px;
}
#event-top-banner h2{
color: white;
font-size: 20px;
/*background-color:black;*/
}
#event-top-banner {
color: white;
}
</style>
<p>
</head>
<h4>Fund Allocation:</h4><br />
<ul>
<li>20% - Nonprofit Organization</li>
<li>20% - Event Overhead</li>
<li>60% - Preservation/Restoration of Golf Courses</li>
</ul>
</p>
<p>
After the tournament wraps up around 4 PM we'll be serving cocktails and having a barbeque until the award ceremony at 6 PM. Feel free to invite friends and family, live music will continue until late into the night.
</p>
Full List of Event CSS Codes with Descriptions
--Generic Styling Tips and Tricks--
Background Image of Entire Page (Body)
body {
background-image: url(“http://www.urlLocationOfYourImageGoesHere.com”)
}
Change Font-Family/Font-Size of Entire Page (Body)
body {
font-size: 18px;
font-family: tahoma;
}
--#CLASSES--
#event-top-banner
This controls this section:
#event-top-banner h1
This controls this section:
#event-top-banner h2
This controls this section:
--.ID’s--
.container
This controls this section:
.max-img
This controls this section:
.table-organizer
This controls this section:
Tip: Contact Trail Blazer support if you would like us to add your background image to the Event Directory so that it’s more branded to your website. It’s important to note that this will also be added to your donation form if you link to it vs implanting it as an iFrame on your site - it’s an all-or-nothing option. Click here for a live preview, my example is below:
Related Resources
Article: Events 2014 – Part I
Article: Events 2014 – Part II
Article: Purchase Orders
Video: Events 2013
Video: Events – pay for an event online
Video: Events – Remove Person from Event
Website: List of Merchant Gateway Payment Processors we Integrate with
3rd Party Resource: W3 Schools CSS (Cascading Style Sheets) Tutorial
Trail Blazer Live Support
Phone: 1-866-909-8700
Email: support@trailblz.com
Facebook: https://www.facebook.com/pages/Trail-Blazer-Software/64872951180
Twitter: https://twitter.com/trailblazersoft
* As a policy we require that you have taken our intro training class before calling or emailing our live support team. Click here to view our calendar for upcoming classes and events. Feel free to sign up other members on your team for the same training.
* After registering you’ll receive a confirmation email with the instructions for how to log into the GoToMeeting session where we host our live interactive trainings..
* This service is included in your contract.
