Include your own Navigation Stylesheets

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

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'>
        <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>

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.

Deutsch / German

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.