Custom Navigation

Keryth987
Keryth987

OK, I know how to replace images on the side menu within CSS, but I'd like to do more than replace the images and names. So..how does one utilize the Custom Navigation?

Default code is this


<div style='display:none;'>======================================== NAVIGATION: CAMPAIGN SIDE ========================================</div>

<nav id='campaign-nav' role='navigation' class='campaign-public-navigation'>
<ul class='no-bullet nav-links'>
<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>
<li class='secrets active-target campaign-member-only'>
<a href='/secrets'>
<span class='nav-icon icon icon-openbook-02'></span><span class='nav-text'>  Secrets</span>
</a>
</li>
<li class='front-page active-target'>
<a href='/'>
<span class='nav-icon icon icon-home'></span><span class='nav-text'>  Front Page</span>
</a>
</li>
<li class='forum active-target campaign-member-only'>
<a href='/forum'>
<span class='nav-icon icon op-icon-forum'></span><span class='nav-text'>  Forum</span>
</a>
</li>
<li class='calendar active-target campaign-member-only'>
<a href='/calendar'>
<span class='nav-icon icon icon-calendar-empty'></span><span class='nav-text'>  Calendar</span>
</a>
</li>
<li class='adventure-log active-target'>
<a href='/adventure-log'>
<span class='nav-icon icon op-icon-page'></span><span class='nav-text'>  Adventure Log</span>
</a>
</li>
<li class='file-docker active-target campaign-member-only'>
<a href='/files'>
<span class='nav-icon icon op-icon-image-embed'></span><span class='nav-text'>  Media Library</span>
</a>
</li>
<li class='wiki active-target'>
<a href='/wikis/main-page'>
<span class='nav-icon icon op-icon-book-wiki'></span><span class='nav-text'>  Wiki</span>
</a>
</li>
<li class='characters active-target'>
<a href='/characters'>
<span class='nav-icon icon op-icon-characters'></span><span class='nav-text'>  Characters</span>
</a>
</li>
<li class='items active-target'>
<a href='/items'>
<span class='nav-icon icon op-icon-backpack'></span><span class='nav-text'>  Items</span>
</a>
</li>
<li class='maps active-target'>
<a href='/maps'>
<span class='nav-icon icon op-icon-map'></span><span class='nav-text'>  Maps</span>
</a>
</li>
<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>
</ul>
</nav>


<div style='display:none;'>======================================== NAVIGATION: DASHBOARD SIDE ========================================</div>

<ul class='campaign-dashboard-navigation'>
<li class='section dashboard active-target campaign-member-only'>
<a href='/dashboard'>
<span class='nav-icon op-icon-dash'></span><span class='nav-text'>Dashboard</span>
</a>
</li>
<li class='section secrets active-target campaign-member-only'>
<a href='/secrets'>
<span class='nav-icon icon-openbook-02'></span><span class='nav-text'>Secrets</span>
</a>
</li>
<li class='section front-page active-target'>
<a href='/'>
<span class='nav-icon icon-home'></span><span class='nav-text'>Front Page</span>
</a>
</li>
<li class='section forum active-target campaign-member-only'>
<a href='/forum'>
<span class='nav-icon op-icon-forum'></span><span class='nav-text'>Forum</span>
</a>
</li>
<li class='section calendar active-target campaign-member-only'>
<a href='/calendar'>
<span class='nav-icon icon-calendar-empty'></span><span class='nav-text'>Calendar</span>
</a>
</li>
<li class='section adventure-log active-target'>
<a href='/adventure-log'>
<span class='nav-icon op-icon-page'></span><span class='nav-text'>Adventure Log</span>
</a>
</li>
<li class='section file-docker active-target campaign-member-only'>
<a href='/files'>
<span class='nav-icon op-icon-image-embed'></span><span class='nav-text'>Media Library</span>
</a>
</li>
<li class='section wiki active-target'>
<a href='/wikis/main-page'>
<span class='nav-icon op-icon-book-wiki'></span><span class='nav-text'>Wiki</span>
</a>
</li>
<li class='section characters active-target'>
<a href='/characters'>
<span class='nav-icon op-icon-characters'></span><span class='nav-text'>Characters</span>
</a>
</li>
<li class='section items active-target'>
<a href='/items'>
<span class='nav-icon op-icon-backpack'></span><span class='nav-text'>Items</span>
</a>
</li>
<li class='section maps active-target'>
<a href='/maps'>
<span class='nav-icon op-icon-map'></span><span class='nav-text'>Maps</span>
</a>
</li>
<li class='section settings active-target game-master-only'>
<a href='/settings'>
<span class='nav-icon op-icon-gears'></span><span class='nav-text'>Settings</span>
</a>
</li>
</ul>

