Documentation

# Greeting Page Configuration

The greeting page (opens new window) is intended to be the landing page for the TeamRasier event.

This page was heavily customized, so the default content that Lumiante renders is hidden by default. The TeamRaiser event must include the necessary code for the page.

Note: Be sure to disable the WYSIWYG editor (opens new window) before making any changes to this page. Failure to do so may result in broken content, as WYSIWYG does not fully understand all the code and will erase it.

# Template

The HTML template code for the greeting page lives in PageBuilder page baf_tr_greeting.

# Creating Greeting Page for New Event

  • Create new TeamRaiser from bluerpint, or by copying an existing event DNL Template
  • Create HTML code for the greeting page by copying baf_tr_greeting page & updating the code
  • Place the code into a PageBuilder page, name it with a pattern baf_tr_greeting_${eventNameOrId} where ${eventNameOrId} is replaced by a short event name or id, all values must be in lower case and separated by underscore _
  • Edit the TeamRaiser event, go to 13. Customize Pages, then click Configure next to the Greeting
  • In the field HTML Area replace, or add if creating a new event, [[S51:baf_tr_greeting]] with [[S51:baf_tr_greeting_${eventNameOrId}]], where the ${eventNameOrId} matches the exact value specified in the previous step

# Updating the Greeeting Page Code

<section class="banner banner--optimized"
  data-s-region-id="Banner|${bannerDescription}|Region 1 of 6||[[S80:userState]]">
  <div class="banner__slideshow">
    <div class="banner__slide">
      <div class="banner__wrap">
        <picture class="banner__picture">
          <source media="(min-width: 1171px)" srcset="[[S80:staticAssetsBaseUrl]]/images/content/pagebuilder/aseel-1700-spon-hero.jpg 1700w" sizes="100vw" />
          <source media="(min-width: 800px)" srcset="[[S80:staticAssetsBaseUrl]]/images/content/pagebuilder/aseel-1170-spon-hero.jpg 1170w" sizes="100vw" />
          <img alt="" src="[[S80:staticAssetsBaseUrl]]/images/content/pagebuilder/aseel-750-spon-hero.jpg" class="banner__image"/>
        </picture>
        <div class="banner__content">
          <div class="banner__container--middle">
            <div class="banner__caption">
              <h3 class="banner__heading text--staggered">
                [[E42:[[S334:fr_id]]:title]]
              </h3>
              <div class="banner__action">
                <a href="[[S8]]#section--intro-registration" class="button button--red link--scroll">Register Now</a>799
              </div><!-- /.banner__action -->
            </div><!-- /.banner__caption -->
          </div><!-- /.banner__container -->
        </div><!-- /.banner__content -->
      </div><!-- /.banner__wrap -->
      <div class="banner__action--mobile">
        <a href="[[S8]]#section--intro-registration" class="button button--red link--scroll">Register Now</a>
      </div>
      <!-- /.banner__action-\-mobile -->
    </div><!-- /.banner__slide -->
  </div><!-- /.banner__slideshow -->
</section><!-- /.banner -->

Create banner images with the following dimesions and upload them into Luminate library. The images should have a .jpg extension for optimal page load and performance.

  • 1700 x 550px
  • 1170 x 379px
  • 750 x 243px

Make replacements in banner code

  • ${bannerDescription} - replace with the brief banner description for analytics
  • aseel-1700-spon-hero.jpg - replace with the name of the new banner image with width 1700px
  • aseel-1170-spon-hero.jpg - replace with the name of the new banner image with width 1170px
  • aseel-750-spon-hero.jpg - replace with the name of the new banner image with width 750px

If necessary, you can hide the mobile button by commenting out the section with the class banner__action--mobile. By default, on small displays, the button on the banner will be hidden and the mobile button will appear below the banner.

# Top Overlapping Section

