Customizing Header / Footer [ For -V1 User Interface]

You can customize the header and footer of the microsite by overriding the default header and footer implementations. The support.edubrite.com site uses the same mechanism to create a custom header and footer. Note that, familiarity with HTML syntax is required and some development skills are needed to do this step. To begin do the following

• Login to microsite as an administrator
• From the Site Admin menu select Placements
• You will see a list of placement items, pick the Header placement and click on it

  

• Now you will get an editing field where you can add any content you would like to use as the new header. Note that the content must be created using HTML syntax, and it should be a fragment rather than complete HTML file which fits the top part of your microsite. Check out Learn Zone example, to see complete code of customized header example

  

• Save and Publish the content to see the new header in action

To change the footer content, similarly you can click on Footer placement from the list of placements and add any custom content in HTML format.  

EduBrite provides several ways to add customization capabilities in the header and footer by which you can add conditions in your header/footer content to make it specific to specific audience or other conditions. You will need to have some experience as a web developer to use these capabilities.

Customizing Header/Footer with Programming

[Development experience is assumed for this customization]

You can use Velocity templating language syntax to add programmable parts in the header and footer code. EduBrite provides several context objects available to be used in Velocity code to implement conditions. To use velocity templating enable it in your microsite by going to Site Details->Customization tab, and add following on a new line:

ENABLE_VELOCITY=true

E.g. to add conditions related to signed-in or not yet signed-in states, you can add following code

 
#if(!$UIContext.isGuest())
   <span style="color:#6B62B4; float:right">Welcome $UIContext.getCurrentUser().getFirstName() </span>
#else
  <span style="color:#6B62B4; float:right">Welcome Guest</span> 
#end

The UIContext object provides several useful methods to program the header/footer content.