Is it possible to customize TeamRaiser Pages components?

Chang Liu

Is the page layout and components customizable? I'm using the 'Responsive' Layout. Or, is it possible to create another layout?

What about the builtin components? Are we able to change the participant/team search layout (changing the HTML code)? E.g., if I don't want to use one search box for searching the participant and team, is it possible?


Thanks!

Brian Mucha

Quite a bit is possible.


You can use the PageWrapper to for some customizations, and some fields in the Customize Pages configuration.


For instance the Default Participant Page has a Page Footer field that accepts HTML, which the users cannot access. We use that to insert a custom sidebar that has our own thermometer, badge scroll, PDF, etc.


Here's a sample from one of our events.


http://foundation.luriechildrens.org/site/TR/Events/StepUpforKids?px=1105632&pg=personal&fr_id=1750

<div class="sideBarFundraising">

    <div id="parDon">

        <div class="title">My Fundraising</div>

        <div class="parGoal">

            <h3>[[E48:[[S334:fr_id]]-[[S334:px]]:goal]]</h3>

            <span class="calloutLabel">Goal</span>

        </div>

        <div class="parDollars">

            <h3>[[E48:[[S334:fr_id]]-[[S334:px]]:dollars]]</h3>

            <span class="calloutLabel">Achieved</span>

        </div>

    </div>


        [[E36:top_gifts_list,[[S80:frId]],0,[[E48:[[S334:fr_id]]-[[S334:px]]:participant-id]],SCROLLING,SUM,100,Fundraising Honor Roll]]


    <div id="fundraisingDownloads" class="sidebar-box">

        <h3>PDF Downloads</h3>

        <a class="PDF" href="../_wrappers/stepup/2018/docs/step_up_2018_donation_form.pdf" target="_blank">Donation Form</a>

    </div>

</div>


[[S51:reus_teamraiser_progressive_milestones]]


JQuery comes in pretty handy, and plenty of CSS to override what the stock styles do.


If you use your PageWrapper, you can identify the current page using S8. We do that in the Page Header Elements to include special CSS files depending on the current page.

[[?[[S8]]::pg=entry::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-home.css">

::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-inside.css">

]]


In fact we do a lot of this!

