Trail Blazer Knowledge Base

 

Home : General : How to Style your Event Pages - 4 Example Mock Events - Sample CSS Code with Descriptions

Knowledge Base







User:

Password:



Article ID: KB297
Keyword Name: Events, Styling, CSS, Cascading Style Sheets, Background Image, Branding, HTML
Created: August 18, 2015
Viewed: 18700

How to Style your Event Pages - 4 Example Mock Events - Sample CSS Code with Descriptions




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.


http://www.us-cert.gov/sites/default/files/images/tip-icon.pngTip: 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:




http://www.us-cert.gov/sites/default/files/images/tip-icon.pngTip: 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

http://www.somebodysattic.org/images/phone%20icon_lower%20rez.jpg  Phone:  1-866-909-8700

http://sisyphus-js.herokuapp.com/assets/email_icon-0f32f4da45c2822cbb02fb36f9b9429e.png   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.



 

Are you ready to learn more? Contact Us