Custom side menu items

2»

Comments

  • thaen
    thaen
    Posts: 540

    @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: 22

    Thanks!

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

  • NimrodYanai
    NimrodYanai
    Posts: 22

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

     

  • thaen
    thaen
    Posts: 540

    @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: 540

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

    Obsidian Portal Developer

  • Jynx001
    Jynx001
    Posts: 77

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

    Cool, looking forward to playing with this!

    Just trying to help out.  Changed name from killervp to Gaming Megaverse to match other sites.

    image

     

  • NimrodYanai
    NimrodYanai
    Posts: 22 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: 22

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

  • thaen
    thaen
    Posts: 540

    @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: 540

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

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

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

May's Campaign of the Month is Baghdad on the Bayou!

Read the feature post on the blog!
Or 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