XHTML and TeamRaiser Pages

Options
John Thornton
John Thornton ✭
Ancient Membership First Reply
in Blackbaud Luminate Online® & Blackbaud TeamRaiser® Discussions

How can I get my TeamRaiser company/team/personal pages to display correctly in XHTML. These pages dont span the full width of the page frame like the informational pages do. This only happens with XHTML doctype, works fine in HTML quirks mode.

 

I need to use XHTML in order to get my drop down menu to work with Internet Explorer. Any solutions on how I can get these pages to display correctly in XHTML or how to get my menue to display correctly in IE using HTML 4.0?

 

Ive noticed that other TeamRaisers have this same issue:

Avon: http://info.avonfoundation.org/site/TR/Walk/Charlotte?px=5883234&pg=personal&fr_id=2080

 

I found one example in which both drop downs and full pages are present with HTML 4.0. Cant figure out what theyre doing that im not:

Susan Komen: http://www.the3day.org/site/TR/2012/General?pg=team&fr_id=1766&team_id=197356

 

Here is our TeamRaiser: http://www.newhorizons-sfv.org/site/TR?fr_id=1070&pg=entry

Tagged:

Comments

  • John Thornton
    John Thornton ✭
    Ancient Membership First Reply

    Seems like I might have answered my own question. After some trial and error Ive discovered that the UserGlobalStyle.css holds the syle that sets the width of application area in these custom pages. This appears to be the default styling:

     

    .appArea {

        width: 650px;

        margin-left: 0px;

        margin-top: 10px;

    }

     

    I upped the width to 850 to fit my page and it looks like that has done the trick! Now on to figuring out how to customize the remainder of the default fundraising pages!

  • Kent Gilliam
    Kent Gilliam Blackbaud Employee
    Ancient Membership Facilitator 4 Name Dropper Photogenic
    John Thornton:

    Seems like I might have answered my own question. After some trial and error Ive discovered that the UserGlobalStyle.css holds the syle that sets the width of application area in these custom pages. This appears to be the default styling:

     

    .appArea {

        width: 650px;

        margin-left: 0px;

        margin-top: 10px;

    }

     

    I upped the width to 850 to fit my page and it looks like that has done the trick! Now on to figuring out how to customize the remainder of the default fundraising pages!

    One thing to be careful about with the TeamRaiser CSS .appArea class is that it affects the main areas on each default page within TeamRaiser. Also, when you override the default, then you can't enable the configuration that allows participants to choose their design of their personal page instead of a set default because if the user chooses "Picture left" or "Picture right" or another option then really only one of the settings will even look good.

     

    What I always do is use custom pages or embeded Pagebuilder pages and generate TeamRaiser components with S-tags. This enables you to control the layouts of the pages outside of the TeamRaiser default pages much better. Here is an example of one I did last year: http://www.sdhumane.org/site/TR/Events/2011Walk?fr_id=1080&pg=entry. This is the TR homepage for this campaign but the content is actually Pagebuilder content embedded on the event homepage.

     

    Whatever you do, when you change a default CSS, make sure you test it in all of the design options if you want to allow participants to choose their own personal page design. You might be able to get it looking good in one or two options but I've never found a way to mess with the CSS and allow different personal page design options and all of them look good.

     

    Good luck and let me know if you need any help!

    Kent

Categories