<section class="section section--overlap" id="section--intro-registration"
  data-s-region-id="Panel|Intro & Registration|Region 2 of 6||[[S80:userState]]">
  <div class="section__container">
    <h2 class="text--uppercase text--center text--red">Title!</h2>
    <p>Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum.</p>
    <div class="column__row column__row--center">
      <div class="column">
        [[?x[[E48:[[S334:fr_id]]:part-type-id]]x::xx::
          [[?x1x2x::x[[E42:[[S334:fr_id]]:status]]x::
            <a class="button button--spaced button--red" href="TRR[[?x1027x::x[[S4]]x::Preview::]]?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=new">Create a Team</a>
            <a class="button button--spaced button--teal" href="TRR[[?x1027x::x[[S4]]x::Preview::]]?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=existing">Join a Team</a>
            <a class="button button--spaced button--teal" href="TRR[[?x1027x::x[[S4]]x::Preview::]]?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=none">Register as an Individual</a>
          ::]]
          <a class="button button--spaced" href="TR?pg=pfind&fr_id=[[S334:fr_id]]&fr_search_type=participant&fr_find_search=Search&submit=true">Find a Participant</a>
          <a class="button button--spaced" href="TR?pg=pfind&fr_id=[[S334:fr_id]]&fr_search_type=team&fr_find_search=Search&submit=true">Find a Team</a>
        ::]]
      </div>
    </div>
  </div>
</section>

The class section--overlap determines whether or not this section will slightly overlap the banner on wide displays.

# Standard Registration Buttons

To place standard registration buttons in the overlap section or any other section, you can use the following code. Copy and paste this code into your event greeting page, then revise as necessary.

[[?x1x2x::x[[E42:[[S334:fr_id]]:status]]x::
  [[?x[[E48:[[S334:fr_id]]:part-type-id]]x::xx::
    <a class="button button--spaced button--teal" href="TRR[[?x1027x::x[[S4]]x::Preview::]]?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=none">Register as an Individual</a>
    <a class="button button--spaced button--red" href="TRR[[?x1027x::x[[S4]]x::Preview::]]?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=new">Create a Team</a>
    <a class="button button--spaced button--teal" href="TRR[[?x1027x::x[[S4]]x::Preview::]]?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=existing">Join a Team</a>
  ::]]
  <a class="button button--spaced" href="TR?pg=pfind&fr_id=[[S334:fr_id]]&fr_search_type=participant&fr_find_search=Search&submit=true">Find a Participant</a>
  <a class="button button--spaced" href="TR?pg=pfind&fr_id=[[S334:fr_id]]&fr_search_type=team&fr_find_search=Search&submit=true">Find a Team</a>
::]]

The logic in code is defined as follows:

if (event accepts gifts or registrations) {  
  if (user is not registered for the event) {  
    display 3 registration buttons  
  } else {  
    display nothing  
  }  
  always display find a team and participant buttons  
} else {  
  don't display anything  
}

# Collapsible Registration Buttons

To place collapsible registration buttons in the overlap section or any other section, you can use the following code. Copy and paste this code into your event greeting page, then revise as necessary.

<div class="start-fundraiser start-fundraiser--teams-allowed">
  [[?x[[E48:[[S334:fr_id]]:part-type-id]]x::xx::
    [[?x1x2x::x[[E42:[[S334:fr_id]]:status]]x::
      <a class="button button--red button--chevron button--spaced link link--toggle" href="[[S8]]#start-fundraiser">Start a Fundraiser</a>
    ::]]
    <a class="button button--teal button--spaced" href="TR?pg=pfind&fr_id=[[S334:fr_id]]&fr_search_type=participant&fr_find_search=Search&submit=true">Find a Fundraiser</a>

    <div class="section section--start-fundraiser hidden" id="start-fundraiser">
      <p class="text--bold">Please choose how you would like to fundraise:</p>
      <div class="column__row column__row--3-to-1 column__row--center">
        <div class="column column--padded-sides">
          <a class="button button--spaced button--red button--large" href="TRR[[?x1027x::x[[S4]]x::Preview::]]?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=none">Join as<br /> an Individual</a>
          <p><em>I want to create a page to fundraise on my own.</em></p>
        </div>
        <div class="column column--padded-sides">
          <a class="button button--spaced button--red button--large" href="TRR[[?x1027x::x[[S4]]x::Preview::]]?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=new">Create<br /> a Team</a>
          <p><em>I want to be a team captain to build a team that will fundraise together. Every team member will get a fundraising page - all totals roll into the team page total.</em></p>
        </div>
        <div class="column column--padded-sides">
          <a class="button button--spaced button--red button--large" href="TRR[[?x1027x::x[[S4]]x::Preview::]]?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=existing">Join<br /> a Team</a>
          <p><em>I want to create my own fundraising page under an existing team - my total raised will roll into the team page total.</em></p>
          </div><!-- /.column -->
      </div><!-- /.column__row -->
    </div><!-- /.section -->
  ::]]
