Style sheet for Default Personal Pages

Cara ONeil

We need to make some changes to the default personal pages in our TeamRaiser. However, in order to do this, I need to make some changes to the style sheet associated with this default.

 

It's difficult to tell which style sheet this is, and where to find it (I do have access to our files via FTP). Any thoughts or advice?

Ken Cantu

Hi Cara,

 

There are a couple of ways of doing this. Can you post a link to a personal page example and describe what you want to change?

 

Thanks,

Ken

Cara ONeil

Ken Cantu:

Hi Cara,

 

There are a couple of ways of doing this. Can you post a link to a personal page example and describe what you want to change?

 

Thanks,

Ken

I got some assistance from our assigned TR tech with one of the items already, actually, but for future reference I would still appreciate knowing more about the setup of the personal pages.

 

Here's an example page: http://ohs.convio.net/site/TR/Events/TeamRaiser?px=1401121&pg=personal&fr_id=1130

 

We implemented some custom badges this year, to supplement the milestones. The only place within TR to add code to the default personal page is in the footer. I was searching for the right place to add instructions to tell the custom badge div to sit higher up on the page, near the text block.

 

Our tech suggested that I edit a reusable PageBuilder page that controls SOME of our TR styles, but not all. I felt too blind to effectively add the needed CSS to this page, though, because I couldn't see where most of the personal page elements were controlled. Using Firebug, I could see which root stylesheets are involved, but I didn't want to make global changes with unintended consequences.

 

For our next TR, I'd really like to be able to style the whole personal page differently, rather than being forced to select from one of Convio's pre-determined styles. On the example page, you can see that we still had to go with a Convio-generated layout (the blue colored box and its internal elements).

Ken Cantu

Cara O'Neil:

I got some assistance from our assigned TR tech with one of the items already, actually, but for future reference I would still appreciate knowing more about the setup of the personal pages.

 

Here's an example page: http://ohs.convio.net/site/TR/Events/TeamRaiser?px=1401121&pg=personal&fr_id=1130

 

We implemented some custom badges this year, to supplement the milestones. The only place within TR to add code to the default personal page is in the footer. I was searching for the right place to add instructions to tell the custom badge div to sit higher up on the page, near the text block.

 

Our tech suggested that I edit a reusable PageBuilder page that controls SOME of our TR styles, but not all. I felt too blind to effectively add the needed CSS to this page, though, because I couldn't see where most of the personal page elements were controlled. Using Firebug, I could see which root stylesheets are involved, but I didn't want to make global changes with unintended consequences.

 

For our next TR, I'd really like to be able to style the whole personal page differently, rather than being forced to select from one of Convio's pre-determined styles. On the example page, you can see that we still had to go with a Convio-generated layout (the blue colored box and its internal elements).

So this is what I would do. I agree with your web contact, I would add the CSS to the reusable page for your TR wrapper. Because you are putting CSS into the page you are using the embed method of CSS which will take precedence over any linked stylesheets. This also ensures that if you have other TeamRaisers that you might not want to change the styles on, you aren't messing with any of the master CSS files.  Add your code to the bottom of this reusable page and use Firebug to determine which element you want to manipulate. Then wrap your CSS in this code if you are afraid the styles might conflict with other parts of the TeamRaiser module:

 

[[?xpersonalx::x[[S334g]]x::

<!-- This renders your CSS if on a personal page. -->

::

<!-- This renders in any other case or you can leave blank-->

]]

 

This basically checks the URL and says, if the parameter "pg" equals/contains "personal" then show content, if not then do something else.

 

This would ensure your Personal Page styles only show up on the Personal Page of the TeamRaiser using that reusable page styles.

 

Does that help?

Ken

 

Cara ONeil

Ken Cantu:

So this is what I would do. I agree with your web contact, I would add the CSS to the reusable page for your TR wrapper. Because you are putting CSS into the page you are using the embed method of CSS which will take precedence over any linked stylesheets. This also ensures that if you have other TeamRaisers that you might not want to change the styles on, you aren't messing with any of the master CSS files.  Add your code to the bottom of this reusable page and use Firebug to determine which element you want to manipulate. Then wrap your CSS in this code if you are afraid the styles might conflict with other parts of the TeamRaiser module:

 

