@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.
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.
@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.
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:
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:
Comments
@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
Thanks!
Found it. I'll start playing with it a bit!
First thing I noticed - we need to add extra, unused icons we can set for the new buttons.
@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
Just FYI to all, this feature is now out of beta and available to all Ascendant GMs.
Obsidian Portal Developer
Nice! Just changing the names takes about 30 seconds. Very easy.
Very cool. Looking forward to start using this.
Cool, looking forward to playing with this!
Just trying to help out.
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!
However, the new menu item does not match the styling of the other menu items.
@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
I would love to try this out :-)
@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
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'> Characters</span>
</a>
---
<a href='/characters?tag=Mecha'>
<span class='nav-icon icon icon-mecha'></span><span class='nav-text'> Mecha</span>
</a>
---
<a href='/characters?tag=Kaiju'>
<span class='nav-icon icon icon-kaiju'></span><span class='nav-text'> Kaiju</span>
</a>
...
where there are three nav items that are just a filter of character?
Where is the right place to set the width? (perhaps a minwidth setting someplace?)
Thanks!!!
@dragondreams,
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.
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.
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