Custom side menu items

NimrodYanai
NimrodYanai
edited May 2020 in Feature Requests

We should have a way to add a custom side menu items using different, built in templates.

For example, adding a menu item for "Monsters" that will act like the items page, or a custom "Quests" menu item that will act like the Adventure Log one.

Post edited by NimrodYanai on
«1

Comments

  • Kallak
    Kallak
    Posts: 1,090

    I fully support this request! I love it.

    All the best,
    - Kallak
  • thaen
    thaen
    Posts: 1,064

    Thanks for posting this request!

    If we see some more of the community support this request, then we can redirect some dev time to it and get a beta version together for some of y'all to test out.

    I know some of the users have been using the custom css and html directly in their pages to simulate this, but that solution requires every page to have the custom html, and so it can be a headache if you want to go add or remove a menu item because you have to edit every page.

    Obsidian Portal Developer

  • Dungeon_Master_Loki
    Dungeon_Master_Loki
    Posts: 358

    Indeed. I miss the Items functionality, if for no other reason than I liked the way that things were linked and displayed. Being able to designate particular menu items that give that functionality would be great for everything from Planar Cartography to Sects and Factions! 

    Game Designer, Pro GM, multiple ENnie Award winner

    GM of Planejammer: The Spelljoined (Pathfinder 1e) Campaign of the Year 2011 and still going strong!

    GM of The Planewalker's Guild (Pathfinder 1e) 

    Need a GM? Book me today!

  • thaen
    thaen
    Posts: 1,064

    @DungeonMasterLoki, Items is still available, it's just turned off by default in a campaign.

    Go into the "Settings" on your campaign.

    Click on the "Advanced" tab.

    Check the "Show Items Section (Not Recommended)" checkbox.

    Click Save.

    And Items will show up in your side menu.

     

    Obsidian Portal Developer

  • thaen
    thaen
    Posts: 1,064

    There is a beta version of Custom Navigation now available.  It's simply a wholesale replacement of the default navigation with whatever HTML you enter.  If anyone is interested in trying out this beta feature, let me know and I'll add you to the beta.

    Obsidian Portal Developer

  • cgregory
    cgregory
    Posts: 780

    @thaen  Sure, I can try it out on my Fragged Genesis campaign that is currently in the planning stages.

     

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • thaen
    thaen
    Posts: 1,064

    @cgregory, you're in the beta now.  It's applied to the GM, so all of the Campaigns that you GM have the feature now.  It's in Settings -> Advanced, and is right above the Custom CSS.  Let us know if you see any issues.  Looking forward to seeing what you do with it!

    Obsidian Portal Developer

  • twiggyleaf
    twiggyleaf
    Posts: 2,006

    I support this request but I don't want to be in the Beta right now.   I think it is a great idea, though!

    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

  • thaen
    thaen
    Posts: 1,064

    @twiggyleaf, just curious, if you support the request, is there a reason you would explicitly not want to be in the beta?  I'm wondering if I'm unintentionally making "being in the beta" sound like more than it is.

    Obsidian Portal Developer

  • cgregory
    cgregory
    Posts: 780

    @twiggyleaf basically being in the beta just means you have this additional tab.  I certainly would suggest that anyone playing around with the custom navigation copy and paste the url of their settings page just in case you make a mistake on your HTML. It makes it easier to get back to it and fix it.

    That said I did jump in play around a bit in a test campaign. so far it seems easy enough and the navigation did get changed. I will likely try a little bit more later today and post some of the code that I see as being a starting point for a custom navigation.

    image

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • cgregory
    cgregory
    Posts: 780 edited August 2020

    To recreate the current navigation (including items) here is the code. So removing or renaming them is quite easy.

    <nav id="campaign-nav" role="navigation">

    <ul class="no-bullet nav-links">

    <li class="dashboard "><a href="/dashboard"><span class="nav-icon icon op-icon-dash"></span><span class="nav-text">&nbsp;&nbsp;Dashboard</span></a></li>

    <li class="secrets "><a href="/secrets"><span class="nav-icon icon icon-openbook-02"></span><span class="nav-text">&nbsp;&nbsp;Secrets</span></a></li>

    <li class="front-page "><a href="/"><span class="nav-icon icon icon-home"></span><span class="nav-text">&nbsp;&nbsp;Front Page</span></a></li>

    <li class="forum "><a href="/forum"><span class="nav-icon icon op-icon-forum"></span><span class="nav-text">&nbsp;&nbsp;Forum</span></a></li>

    <li class="calendar "><a href="/calendar"><span class="nav-icon icon icon-calendar-empty"></span><span class="nav-text">&nbsp;&nbsp;Calendar</span></a></li>

    <li class="adventure-log "><a href="/adventure-log"><span class="nav-icon icon op-icon-page"></span><span class="nav-text">&nbsp;&nbsp;Adventure Log</span></a></li>

    <li class="file-docker "><a href="/files"><span class="nav-icon icon op-icon-image-embed"></span><span class="nav-text">&nbsp;&nbsp;Media Library</span></a></li>

    <li class="wiki "><a href="/wikis/main-page"><span class="nav-icon icon op-icon-book-wiki"></span><span class="nav-text">&nbsp;&nbsp;Wiki</span></a></li>

    <li class="characters "><a href="/characters"><span class="nav-icon icon op-icon-characters"></span><span class="nav-text">&nbsp;&nbsp;Characters</span></a></li>

    <li class="items "><a href="/items"><span class="nav-icon icon op-icon-backpack"></span><span class="nav-text">&nbsp;&nbsp;Items</span></a></li>

    <li class="maps "><a href="/maps"><span class="nav-icon icon op-icon-map"></span><span class="nav-text">&nbsp;&nbsp;Maps</span></a></li>

    <li class="settings "><a href="/settings"><span class="nav-icon icon op-icon-gears"></span><span class="nav-text">&nbsp;&nbsp;Settings</span></a></li>

    </ul>

    </nav>

     

    Post edited by cgregory on

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • cgregory
    cgregory
    Posts: 780

    As a test I've renamed some of the side menu items (adventure log to captains log, characters to crew) and added a new one called timeline that points to the timeline wikipage and gave it a custom icon.  All in all pretty easy. 

    <nav id="campaign-nav" role="navigation">

    <ul class="no-bullet nav-links">

    <li class="dashboard "><a href="/dashboard"><span class="nav-icon icon op-icon-dash"></span><span class="nav-text">&nbsp;&nbsp;Dashboard</span></a></li>

    <li class="secrets "><a href="/secrets"><span class="nav-icon icon icon-openbook-02"></span><span class="nav-text">&nbsp;&nbsp;Secrets</span></a></li>

    <li class="front-page "><a href="/"><span class="nav-icon icon icon-home"></span><span class="nav-text">&nbsp;&nbsp;Front Page</span></a></li>

    <li class="forum "><a href="/forum"><span class="nav-icon icon op-icon-forum"></span><span class="nav-text">&nbsp;&nbsp;Forum</span></a></li>

    <li class="calendar "><a href="/calendar"><span class="nav-icon icon icon-calendar-empty"></span><span class="nav-text">&nbsp;&nbsp;Calendar</span></a></li>

    <li class="adventure-log "><a href="/adventure-log"><span class="nav-icon icon op-icon-page"></span><span class="nav-text">&nbsp;&nbsp;Captains Log</span></a></li>

    <li class="file-docker "><a href="/files"><span class="nav-icon icon op-icon-image-embed"></span><span class="nav-text">&nbsp;&nbsp;Media Library</span></a></li>

    <li class="wiki "><a href="/wikis/main-page"><span class="nav-icon icon op-icon-book-wiki"></span><span class="nav-text">&nbsp;&nbsp;Matrix</span></a></li>

    <li class="wiki "><a href="/wikis/timeline"><span class="nav-icon icon icon-timeline"><img  src="https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640736/Calendar.png"; ></span><span class="nav-text">&nbsp;&nbsp;Timeline</span></a></li>

    <li class="characters "><a href="/characters"><span class="nav-icon icon op-icon-characters"></span><span class="nav-text">&nbsp;&nbsp;Cast</span></a></li>

    <li class="items "><a href="/items"><span class="nav-icon icon op-icon-backpack"></span><span class="nav-text">&nbsp;&nbsp;Items</span></a></li>

    <li class="maps "><a href="/maps"><span class="nav-icon icon op-icon-map"></span><span class="nav-text">&nbsp;&nbsp;Maps</span></a></li>

    <li class="settings "><a href="/settings"><span class="nav-icon icon op-icon-gears"></span><span class="nav-text">&nbsp;&nbsp;Settings</span></a></li>

    </ul>

    </nav>

     

    Here is the added timeline entry with a custom icon.

    <li class="wiki "><a href="/wikis/timeline"><span class="nav-icon icon icon-timeline"><img  src="https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640736/Calendar.png"; ></span><span class="nav-text">&nbsp;&nbsp;Timeline</span></a></li>

    I have not looked at how to get the active class to work with the custom menu yet.

    https://ztestcampaign.obsidianportal.com/

     

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 240

    I'd like to try the beta if it's still open

  • thaen
    thaen
    Posts: 1,064

    @Conan_Lybarian, done!  Let us know if you see any issues.

    @cgregory, NICE!!!  Thanks for sharing that code!  Yeah, I don't see a way to get "active" to work while using this feature right now.

    Obsidian Portal Developer

  • Kallak
    Kallak
    Posts: 1,090

    The next round of updating is in the works on this, so bring on the feedback please.

    All the best,
    - Kallak
  • Conan_Lybarian
    Conan_Lybarian
    Posts: 240

    @cgregory- What if I want to replace existing icons? I've played with it some, and I need to figure out how to hide the existing ones, which I believe I can just set all of them to 0em in the custom css box. But my replacement ones are off center and not lining up properly. Any tips?

  • cgregory
    cgregory
    Posts: 780

    Just change the name of the span class so that it does not have the same class name as the previous name 

     

    ><span class="nav-icon icon op-icon-map">

    so try changing op-icon-map to like op-icon-map-mine and then add the image tag

     

    <li class="wiki "><a href="/wikis/timeline"><span class="nav-icon icon icon-timeline"><img  src="https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640736/Calendar.png"; ></span><span class="nav-text">&nbsp;&nbsp;Timeline</span></a></li>

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • twiggyleaf
    twiggyleaf
    Posts: 2,006

    @thaen, the main reason I asked not to be in the BETA is that I am not implementing much DESIGN at the moment.  Our campaign is a bit slow at the moment due to "certain situations" and I am concentrating more on just keeping basic storylines alive.  I am happy to be included in the BETA but I will not be doing much testing of it at this stage.

    Thanks to @cgregory for extra info and insights.

    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

  • thaen
    thaen
    Posts: 1,064

    @HumAnnoyd, @cgregory, @Conan_Lybarian, we just pushed a small update that @Kallak just added for this beta feature.  It adds an "Insert Sample" button and a "Reset" button.

    "Insert Sample" inserts html that creates an exact duplicate of the current sidebar navigation (front facing like Front Page, as well as back facing like Dashboard).  So if you only want a small tweak, like hiding a particular tab, or adding a new tab, or changing names, this makes that very straightforward to do.

    "Reset" just completely clears the form.

    Just to note, there's still not a way to get "active" to work on this beta feature yet.

    If anyone else wants in on testing this beta feature, just ask.

    Obsidian Portal Developer

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 240

    Thanks @cgregory!

  • Kallak
    Kallak
    Posts: 1,090

    Yes, please give us your feedback on this feature as it exists in it's beta stage. 

    All the best,
    - Kallak
  • Conan_Lybarian
    Conan_Lybarian
    Posts: 240

    I've been playing with it some for my tester and Fantasy Fantasy League page,and so far it's ok. It's tricky to get the hang of. I think I might just leave it as is (with the css customization I have built), and just add a line or 2 if that's possible. Or would I have to do the whole thing? I tried it but realized it showed the "secrets" tab, but led to a dead link.

  • thaen
    thaen
    Posts: 1,064 edited September 2020

    @Conan_Lybarian, save off what you have already (just so you don't lose it), and then try the "Insert Sample".  That should give you an exact replication of the default navigation.  Then you can add or delete any tabs you want from there.  And test out the Secrets tab again after you try that.  It definitely shouldn't be leading to a dead link.  If you're still seeing that, let us know.

     

    @HumAnnoyd, @cgregory, @Conan_Lybarian, we pushed another update to this.

    The update now allows "active" to work.  It works by putting the class "active-target" on the html element that you want to "active" to be applied to.  It then applies "active" to the element that most closely matches the current url. Checkout the "Insert Sample" code for an example of how it's used.

    So if you are on:

    https://tobuyafatpig.obsidianportal.com/characters/bodrin-hurald

    And you don't have anything other than the "Insert Sample" code, it will apply the "active" class to the "Characters" tab.

    However if you have the "Insert Sample" code, and you also added a "Bodrin" tab, and it has an href of "/characters/bodrin-hurald", then the "Bodrin" tab would be the one that gets the "active" class.

    Let us know if you see any issues.

     

    Post edited by thaen on

    Obsidian Portal Developer

  • thaen
    thaen
    Posts: 1,064

    I just noticed that if you use the "Insert Sample" code, it works just fine if you're logged in, but if you're logged out (or a non-member visiting the Campaign), then you still see all of the tabs as if you were a logged in member.  You can't visit those pages, and you are taken to the login screen if you click those tabs, but it's not quite an exact replication of the default navigation.  We'll work on fixing that.

    Let us know if you notice anything else about the "Insert Sample" code that doesn't exactly replicate the default navigation.  The idea for "Insert Sample" is to give an easy jumping off point for GMs that just want to tweak or add a little to the default navigation...pretty much like Conan was saying.

    Obsidian Portal Developer

  • thaen
    thaen
    Posts: 1,064

    @HumAnnoyd, @cgregory, @Conan_Lybarian, we pushed another update to this.

    The "Insert Sample" code should now behave exactly like the default navigation for GMs (and Co-GMs), Players, and non-campaign-members.

    The key pieces are the classes "campaign-member-only" and "game-master-only" for tagging the menu tabs that you don't want everyone to see.  You'll find these classes used in the "Insert Sample" code.

    There is a new class "campaign-public-navigation" for indicating the "public" facing campaign navigation.  (This is the navigation that is shown when on the Wiki tab for example.)  And there is a new class "campaign-dashboard-navigation" for indicating the "private" campaign navigation.  (This is the navigation that is shown when on the Dashboard tab for example.)  You'll find these classes also used in the "Insert Sample" code.

    Let us know if you see any issues.

    Obsidian Portal Developer

  • NimrodYanai
    NimrodYanai
    Posts: 101

    I would love to be in the Beta for this!

  • 40below
    40below
    Posts: 3

    I'd very much like to join the beta for this. Thanks!

  • thaen
    thaen
    Posts: 1,064

    @NimrodYanai, @40below, done!  You should both have access to this feature now.

    Also, @Kallak wrote a help article to explain some of the nuances of this feature.  It's linked right above the Custom Navigation textbox as "Read our guide".

    Let us know if you see any issues.

    Obsidian Portal Developer

  • NimrodYanai
    NimrodYanai
    Posts: 101

    Where can I find it?

    I don't see it in my campaign menu. I checked the settings but didn't see it there either.

  • UselessTriviaMan
    UselessTriviaMan
    Posts: 546

    @NimrodYanai, you can enable the Items section by going into Settings -> Advanced and checking the "Show Items section" box.


    Ptolus, City by the Spire - 2016 Campaign of the Year

    "Please pay attention very carefully, because this is the truest thing a stranger will ever say to you: In the face of such hopelessness as our eventual, unavoidable death, there is little sense in not at least TRYING to accomplish all your wildest dreams in life."  - - Kevin Smith

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