My thing is...I can't make hide nor hair of this. I'd like to remove severla menu entries, replace the image, change the name displayed, and have the Charact and Item links NOT go to their default pages

If possible though I'd like the Dashboard menu untouched

 

Comments

  • Abersade
    Abersade
    Posts: 417

    To add something insert the following code into whichever "side" of the navigation that you want it to appear on (the example uses my CSS Help Hub page):


    <li class='css-help-main-hub active-target'>
    <a href='/wikis/css-help-main-hub'>
    <span class='nav-icon icon op-icon-page'></span><span class='nav-text'>  CSS Help Hub</span>
    </a>
    </li>

    * In the li class line you need to just swap in whichever page you are targeting, using whatever is after the / in the url. This allows it to be affected by class based CSS.

    * In the a href line you need to swap in everything that is after 'obsidianportal.com' in the URL, or the entire URL if the address is not hosted on OP.

    * in the span class line just swap out the 'CSS Help Hub' portion for whatever you want the link to say in the navigation bar

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Abersade
    Abersade
    Posts: 417

    To delete something just delete that section of the code for that particular option. Example, to delete the Maps link delete the following code from whichever side of the navigation that you want it removed from:


    <li class='maps active-target'>
    <a href='/maps'>
    <span class='nav-icon icon op-icon-map'></span><span class='nav-text'>  Maps</span>
    </a>
    </li>

     

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Abersade
    Abersade
    Posts: 417

    To change an existing link so that it looks the same but points at a different page do the following:

    * change the a href line to point at the new url as outlined in the 'To Add Something' post above

    Example:

    To change the link that the item link actually points to while retaining all of the existing navbar's appearance -


    <li class='items active-target'>
    <a href='/items'>
    <span class='nav-icon icon op-icon-backpack'></span><span class='nav-text'>  YOUR_NEW_ITEM_PAGE_URL_HERE</span>
    </a>
    </li>

     

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Abersade
    Abersade
    Posts: 417

    Replacing images is usually done via CSS, not via the custom nav menu. Loose instructions for that process can be found here: https://abersade-testbed.obsidianportal.com/wikis/css-left-navigation-bar

    The 'tricky' bit would be in the adding icons for newly introduced lines.

    You could opt to change the icons in a backwards sort of fashion by changing the span class line in the custom navigation entry to point at a unique icon, then target that icon (if needed) via CSS to change it using the instructions at the link above.

    Example:


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

    * you would change the span class line text where it says op-icon-dash to one of the icons that you aren't using, then target that icon in the manner outlined in the link

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Abersade
    Abersade
    Posts: 417

    To reorder items just move where they are in the list in the custom navigation section.

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Abersade
    Abersade
    Posts: 417 edited November 2022

    To change an existing link so that it says something different but points to the same link:

    * change the end of the span class line to whatever you want the link to say in the navigation bar

    Example:

    To change the Forum link to say Campfire instead -


    <li class='forum active-target campaign-member-only'>
    <a href='/forum'>
    <span class='nav-icon icon op-icon-forum'></span><span class='nav-text'>  Campfire</span>
    </a>
    </li>

     


    It should be noted that you can also change the displayed text via CSS.
    Post edited by Abersade on

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Abersade
    Abersade
    Posts: 417

    I think that covers everything? If I missed anything just point it out here and I'll address that. Pretty sure that I'm going to add these instructions to my Help Hub so any feedback is appreciated.

    GM of Rise of the Durnskald: Wrath of the Fallen Goddess - February 2016 CotM

    GM of Core: The Ashes of Alcarna - April 2020 CotM

    GM of Stream of Kairos

    Need CSS Help? It may be covered here: Abersade's CSS Hub

  • Keryth987
    Keryth987
    Posts: 1,047

    Thaks Abersade. That clears alot up.

    @Thaen Might wanna stickly this one

  • thaen
    thaen
    Posts: 1,064

    Done!

    Obsidian Portal Developer

  • twiggyleaf
    twiggyleaf
    Posts: 2,006

    Too complicated for me, but I'm glad for the input of @Aberdade and @thaen.

    smiley

    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions