Custom Teamraiser Layouts and CSS

Options
Frank McCready
Frank McCready ✭
Tenth Anniversary Photogenic First Reply
in Blackbaud Luminate Online® & Blackbaud TeamRaiser® Discussions

There are a few things I am looking to do specifically:

 

Customize CSS and layout for sidebars on pages.  (The ones that contain things like the honor roll and thermometer)

 

Change the layout of certian pages to custom layouts.

 

Change the images for the thermometer and the CSS for the container of the thermometer.

 

Edit the CSS for the honor roll.

 

 

Tagged:

Comments

  • Brian Mucha
    Brian Mucha ✭
    Ancient Membership Facilitator 4 Name Dropper Photogenic

    We do a ton of this sort of thing by adding linked style sheets to the page wrapper.

     

    You can even use conditionals to only load a sheet on specific pages. Here's a few of ours...

     

    http://foundation.luriechildrens.org/site/TR?fr_id=1410&pg=entry

     

    http://foundation.luriechildrens.org/site/TR?fr_id=1490&pg=entry

     

    http://foundation.luriechildrens.org/site/TR?fr_id=1510&pg=entry

     

  • Daniel Hartanto
    Daniel Hartanto ✭
    Ancient Membership Facilitator 2 Name Dropper Photogenic

    Hi and welcome Frank !

     

    If you are willing to also use Javascript and one of its library (i.e. JQuery) alongside the Convio S-tag. and CSS, you can actually customize the Teamraiser page almost to your heart content and not just restricted within the constraint of the out-of-the-box layout. 

     

    Just to wet the appetite with examples of what you could do:

    With Javascript, you can actually hide the out-of-the-box container, and pull and plug the content within it onto your template (i.e. jQuery.insertBefore() , insertAfter()), create your own custom thermometer after retrieving the donation raised toward goal via S-tag, not to mention adding additional contents that otherwise might not be available right away.

     

    i.e.

    http://stepout.diabetes.org/site/TR/StepOut/StepOutContent?fr_id=9930&pg=entry 

     

    It will be an undertaking, but at the end, you have more flexibility and it opens up further potentials. Most importantly the community here are pretty active helping each other in discovering what the platform might be capable of.

     

    regards,

    Daniel

     

     

  • Brian Mucha
    Brian Mucha ✭
    Ancient Membership Facilitator 4 Name Dropper Photogenic
    Daniel Hartanto:

    Hi and welcome Frank !

     

    If you are willing to also use Javascript and one of its library (i.e. JQuery) alongside the Convio S-tag. and CSS, you can actually customize the Teamraiser page almost to your heart content and not just restricted within the constraint of the out-of-the-box layout. 

     

    Just to wet the appetite with examples of what you could do:

    With Javascript, you can actually hide the out-of-the-box container, and pull and plug the content within it onto your template (i.e. jQuery.insertBefore() , insertAfter()), create your own custom thermometer after retrieving the donation raised toward goal via S-tag, not to mention adding additional contents that otherwise might not be available right away.

     

    i.e.

    http://stepout.diabetes.org/site/TR/StepOut/StepOutContent?fr_id=9930&pg=entry 

     

    It will be an undertaking, but at the end, you have more flexibility and it opens up further potentials. Most importantly the community here are pretty active helping each other in discovering what the platform might be capable of.

     

    regards,

    Daniel

     

     

    We used the jquery trick Dan describes to replace the milestone widget with one that has a few new milestone types.

     

    http://foundation.luriechildrens.org/site/TR/Events/RunforGus?px=1494931&pg=personal&fr_id=1510

     

  • Frank McCready
    Frank McCready ✭
    Tenth Anniversary Photogenic First Reply
    Brian Mucha:

    We do a ton of this sort of thing by adding linked style sheets to the page wrapper.

     

    You can even use conditionals to only load a sheet on specific pages. Here's a few of ours...

     

    http://foundation.luriechildrens.org/site/TR?fr_id=1410&pg=entry

     

    http://foundation.luriechildrens.org/site/TR?fr_id=1490&pg=entry

     

    http://foundation.luriechildrens.org/site/TR?fr_id=1510&pg=entry

     

    Great!  Adding stylesheets to the page wrappers should work for most of the pages.  Also, hiding the out of the box stuff with some javascript and creating my own will be the best solution for those sidebars.

     

    Thanks for your responses! 

  • Christina Relacion
    Christina Relacion ✭
    Ancient Membership Facilitator 1 Name Dropper Photogenic
    Daniel Hartanto:

    Hi and welcome Frank !

     

    If you are willing to also use Javascript and one of its library (i.e. JQuery) alongside the Convio S-tag. and CSS, you can actually customize the Teamraiser page almost to your heart content and not just restricted within the constraint of the out-of-the-box layout. 

     

    Just to wet the appetite with examples of what you could do:

    With Javascript, you can actually hide the out-of-the-box container, and pull and plug the content within it onto your template (i.e. jQuery.insertBefore() , insertAfter()), create your own custom thermometer after retrieving the donation raised toward goal via S-tag, not to mention adding additional contents that otherwise might not be available right away.

     

    i.e.

    http://stepout.diabetes.org/site/TR/StepOut/StepOutContent?fr_id=9930&pg=entry 

     

    It will be an undertaking, but at the end, you have more flexibility and it opens up further potentials. Most importantly the community here are pretty active helping each other in discovering what the platform might be capable of.

     

    regards,

    Daniel

     

     

    Hi Daniel,

     

    I'm curious how you did the Facebook comment box on the team and personal pages? Is that javascript or a special widget that has been added?

     

    Thanks for sharing!

  • Daniel Hartanto
    Daniel Hartanto ✭
    Ancient Membership Facilitator 2 Name Dropper Photogenic
    Christina Relacion:

    Hi Daniel,

     

    I'm curious how you did the Facebook comment box on the team and personal pages? Is that javascript or a special widget that has been added?

     

    Thanks for sharing!

    Hi Christina,

     

    For the Facebook comment box within the team and personal pages, I am using

     

    https://developers.facebook.com/docs/plugins/comments 

     

    It's Javascript based, facebook will provide you with the core javascript snippet associated with the widget upon defining the parameter initially.

     

    You could then tweak / override the initial snippet accordingly i.e. layout wise like making it responsive friendly (tips. you could modify the static URL for the div data-href, replace it with template URL of TeamRaiser team page or personal page where you could dynamically retrieved and insert the TeamRaiser ID, constituent ID, or Team ID from the S-tag)

     

     

    For the "Get Social!" on the landing / entry page of the event, I am using 

     

    https://developers.facebook.com/docs/plugins/like-box-for-pages 

     

    Same mechanism as the above, it's javascript based. Also I am tapping into Sponsor Field within the Customize Greeting page where the field staff could then put their local event facebook page URL to be dynamically retrieved through S-tag and made into the value of the data-href of that div that renders the box.

     

    hope it helps,

     

    regards

     

    Daniel

     

Categories