</div><!-- /.start-fundraiser -->

<div class="start-fundraiser start-fundraiser--teams-not-allowed">
  [[?x[[E48:[[S334:fr_id]]:part-type-id]]x::xx::
    [[?x1x2x::x[[E42:[[S334:fr_id]]:status]]x::
      <a class="button button--red button--spaced" href="TRR[[?x1027x::x[[S4]]x::Preview::]]?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=none">Start a Fundraiser</a>
    ::]]
    <a class="button button--teal button--spaced" href="TR?pg=pfind&fr_id=[[S334:fr_id]]&fr_search_type=participant&fr_find_search=Search&submit=true">Find a Fundraiser</a>
  ::]]
</div><!-- /.start-fundraiser -->

The logic in code is defined as follows:

Render 2 sections in HTML, the section that doesn't apply to the current event will be hidden by JavaScript, as we can't detect this logic in any other way

  • buttons for events that allows to form teams, the container <div> must contain the classes start-fundraiser start-fundraiser--teams-allowed
  • button for events that don't allow to form teams, the container <div> must contain the classes start-fundraiser start-fundraiser--teams-not-allowed

When teams are allowed to be formed for the event:

if (event accepts gifts or registrations) {
  if (user is not registered for the event) {
    display 2 registration buttons, the button that expands the hidden section must have class `link--toggle` & destination `[[S8]]#start-fundraiser`
    display registration buttons, the `<div>` must contain id `start-fundraiser`, so it can be associated with the expand button & class `hidden`, so it is hidden on page load, the inner content can contain any HTML, the provided example renders 3 registration buttons & descriptions in a column layout
  } else {
    display nothing
  }
  always display find a fundaiser button
} else {
  don't display anything
}

When teams are not allowed to be formed for the event:

if (event accepts gifts or registrations) {
  if (user is not registered for the event) {
    display 1 registration button, that takes user to register as an individual registration page
  } else {
    display nothing
  }
  always display find a fundaiser button
} else {
  don't display anything
}

# Total Raised Section

<section class="section section--biscuit-light section--tr-total-raised"
  data-s-region-id="Panel|Total Raised|Region 3 of 6||[[S80:userState]]">
  <div class="section__container">
    <h2 class="text--center text--black">Total Raised:</h2>
    <h2 class="text--center text--red">[[E130:[[E42:[[S334:fr_id]]:dollars]] currency ".00" "" replaceall]] of [[E130:[[E42:[[S334:fr_id]]:goal]] currency ".00" "" replaceall]] Goal</h2>
    <p class="text--center">Eprenduc iactect mposseque, sam es escaite sitempe liquatu ritate acero tet et officiens. Idi omnis intium quoditataque voluptati dolectate prem quae. </p>
    <div class="column__row column__row--3">
      <div class="column" data-s-region-id="Grid|Total Raised {Column Title}|Region 3 of 6|Grid 1 of 3|[[S80:userState]]">
        <div class="box__content"> <a data-link-type="image" class="box__image-link" href="[[S8]]#"><img class="box__image" alt="" src="[[S80:staticAssetsBaseUrl]]/images/content/pagebuilder/DIY_Birthday_FundraisingPhoto1_360.jpg"></a>
          <div class="box__overlay">
            <div class="box__subtitle"><a class="box__link" href="[[S8]]#">Lorem Ipsum</a></div>
            <h6 class="box__heading"><a class="box__link" href="[[S8]]#">Lorem Ipsum</a></h6>
          </div>
        </div>
      </div>
      <div class="column" data-s-region-id="Grid|Total Raised {Column Title}|Region 3 of 6|Grid 2 of 3|[[S80:userState]]">
        <div class="box__content"> <a data-link-type="image" class="box__image-link" href="[[S8]]#"><img class="box__image" alt="" src="[[S80:staticAssetsBaseUrl]]/images/content/pagebuilder/DIY_Birthday_FundraisingPhoto2_360.jpg"></a>
          <div class="box__overlay">
            <div class="box__subtitle"><a class="box__link" href="[[S8]]#">Birthday Cake</a></div>
            <h6 class="box__heading"><a class="box__link" href="[[S8]]#">Candles are great</a></h6>
          </div>
        </div>
      </div>
      <div class="column" data-s-region-id="Grid|Total Raised {Column Title}|Region 3 of 6|Grid 3 of 3|[[S80:userState]]">
        <div class="box__content"> <a data-link-type="image" class="box__image-link" href="[[S8]]#"><img class="box__image" alt="" src="[[S80:staticAssetsBaseUrl]]/images/content/pagebuilder/DIY_Birthday_FundraisingPhoto3_360.jpg"></a>
          <div class="box__overlay">
            <div class="box__subtitle"><a class="box__link" href="[[S8]]#">Lorem Ipsum</a></div>
            <h6 class="box__heading"><a class="box__link" href="[[S8]]#">Lorem Ipsum</a></h6>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