[[?[[S8]]::Donation2::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-donate.css">

::

[[?[[S8]]::pg=topparticipantlist::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-participantlist.css">

::

[[?[[S8]]::pg=personal::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-common.css">

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-participant.css">

::

[[?[[S8]]::page_type=fr_personal::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-participant.css">

::

[[?[[S8]]::pg=teamlist::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-teamlist.css">

::

[[?[[S8]]::pg=team::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-common.css">

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-team.css">

::

[[?[[S8]]::page_type=fr_team_page::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-team.css">

::

[[?[[S8]]::pg=complist::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-companylist.css">

::

[[?[[S8]]::pg=company::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-company.css">

::

[[?[[?[[S8]]::TRR::T::]][[?[[S8]]::pg=rthanks::T::]]::T::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-registration.css">

::

[[?[[S8]]::sid=1007::

<link rel="stylesheet" href="../_resources-teamraiser/reus_teamraiser_impact/css/impact.css">

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-impact.css">

::

[[?[[S8]]xx::/site/TRxx::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-pfind.css">

::

[[?[[S8]]::pg=pfind::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-pfind.css">

::

[[?[[S8]]::ConsProfileUser::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-profile.css">

::

[[?[[S8]]::ConsInterestsUser::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-profile.css">

::

[[?[[S8]]::ServiceCenter::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-profile.css">

::

[[?[[S8]]::TellAFriend::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-taf.css">

::

]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]


[[?[[S8]]::sid=1019::

<link rel="stylesheet" href="../_resources-teamraiser/reus_css/share-a-story.css">

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-story.css">

::

[[?[[S8]]::sid=1004::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-coordinator.css">

::

[[?[[S8]]::sid=2200::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-social.css">

::]]]]]]

Brian Mucha

Also look at the APIs at http://open.convio.com. You can do quite a bit by using CSS and JQuery to manipulate the generated page, but you can also just rewrite the functionality entriely using the API and LuminateExtend. People are even completely replacing the stock registration process with completely custom code.

Chang Liu

Thanks! If I want to change 'Find a Participant' page, and I only have this HTML area input, are you suggesting me to insert the new layout HTML with parameter tags in there, and hide the builtin components using CSS? I'm not sure what you mean by 'We use that to insert a custom sidebar that has our own thermometer, badge scroll, PDF, etc.', could you explain how the search box is inserted into the 'Find a Participant' page?


And where can I find the parameter tags like '[[E48:[[S334:fr_id]]-[[S334:px]]:goal]]'? Is there a documentation somewhere?

Brian Mucha:

Quite a bit is possible.


You can use the PageWrapper to for some customizations, and some fields in the Customize Pages configuration.


For instance the Default Participant Page has a Page Footer field that accepts HTML, which the users cannot access. We use that to insert a custom sidebar that has our own thermometer, badge scroll, PDF, etc.


Here's a sample from one of our events.


http://foundation.luriechildrens.org/site/TR/Events/StepUpforKids?px=1105632&pg=personal&fr_id=1750

<div class="sideBarFundraising">

    <div id="parDon">

        <div class="title">My Fundraising</div>

        <div class="parGoal">

            <h3>[[E48:[[S334:fr_id]]-[[S334:px]]:goal]]</h3>

            <span class="calloutLabel">Goal</span>

        </div>

        <div class="parDollars">

            <h3>[[E48:[[S334:fr_id]]-[[S334:px]]:dollars]]</h3>

            <span class="calloutLabel">Achieved</span>

        </div>

    </div>


        [[E36:top_gifts_list,[[S80:frId]],0,[[E48:[[S334:fr_id]]-[[S334:px]]:participant-id]],SCROLLING,SUM,100,Fundraising Honor Roll]]


    <div id="fundraisingDownloads" class="sidebar-box">

        <h3>PDF Downloads</h3>

        <a class="PDF" href="../_wrappers/stepup/2018/docs/step_up_2018_donation_form.pdf" target="_blank">Donation Form</a>

    </div>

</div>


[[S51:reus_teamraiser_progressive_milestones]]


JQuery comes in pretty handy, and plenty of CSS to override what the stock styles do.


If you use your PageWrapper, you can identify the current page using S8. We do that in the Page Header Elements to include special CSS files depending on the current page.

[[?[[S8]]::pg=entry::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-home.css">

::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-inside.css">

]]


In fact we do a lot of this!

[[?[[S8]]::Donation2::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-donate.css">

::

[[?[[S8]]::pg=topparticipantlist::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-participantlist.css">

::

[[?[[S8]]::pg=personal::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-common.css">

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-participant.css">

::

[[?[[S8]]::page_type=fr_personal::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-participant.css">

::

[[?[[S8]]::pg=teamlist::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-teamlist.css">

::

[[?[[S8]]::pg=team::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-common.css">

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-team.css">

::

[[?[[S8]]::page_type=fr_team_page::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-team.css">

::

[[?[[S8]]::pg=complist::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-companylist.css">

::

[[?[[S8]]::pg=company::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-company.css">

::

[[?[[?[[S8]]::TRR::T::]][[?[[S8]]::pg=rthanks::T::]]::T::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-registration.css">

::

[[?[[S8]]::sid=1007::

<link rel="stylesheet" href="../_resources-teamraiser/reus_teamraiser_impact/css/impact.css">

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-impact.css">

::

[[?[[S8]]xx::/site/TRxx::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-pfind.css">

::

[[?[[S8]]::pg=pfind::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-pfind.css">

::

[[?[[S8]]::ConsProfileUser::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-profile.css">

::

[[?[[S8]]::ConsInterestsUser::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-profile.css">

::

[[?[[S8]]::ServiceCenter::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-profile.css">

::

[[?[[S8]]::TellAFriend::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-taf.css">

::

]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]


[[?[[S8]]::sid=1019::

<link rel="stylesheet" href="../_resources-teamraiser/reus_css/share-a-story.css">

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-story.css">

::

[[?[[S8]]::sid=1004::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-coordinator.css">

::

[[?[[S8]]::sid=2200::

<link rel="stylesheet" href="../_wrappers/stepup/2018/css/layout-tweaks-social.css">

::]]]]]]

 

Brian Mucha

S-Tag docs: https://www.blackbaud.com/support/howto/coveo/luminate-online/Subsystems/S-Tags/Concepts/Admin_S-Tags.html


> ...insert the new layout HTML with parameter tags in there...could you explain how the search box is inserted into the 'Find a Participant' page?


Yes, exactly - depending on what you want to do. The cool thing is this is how you can insert your own html into the page. There's a lot you can do with that. You could just add some CSS and style the existing component better. Or you could hide the existing search form and use the S44 search component. Or if you want to get complicated, you could add a bunch of html and javascript to completely customize search using the API.


The sidebar thing was just an example of something similar. I don't have a find a participant customization, but we do something like this on personal pages. There we replace the stock thermo and badge components with our own code.


For any of these options it will be super handy to know some CSS at least, and a bit of html. (And javascript for the api option.)

Colleen Gutierrez

Thanks for sharing that URL, Brian, which comes from the help docs as stored in the Knowledgebase.


If you'd like to look at the S-Tag documents with a side Table of Contents, you can also use this URL:   https://www.blackbaud.com/files/support/helpfiles/luminate-online/help/luminateonline.html#../Subsystems/S-Tags/Content/Concepts/Admin_S-Tags.html


 

Chang Liu

Thank you both for the reply. I'm not doing crazy changes and I'm looking for a quick way to change the HTML layout of those builtin components, like moving some elements below others etc., so if I want to customize a S35 TeamRaiser Thermometer, I've found S48 Tag to get the [[S48:1170:goal]] and [[S48:1170:dollars]], and then put them in the HTML, is that right?


For each TeamRaiser, we can display a thermometer, do you have a tag to show thermometer for all the TeamRaisers on the PageWrapper? Or, can you help me find a tag giving me the total raised dollars and total goals of all team raisers? Thanks!

Brian Mucha:

S-Tag docs: https://www.blackbaud.com/support/howto/coveo/luminate-online/Subsystems/S-Tags/Concepts/Admin_S-Tags.html


> ...insert the new layout HTML with parameter tags in there...could you explain how the search box is inserted into the 'Find a Participant' page?


Yes, exactly - depending on what you want to do. The cool thing is this is how you can insert your own html into the page. There's a lot you can do with that. You could just add some CSS and style the existing component better. Or you could hide the existing search form and use the S44 search component. Or if you want to get complicated, you could add a bunch of html and javascript to completely customize search using the API.


The sidebar thing was just an example of something similar. I don't have a find a participant customization, but we do something like this on personal pages. There we replace the stock thermo and badge components with our own code.


For any of these options it will be super handy to know some CSS at least, and a bit of html. (And javascript for the api option.)