Example of Header Customization

Jan 2014: This page is updated according to the new UI

Step 1: (optional) Upload a logo of custom size (which doesn't fit in the 40 pixel height set as the default supported size).

Step 2: Add ENABLE_VELOCITY=true in the Site Admin->Site Details->Customization to allow scripting in the custom header.

Step 3: Add following code in the Site Admin->Placements->CSS placement, and publish (checkin). The code does following changes

  • Hides the default logo
  • Makes a custom div (identified by id headerTop) above the menubar visible, and sets its height to 80 pixels. This is the region where we're going to add our custom logo and any other element
  • Pushes down the menubar below the headerTop

#headlogo{display:none}
#headerTop{display:block;height:80px;position:fixed;left:0px;top:0px;z-index:5;width:100%}
#HEADER{margin:0px auto; width:1000px; padding:0px 20px; background-color:#555555;height:80px}
#header{left:0px;top:80px}
#pageCenterContainer{margin-top:130px}

 

Step 4: Add following content in the header placement from Site Admin->Placements->Header. This would display the logo you have uploaded in step 1.

<img src="${UIContext.getCurrentLogoPath()}"/>

Let's check how it appears.

You can now add anything you like to be shown in the headerTop region. By using the built in support for scripting you can add conditional code as well which can be user specific. For example, you can check the role of the current user by using following code.

#if($UIContext.isGuest())

<!-- handle not logged in user -->

#else if($UIContext.isAdminOrSiteAdmin())

<!-- handle admin user -->

#else if($UIContext.isTeacher())

<!-- handle instructor user -->

#else

<!-- handle learner user -->

#end