More details to come

# Top Teams & Fundraisers Section

<section class="section section--white section--no-padding"
  data-s-region-id="Panel|Top Fundraisers & Teams|Region 4 of 6||[[S80:userState]]">
  <div class="column__row--2 column--border">
    <div class="column top_fundraisers" data-s-region-id="Grid|Top Fundraisers|Region 4 of 6|Grid 1 of 2|[[S80:userState]]">
      <div class="top_fundraisers-block">
        <h2 class="text--uppercase"><span>Top Fundraisers</span></h2>
        <div class="top_fundraisers-totals">
          [[E42:[[S334:fr_id]]:top-participants:10]]
        </div>
        [[?x1x2x::x[[E42:[[S334:fr_id]]:status]]x::
          <p><a class="button button--teal fundraise" href="/site/TR?fr_id=[[S334:fr_id]]&pg=topparticipantlist">See More Fundraisers</a></p>::]]
      </div>
    </div>
    <div class="column top_teams" data-s-region-id="Grid|Top Teams|Region 4 of 6|Grid 2 of 2|[[S80:userState]]">
      <div class="top_teams-block">
       <h2 class="text--uppercase"><span>Top Teams</span></h2>
        <div class="top_teams-totals">
          [[E42:[[S334:fr_id]]:top-teams:10]]
        </div>
       <p><a class="button button--teal donate" href="/site/TR?fr_id=[[S334:fr_id]]&pg=teamlist">See All Teams</a></p>
      </div>
    </div>
  </div>
</section>

More details to come

# Why We Fundraise Section

<section class="section section--biscuit-light" id="section--why-we-fundraise"
  data-s-region-id="Panel|Why We Fundraise|Region 5 of 6||[[S80:userState]]">
  <div class="section__container">
    <h2 class="text--uppercase text--center text--red">Why we fundraise</h2>
    <div id="slideshow">
      <div class="column__row column__row--2">
        <div class="column text--center" data-s-region-id="Grid|Why We Fundraise Slideshow|Region 5 of 6|Grid 1 of 2|[[S80:userState]]">
          <picture> <img alt="" src="[[S80:staticAssetsBaseUrl]]/images/content/pagebuilder/2019-la-gala-centennial-celebration-email-banner.jpg"> </picture>
        </div>
        <div class="column text--left" data-s-region-id="Grid|Why We Fundraise Slideshow|Region 5 of 6|Grid 2 of 2|[[S80:userState]]">
          <br/><br/><br/><br/>
          <h6>Fairfield Schools</h6>
          <em>Fairfield, CT</em>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div><!-- /.column -->
      </div><!-- /.column__row -->

      <div class="column__row column__row--2">
        <div class="column text--center" data-s-region-id="Grid|Why We Fundraise Slideshow|Region 5 of 6|Grid 1 of 2|[[S80:userState]]">
          <picture> <img alt="" src="//placehold.it/600x600?text=Slide+2+Text"> </picture>
        </div>
        <div class="column text--left" data-s-region-id="Grid|Why We Fundraise Slideshow|Region 5 of 6|Grid 2 of 2|[[S80:userState]]">
          <br/><br/><br/><br/>
          <h6>Denver Schools</h6>
          <em>Denver, CO</em>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div><!-- /.column -->
      </div><!-- /.column__row -->

      <div class="column__row column__row--2">
        <div class="column text--center" data-s-region-id="Grid|Why We Fundraise Slideshow|Region 5 of 6|Grid 1 of 2|[[S80:userState]]">
          <picture> <img alt="" src="//placehold.it/600x600?text=Slide+3+Text"> </picture>
        </div>
        <div class="column text--left" data-s-region-id="Grid|Why We Fundraise Slideshow|Region 5 of 6|Grid 2 of 2|[[S80:userState]]">
          <br/><br/><br/><br/>
          <h6>Slide 3</h6>
          <em>Denver, CO</em>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
        </div><!-- /.column -->
      </div><!-- /.column__row -->

    </div><!-- /.slideshow -->

    <p class="text--center"><a href="[[S8]]#" class="button button--teal">Share your story</a></p>
    <div class="column__row column__row--center">
      <div class="column">
        [[?x[[E48:[[S334:fr_id]]:part-type-id]]x::xx::
          [[?x1x2x::x[[E42:[[S334:fr_id]]:status]]x::
            <a class="button button--spaced button--red" href="TRR[[?x1027x::x[[S4]]x::Preview::]]?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=new">Create a Team</a>
            <a class="button button--spaced button--teal" href="TRR[[?x1027x::x[[S4]]x::Preview::]]?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=existing">Join a Team</a>
            <a class="button button--spaced button--teal" href="TRR[[?x1027x::x[[S4]]x::Preview::]]?pg=tfind&fr_id=[[S334:fr_id]]&fr_tm_opt=none">Register as an Individual</a>
          ::]]
          <a class="button button--spaced" href="TR?pg=pfind&fr_id=[[S334:fr_id]]&fr_search_type=participant&fr_find_search=Search&submit=true">Find a Participant</a>
          <a class="button button--spaced" href="TR?pg=pfind&fr_id=[[S334:fr_id]]&fr_search_type=team&fr_find_search=Search&submit=true">Find a Team</a>
        ::]]
      </div><!-- /.column -->
    </div><!-- /.column__row -->
  </div><!-- /.section__container -->
