Include your own Navigation Stylesheets

Robert Windisch edited this page Jul 25, 2015 · 1 revision

Deutsch / German

Clone this wiki locally

First you create a stylesheet and give it a descriptive file name, eg. basic.css. This file name appears later in the dropdown menus of the navigation stylesheets. The navigation is given the name of the stylesheet as a class, so that they can seek them out. The markup is generally the same for all navigation content. The example of a primary navigation with the basic.css would look like this:

<div id='primarynav' class='xf-container clearfix basic'>
    <div>
        <ul id='menu-name'>
            <li id='menu-item-83'><a href='#'>Home</a></li>
            <li id='menu-item-82'><a href='#'>Blog</a></li>
            <li id='menu-item-80'><a href='#'>Content</a></li>
        </ul>
    </div>
</div>

In order to avoid a collision with a differently styled navigation, you should precede the style sheetclass name.

.basic .hlist { background: transparent }
.basic ul li { float: left }

Once the stylesheet is created, you create in the folder css of your Childtheme the subfolder navigation. Therefore your Childtheme has exactly the same folder structure as the framework. The basic.css is then stored in the foldercss/navigation/ of your Childtheme. Then you go in your Xtreme One backend to the metabox “Navigation/Search Settings”. In the dropdown menu “Stylesheet” you choose basic, click on “Generate Theme” and your new stylesheet is included.