"Customized" personal pages

Greg Douglas 2

How is a "Customizable" layout option created for personal pages so that it appears in the 'Layout Options' drop down along with the 4 default options?

Robyn Mendez

HI Greg,

 

I don't have an answer at my finger tips, but I've asked me team to find answer for you.

 

Sincerely, Robyn

Robyn Mendez

Hi Doug,

 

I learned at little more about this feature this morning from my colleague Chris Cain.

 

This feature was introduced several releases ago – and it only applies to new events that use these newer templates and therefore this might NOT apply to events that may have been copied year-over-year several times.

 

How old is the original event that you are working on?  If you create a new test event, are you able to see the custom templates?

 

Sincerely, Robyn

Greg Douglas 2

Robyn Mendez:

Hi Doug,

 

I learned at little more about this feature this morning from my colleague Chris Cain.

 

This feature was introduced several releases ago – and it only applies to new events that use these newer templates and therefore this might NOT apply to events that may have been copied year-over-year several times.

 

How old is the original event that you are working on?  If you create a new test event, are you able to see the custom templates?

 

Sincerely, Robyn

Ok I see that - is there any documentation on how / where to affect/ create the customized option?

Robyn Mendez

Greg Douglas:
Ok I see that - is there any documentation on how / where to affect/ create the customized option?

For the Hood release, newTeamRaiser custom page layouts were created for the greetings, personal, team, and company pages. These layouts make the pages more easily customizable by site admins by replacing the table layout with a div layout. This exposes the individual elements of the page allowing them to be customized through CustomStyle.css.

 

These layouts are named "customizable", and can be accessed by editing the custom page and selecting the "customizable" option under layouts.

 

Selectors

The CSS selectors for all pages are the same, making it easier to customize all the pages at once.

<div class="trPage">

   <div class="header>Header Content Here</div>

   <div class="sideBar">

      Optional Image Here

      <div class="menu">Menu Items Here</div>

      Status Indicators Here

   </div>

   <div class="main">Body Content Here</div>

   <div class="footer">Footer Content Here</div>

</div>

 

Additional Selectors

There are also selectors for elements that are not common to all pages.

 

Images

<div class="imgFrame">

   Image Here

   <div class="caption">Caption Here</div>

</div>

 

Blog

<div id="blog">Blog Here</div>

 

Status Indicators

This are numbered starting from frStatus1 (ie. frStatus1, frStatus2, ...). However, due to conditional logic, the numbering may not be contiguous.

<div id="frStatus1">Status Indicator Here</div>

 

Badges

<div id="frBadge">Badge Here</div>

 

Donor Wall

<div id="frDonorList">Donor Wall Here</div>