</section><!-- /.section -->

More details to come

# Sponsors Section

<section class="section section--plum" id="section--sponsors"
  data-s-region-id="Panel|Sponsors|Region 6 of 6||[[S80:userState]]">
  <div class="section__container">
    <h2 class="heading--smaller text--no-case text--white text--center">Thank you to our Presenting Sponsors</h2>
      <div class="sponsors">
        <picture class="sponsors__item sponsors__item--large"><img alt="${imageDescription}" src="//placehold.it/350x150?text=Large Logo 350x150" class="sponsors__image"></picture>
        <a class="sponsors__item sponsors__item--large" title="${sponsorName}" href="[[S8]]#"><img alt="${imageDescription}" src="//placehold.it/350x150?text=Large Logo 350x150" class="sponsors__image"></a>
        <a class="sponsors__item sponsors__item--large" title="${sponsorName}" href="[[S8]]#"><img alt="${imageDescription}" src="//placehold.it/350x150?text=Large Logo 350x150" class="sponsors__image"></a>
        <a class="sponsors__item" title="${sponsorName}" href="[[S8]]#"><img alt="${imageDescription}" src="//placehold.it/200x75?text=Small Logo 200x75" class="sponsors__image" /></a>
        <a class="sponsors__item" title="${sponsorName}" href="[[S8]]#"><img alt="${imageDescription}" src="//placehold.it/200x75?text=Small Logo 200x75" class="sponsors__image" /></a>
        <a class="sponsors__item" title="${sponsorName}" href="[[S8]]#"><img alt="${imageDescription}" src="//placehold.it/200x75?text=Small Logo 200x75" class="sponsors__image" /></a>
        <a class="sponsors__item" title="${sponsorName}" href="[[S8]]#"><img alt="${imageDescription}" src="//placehold.it/200x75?text=Small Logo 200x75" class="sponsors__image" /></a>
        <a class="sponsors__item" title="${sponsorName}" href="[[S8]]#"><img alt="${imageDescription}" src="//placehold.it/200x75?text=Small Logo 200x75" class="sponsors__image" /></a>
      </div>
  </div><!-- /.section__container -->
</section><!-- /.section -->

Create the sponsor logos in dimesions of 350 x 150px for large logos or 200 x 75px for small logos and upload them to Luminate image library.

Replace:

  • ${imageDescription} - with the description of the image or leave blank
  • //placehold.it/200x75?text=Small Logo 200x75 - with [[S80:staticAssetsBaseUrl]]/images/content/pagebuilder/${nameOfImage}, where ${nameOfImage} is replaced by the filename of the image in Luminate libary

Remove:

  • Any unused sponsors images with default content

← Fundraising tools page →