How to add a Module to the header or footer in a skin

Overview

For a module to be added to a page, it has to be added to a pane. The presence of this pane is dependent on the selected theme layout. For example, in the default theme (Cavalier), there is no pane in the Header/footer section, so a custom pane needs to be created.

 

Solution

To add a module to the header or footer of the skin, you will need to:

  • Modify the main.ascx file. The modification involves adding an id (must be unique to only that element) and also adding runat="server" to the element.

You can also choose to use a third party theme that has a layout that is convenient for the customer. 

Before modifying the ascx file.

inline1170472847.png

 

After modifying the ascx file.

inline730872897.png

 

Header section after the changes have been made. (Make sure to clear browser cache and recycle app pool)

inline1907499358.png

 

Adding a module (HTML Pro)inline539514323.png

 

  • (if needed) Modify the style in the skin.css file (located within the theme/skin folder), depending on your preferences for the pane. For example, if you want the new pane to have certain width, then you can use the ID from the pane (testheaderpane in the above example) and apply the necessary CSS styles (such as width: 50%) to it using skin.css file.

If you would like to create your own theme and edit the header and footers, you will need to take a look at this supporting Theme Layout KB, it will give more insight into how to make any section of your theme into a pane.

Comments

0 comments

Please sign in to leave a comment.