Customizing the Campaign Navigation
The navigation menu is an integral part of the campaign site on Obsidian Portal. It breaks the campaign down into its component elements (Characters, Adventure Logs, Maps, and so forth) and provides a basic structure for presentation to others. But not every campaign is the same, and the 'component elements' in one might be very different from those of another. By customizing your campaign's navigation menu, you can more-closely tailor your campaign's presentation to suit your needs.
Note: Customizable campaign navigation is an Ascendant feature, requiring an Ascendant membership.
Required Technical Knowledge
Customizing the campaign navigation requires an understanding of some of the basic building blocks of web design - specifically
HTML and
CSS. You don't need to be an expert, but you will need to be able to use these tools to create a structured menu layout that is appropriately labeled with class names so as to be targeted by CSS for styling (both our rules and any that you might create in your
custom CSS input field).
Getting Started
To begin customizing your campaign's navigation, click on the "Settings" tab in the left-hand navigation menu. From this page, click to the "Advanced" area and locate the "Custom Navigation" input field. HTML placed into this field will replace the standard campaign navigation once you have clicked the "Save" button. If the field is empty when saving, the campaign site will return to using the standard menu. Located just beneath the input area are buttons to "Insert Sample" and "Reset" the field.
The Insert Sample
Intended as a way to offer users something of a jumping off point, the "Insert Sample" button fills the "Custom Navigation" input field with a default HTML code block that replicates the standard Obsidian Portal campaign navigation. This is particularly useful for users with less experience who are just starting out, or for those who only wish to make minor modifications.
The Reset Button
At its core, the "Custom Navigation" input field works like something of a toggle switch when saved. If the field is empty, then the standard campaign navigation menu is used. However, if there is content inside, then that is displayed as the campaign's navigation instead. Having the "Reset" button ensures that the process of getting back to the standard campaign navigation (if desired) is quick and easy.
Proper Navigation Structure
While the custom navigation that you create will be wholly yours, it will be placed into the middle of Obsidian Portal's campaign site structure. This means that in order for your custom navigation menu to work correctly, there are some structural considerations that need to be observed. Of particular importance are the following class assignments:
Necessary Classes
| Class | Usage |
|---|---|
| active-target | Applied to the element that needs to receive the 'active' class from Obsidian Portal's menu code. Typically a list item or other container element for the link, tab image or icon, and tab label. |
| campaign-member-only | Applied to a menu item that is only to be displayed when the viewer is a member of the campaign. Typically a list item or other container element for the link, tab image or icon, and tab label. |
| game-master-only | Applied to a menu item that is only to be displayed when the viewer is the GM, or a Co-GM of the campaign. Typically a list item or other container element for the link, tab image or icon, and tab label. |
| campaign-public-navigation | Applied to a menu-containing element that enables CSS rules application to be applied to the front-facing 'campaign' view of the menu. Typically a nav element, ordered or unordered list element, or div element. |
| campaign-dashboard-navigation | Applied to a menu-containing element that enables CSS rules application to be applied to the rear-facing 'dashboard' view of the menu. Typically a nav element, ordered or unordered list element, or div element. |
Active Flagging
Referring to the process of moving the singular 'active' flag (and its associated styling) from one menu item to another as the user browses the campaign site, active flagging for your custom navigation is accomplished by adding the 'active-target' class to the container element for each of your menu items. This allows the Obsidian Portal code to know where the 'active' flag should be placed on each menu item.
<li class='home-page'>
<a href='/'>
<span class='nav-icon icon icon-home'></span><span class='nav-text'> Home Page</span>
</a>
</li>
should be...
<li class='home-page active-target'>
<a href='/'>
<span class='nav-icon icon icon-home'></span><span class='nav-text'> Home Page</span>
</a>
</li>
Viewer Differentiation
Put simply, not every navigation tab is intended for every viewer - and by applying the proper class names to your menu items, you can determine who will see that item when viewing your campaign site. Just like on the standard campaign navigation, there are three tiers of viewership: public (requiring no class), restricted to only members of the campaign (requiring the 'campaign-member-only' class), and restricted to only the GM and any Co-GMs (requiring the 'game-master-only' class).
a publicly visible navigation tab...
<li class='home-page active-target'>
<a href='/'>
<span class='nav-icon icon icon-home'></span><span class='nav-text'> Home Page</span>
</a>
</li>
a tab restricted to campaign members...
<li class='dashboard active-target campaign-member-only'>
<a href='/dashboard'>
<span class='nav-icon icon op-icon-dash'></span><span class='nav-text'> Dashboard</span>
</a>
</li>
and a tab restricted to the GM and Co-GMs...
<li class='settings active-target game-master-only'>
<a href='/settings'>
<span class='nav-icon icon op-icon-gears'></span><span class='nav-text'> Settings</span>
</a>
</li>
Front and Rear-Facing
As any experienced user can tell you, there are two sides to every Obsidian Portal campaign site. There is the front-facing 'campaign' layout - made up of the Home Page, Wiki, Adventure Log, Characters, Items, and Maps sections; and the rear-facing 'dashboard' layout - made up of the Dashboard, Calendar, Media Library, Forum, Secrets, and Settings areas. By utilizing separate menus - one with the 'campaign-public-navigation' class and one with the 'campaign-dashboard-navigation' class, you can duplicate this front and rear facing menu effect.
a basic two-sided menu might look like this... <nav id='campaign-nav' role='navigation' class='campaign-public-navigation'> <!-- front-facing menu items here --> </nav> <ul class='campaign-dashboard-navigation'> <!-- rear-facing menu items here --> </ul>
Tab Icons or Images
Since you now have complete control over the HTML of your menu, you can actually upload whatever images you want to your Media Library, and then reference those images in the HTML as your menu icons, or you can remove the icons completely, and just have a text only menu.
If you are only adding a new menu item, and want it to match the existing default menu items and icons, here's a list of
all of the icons that are currently available in the system.