Custom side menu items

2»

Comments

  • thaen
    thaen
    Posts: 1,064

    @NimrodYanai, you should have access to the "Custom Navigation" feature in the Settings -> Advanced tab.  It's a textbox right above the "Custom CSS" textbox.  Let me know if you don't see it still.

    Obsidian Portal Developer

  • NimrodYanai
    NimrodYanai
    Posts: 101

    Thanks!

    Found it. I'll start playing with it a bit!

  • NimrodYanai
    NimrodYanai
    Posts: 101

    First thing I noticed - we need to add extra, unused icons we can set for the new buttons.

     

  • thaen
    thaen
    Posts: 1,064

    @NimrodYanai, I pulled together a list of all of the icons that exist in the system currently (including ones that are already used):

    https://opfonticons.obsidianportal.com/wikis/main-page

    But, 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.

    Obsidian Portal Developer

  • thaen
    thaen
    Posts: 1,064

    Just FYI to all, this feature is now out of beta and available to all Ascendant GMs.

    Obsidian Portal Developer

  • Jynx001
    Jynx001
    Posts: 80

    Nice! Just changing the names takes about 30 seconds. Very easy.

  • Krothos
    Krothos
    Posts: 230

    Very cool. Looking forward to start using this.

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998

    Cool, looking forward to playing with this!

    Just trying to help out.

  • NimrodYanai
    NimrodYanai
    Posts: 101 edited October 2020

    But how do I use the icons? I don't see any way to select them, and using "Inspec" on the browser doesn't give me the image address.

    Nevermind, I see I can just use the class name to get the image.

    Thanks!
    Post edited by NimrodYanai on
  • NimrodYanai
    NimrodYanai
    Posts: 101

    However, the new menu item does not match the styling of the other menu items.

  • thaen
    thaen
    Posts: 1,064

    @NimrodYanai, I think you have this:

    <span class="op-icon-d20" style="min-width:45px">

    Change that to this:

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

    The "nav-icon" and "icon" classes will apply the styling to match the other menu items, and the "min-width" shouldn't be needed.

    Let me know if that fixes it up for you or not.

    Obsidian Portal Developer

  • dragondreams
    dragondreams
    Posts: 24

    I would love to try this out :-)

  • thaen
    thaen
    Posts: 1,064

    @dragondreams, you should have access to the "Custom Navigation" feature in the Campaign Settings -> Advanced tab.  It's a textbox right above the "Custom CSS" textbox.  Let me know if you don't see it.

    Obsidian Portal Developer

  • dragondreams
    dragondreams
    Posts: 24 edited January 2021

    What size are the icons?

    In the Pacific Rim campaign (I have to use Characters for People, Kaiju and Mecha as that is the only DST capable area), is it possible to do something like:

    (Thanks!)

    ...

         <a href='/characters?tag=People'>

            <span class='nav-icon icon op-icon-characters'></span><span class='nav-text'>&nbsp;&nbsp;Characters</span>

          </a>

    ---

         <a href='/characters?tag=Mecha'>

            <span class='nav-icon icon icon-mecha'></span><span class='nav-text'>&nbsp;&nbsp;Mecha</span>

          </a>

    ---

         <a href='/characters?tag=Kaiju'>

            <span class='nav-icon icon icon-kaiju'></span><span class='nav-text'>&nbsp;&nbsp;Kaiju</span>

          </a>

    ... 

    where there are three nav items that are just a filter of character?

    Post edited by dragondreams on
  • dragondreams
    dragondreams
    Posts: 24

    Where is the right place to set the width?  (perhaps a minwidth setting someplace?)

    Thanks!!!

  • thaen
    thaen
    Posts: 1,064

    @dragondreams,

     

    What size are the icons?

     

    I'm terrible at image stuff, so I may not be answering the question you're asking, but Google Chrome Developer Tools says the icons are 25px x 24px.

     

    is it possible to do something like:

     

    IF we had the ability to apply a filter to the Characters page with a querystring parameter, then that would work, but we don't currently have that ability.  (That is an already requested feature though, so it is on the list.)

    The workarounds would be to use urls to the Search Results instead, which do have the ability to filter by a tag querystring parameter.

    Or to create Wiki Pages for each group that have only the Characters you want on them, and use those urls.

     

    Where is the right place to set the width? 

     

    I'm also not good at layout stuff, so hopefully someone better will answer, but I think the width is being set as a percentage of the width of the entire page.  Here's the CSS that I think is doing it:



    .collapsable-nav-row .front-nav-container {

      width: 16.66667%;

    }

     

    Obsidian Portal Developer

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