Documentation

Installation instructions

Connect to the marketplace from your dashboard and install the package

Version 8 Demo: https://motif.xanium.io

Version 9 Demo: https://motif-v9.xanium.io

Manual installation:

1. Unzip this file in your site's packages/ directory.
2. Login to your site as an administrator.
3. Find the "Add Functionality" page in your dashboard.
4. Find this package in the list of packages awaiting installation.
5. Click the "Install" button.

Full Height Header vs. Fixed Height Header

Motif comes with 2 headers: a full height header that fits the height of the browser window, and a fixed height header that is 400px tall by default (this can be overridden in the customizer).

The nav bar is displayed below the full height header, but using the Sticky Panel javascript it automatically sticks to the top of the page in a fixed position when you scroll to the point where the nav bar is at the top of the page.

The nav bar is displayed above the fixed height header, and it sticks to the top of the page in a fixed position.

Both headers have the same background colors, text colors, and background image (optional - set in the customizer).

The intent of having 2 headers is to let you choose which one to use on any given page. It was not intended for you to use both, though that is possible with this theme. There is a "Top Section" area above the "Main" area that you can use in conjunction with the header you choose. This is the recommended approach.

Block Templates - Autonav

There are 3 custom Autonav block templates: "Motif Navbar", "Motif Navbar Right" and “Motif Megamenu”. The starting point uses " Motif Navbar" by default. These templates are for use in the nav bar and apply the necessary classes to display the nav properly in the nav bar.

**Motif Navbar: ** This template displays the nav left aligned in the nav bar, so it sits up against the logo.

Motif Navbar Right: This template displays the nav right aligned in the nav bar.

Motif Megamenu Navigation: This template comes with a mega menu for an easier multi-level navigation.

Block Templates - Feature

Motif has a custom template for the Feature block called "Motif Feature" that displays the feature block in the style you see in the Motif demo. This is set as the default template for this block type.

Block Templates - Image Slider

Motif comes with a custom template for the Image Slider block called "Motif Image Slider". This is what is used in the Motif demo in the full height header on the home page.

This template sets the slide image as a background image on the slide positioned in the center of the slide and set to cover the whole slide. It then adds the title and caption to the slide centered both horizontally and vertically. If a link is added, the link is rendered as an overlay on the slide, so clicking anywhere on the slide takes you to the link's location.

Note: In order for this template to render properly, there must be a height set on the container of the image slider.

Block Templates - Next Previous

Motif comes with a custom block template for the Next Previous block. This template displays the next and previous links side-by-side, with the up link displayed as a button beneath them. In the Motif demo, you can see this template in action on a blog entry page.

Block Templates - Page List

Motif comes with 2 custom templates for the Page List block: "Motif Grid Four Column" and "Motif Grid Three Column". Each one uses Bootstrap markup to display the page list items in a 4-column or 3-column grid respectively. The 4-column template is used on the home page in the Motif demo.

The blog page in the demo uses the standard Page List view, though you could use one of the grid templates.

Page Templates

Motif comes with the following page templates for you to choose from:

• Blank - Just displays the main area
• Full (Default) - Full width, no columns except in the footer
• Left Sidebar - Left column Sidebar area with class "col-sm-3" and main column with class "col-sm-8 col-sm-offset-1" in the Main section.
• Right Sidebar - Right column Sidebar area with class "col-sm-3 col-sm-offset-1" and main column with class "col-sm-8" in the Main section.
• Three Column - Three equal columns with class "col-sm-4" in the Main section: "Main", "Sidebar", and "Sidebar Right"
• Two Column - Two equal columns with class "col-sm-6" in the Main section: "Main" and "Sidebar".

Areas

Motif has several areas that you can use on each page in order from top to bottom:

• Page Header Full Height
• Header Logo
• Header Navigation
• Page Header Fixed Height
• Top
• Main
• Feature
• Section 1
• Section 2
• Section 3
• Footer Column 1
• Footer Column 2
• Footer Column 3
• Footer Column 4
• Footer Top
• Footer Copyright
• Footer Bottom Right

Removing Xanweb message in the footer

By default, there is a message in the footer that says "Designed by Xanweb. Built with Concrete5." Each link has a 'rel="nofollow"' tag so that it doesn't affect your site's SEO.

While I would love for you to keep this message, I understand that this isn't desirable for everyone. To remove this message, all you need to do is publish a block in the global "Footer Bottom Right" area.