[[?xpersonalx::x[[S334g]]x::

<!-- This renders your CSS if on a personal page. -->

::

<!-- This renders in any other case or you can leave blank-->

]]

 

This basically checks the URL and says, if the parameter "pg" equals/contains "personal" then show content, if not then do something else.

 

This would ensure your Personal Page styles only show up on the Personal Page of the TeamRaiser using that reusable page styles.

 

Does that help?

Ken

 

Thanks, that is very helpful indeed. I will save this info for our next TR event, as this one is already active!

Brian Mucha

Ken Cantu:

So this is what I would do. I agree with your web contact, I would add the CSS to the reusable page for your TR wrapper. Because you are putting CSS into the page you are using the embed method of CSS which will take precedence over any linked stylesheets. This also ensures that if you have other TeamRaisers that you might not want to change the styles on, you aren't messing with any of the master CSS files.  Add your code to the bottom of this reusable page and use Firebug to determine which element you want to manipulate. Then wrap your CSS in this code if you are afraid the styles might conflict with other parts of the TeamRaiser module:

 

[[?xpersonalx::x[[S334g]]x::

<!-- This renders your CSS if on a personal page. -->

::

<!-- This renders in any other case or you can leave blank-->

]]

 

This basically checks the URL and says, if the parameter "pg" equals/contains "personal" then show content, if not then do something else.

 

This would ensure your Personal Page styles only show up on the Personal Page of the TeamRaiser using that reusable page styles.

 

Does that help?

Ken

 

We do this quite extensively in our teamraisers.

 

We use linked styles rather than embedding. As long as the link appears after the stock Luminate styles they will still win the cascade.

 

We put something like Ken's conditional in the Additional Meta tags field on the page wrapper.

 

[[?[[S8]]:g=entry::

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-home.css" />

::

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-inside.css" />

]]



[[?[[S8]]:g=company::

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-company.css" />

::

[[?[[S8]]:g=complist::

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-company.css" />

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-companylist.css" />

::

[[?[[S8]]:onation2::

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-donate.css" />

::

[[?[[S8]]::sid=1470::

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-pc2.css" />

::

[[?[[S8]]:g=personal::

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-personal.css" />

::

[[?[[S8]]:g=pfind::

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-pfind.css" />

::

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

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-profile.css" />

::

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

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-profile.css" />

::

[[?[[S8]]::/site/TRR/::

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-registration.css" />

::

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

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-taf.css" />

::

[[?[[S8]]:g=team::

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-team.css" />

::

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

Cara ONeil

Brian Mucha:

We do this quite extensively in our teamraisers.

 

We use linked styles rather than embedding. As long as the link appears after the stock Luminate styles they will still win the cascade.

 

We put something like Ken's conditional in the Additional Meta tags field on the page wrapper.

 

[[?[[S8]]:g=entry::

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-home.css" />

::

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-inside.css" />

]]



[[?[[S8]]:g=company::

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-company.css" />

::

[[?[[S8]]:g=complist::

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-company.css" />

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-companylist.css" />

::

[[?[[S8]]:onation2::

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-donate.css" />

::

[[?[[S8]]::sid=1470::

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-pc2.css" />

::

[[?[[S8]]:g=personal::

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-personal.css" />

::

[[?[[S8]]:g=pfind::

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-pfind.css" />

::

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

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-profile.css" />

::

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

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-profile.css" />

::

[[?[[S8]]::/site/TRR/::

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-registration.css" />

::

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

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-taf.css" />

::

[[?[[S8]]:g=team::

<link rel="stylesheet" type="text/css" href="../_wrappers/circleoffriends/2013/css/layout-tweaks-team.css" />

::

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

Okay, thanks--that makes sense as well. Do you mind posting a link to one of your pages so I can see it in action?

Brian Mucha

Cara O'Neil:

Okay, thanks--that makes sense as well. Do you mind posting a link to one of your pages so I can see it in action?

This one is a TeamRaiser that we use for Personal Fundraising...

http://foundation.luriechildrens.org/circleoffriends

 

Here's a standard TeamRaiser...

http://foundation.luriechildrens.org/marathon