Building a custom header and menu

Availability

XS Version 26 or later

Article status

Last update 13 May 2015 for XS 26.3

Related articles

Infradox XS tags, functions and conditions

Infradox XS widgets

Building a custom home page

Custom pages

Adding custom CSS

Adding Javascript to your pages

Introduction

The page header (or banner) is automatically included on many of your website pages. The page header will normally have a site menu showing and other elements as required. E.g. a quick search box, a login / logout link and so on. The default header is generated automatically and it will contain elements that you have selected - depending on the user's permissions and session state. Although there are many settings provided for the standard page header, if you want more control and flexibility, then you can create your own page header and menu.

You can make a completely custom menu, but XS 26.3 has some new tags and functions added to make developing your custom header easier if you want to use the normal/default menu. This also has the advantage that all the backoffice settings - with regards to the menu - will still be used. 

Important, read the article about the Infradox XS tags, functions and conditions first. 

Building your custom page header

Go to Site configuration and click on Code editor. Next choose Page header HTML in the dropdown box at the top of the page. If there's no custom HTML yet, then the editor will be empty. If a custom footer already exists, the code will be displayed and you can see who last changed it and when. Click on the revision link to view and/or restore previous versions of the code. A maximum of 50 revisions can be stored.

Embedding CSS in your custom header

You can embed CSS in the code that you enter for your footer while you are developing and testing. When you are done you should remove the CSS from the page header template, and you should then put it in the Custom CSS instead. To embed CSS, use the <style></style> tags at the top of the code. For example:

<style>
    .h1 {
        border:1px solid red;
    }
</style>

Entering your HTML

It is best to use the classes that already exist. Use a browser with developer extensions installed (we recommend Chrome) so that you can inspect the elements used by the standard header. You can also click "view page source" to see what the standard header looks like while browsing your website in a separate window. Also, some of the script on the pages depends on certain class names and id's. For instance the dropdown menu script. 

notes

the main menu is an unordered list (UL) and the menu items are list items (LI). The unordered list(s) must have the class menuitems for the mobile device menu to work.

A custom banner/header with the default XS menu

In XS 26.3 a few functions and tags where added. These will allow you to develop a custom header/banner, while still using the default menu, as opposed to also manually creating the menu. The advantage of using this option, is first of all that it's much quicker and simpler to develop a custom header this way, but also that you can still configure the menu and related settings using the backoffice functions.

You can load a starting template by clicking Load example and the select the file default-banner-1.txt. It is recommended that you first configure the standard menu and banner settings (without enabling the code for your custom page header). If you then enable the custom page header, the resulting HTML will look the same as the standard version. You can then start changing the template as required.

In the example template (default-banner-1.txt) you'll see this code fragment:

<div class="menuwrapper fixcenterwidth">
   <div id="mainMenuContainer" xsmenu="1">
      <ul id="left" class="menuitems" style="margin-left:<?xs rproperty('mnu_left','0') ?>px">
<?xs html('xs-leftsidemenu.inc') ?>
      </ul>
      <ul id="right" class="menuitems">
<?xs html('xs-rightsidemenu.inc') ?>
      </ul>
   </div>
</div>

The xs tags include the standard HTML code for the left side of the menu (xs-leftsidemenu.inc) and for the right side of the menu (xs-rightsidemenu.inc). Note that if you want to use the standard menu, then you must add the property xsmenu="1" to the mainMenuContainer div. Like so:

<div id="mainMenuContainer" xsmenu="1">

If you don't use the standard menu, then remove the property xsmenu="1" from the div.

The standard HTML code for the dropdown menus is included by use of the tag:

<?xs html('xs-dropdownmenus.inc') ?>

The above tag will output all the required HTML based on the settings that you have configured.

Furthermore, you'll see this code fragment in the example template:

<?xs if config('xsp_searchpos==1') {
      <?xs html('quicksearchbar.inc') ?>
} ?>

This takes care of including the quick search HTML code in the position that you have configured in the backoffice. You can of course simply remove the code fragments and add the  <?xs html('quicksearchbar.inc') ?> to include the HTML in the position where you want it to appear.

If you have created dynamic subdomains

Some of the subdomain settings will not take effect automatically if you use a custom header and menu. You can however control everything from within your code. Use subdomain conditions to include or exclude page fragments, apply different CSS and so on. 

Examples:

<?xs if subdomain(0) {
     NO subdomain active
} ?>
<?xs if subdomain(11) {
     subdomain with id 11 is active
} ?>

You can use the conditions as shown in the above examples to show or hide html elements, to apply special CSS and so on.

Read the article for further information about tags and functions.

You can also use the following tags for subdomains:

<?xs session('subdomainname') ?> to output the active subdomain name.

or

<?xs session('subdomainid') ?> to output the subdomain id. If no subdomain is active (i.e. www) then this will output 0. 

You can use this to e.g. apply different CSS based on the subdomain. The example below outputs ... class="subdomain0" or class="subdomain1" etc, so that you create and apply different classes based on which subdomain is active.

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk