Customize navbar

Katiekat
Katiekat

So, i want to customize the navbar to have different links than now. I'm quite fluent in CSS but I'm both rusty and not yet good with obsidian portals functions. 

Comments

  • cgregory
    cgregory
    Posts: 780

    The main way people have done it is to hide the old navbar and create your own from scratch. The main drawback is you need to add the code for the new navbar on each wikipage and each adventure log. CSS doesn't really let you change links. It is more about changing layout rather than content.

    In my case I only wanted to change the links on my navbar on one page; my main wiki page.

    I simply overlayed the icon for my calendar icon with a duplicate calendar icon that had a different link, but it was done with html from the main wiki page, not really with CSS except for the positioning of the new icon over the old one.

    For players of my campaign it replaces the calendar link with an in game calendar link, for non players it replaces the character's link with my in game calendar link. I will eventually change it so it adds an additional link for nonplayer visitors rather than overlaying.

     

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • cgregory
    cgregory
    Posts: 780

    So for example, I added the following code to my main wiki page that creates the class xcomcalendaricon

    <a href="https://x-com-defiance.obsidianportal.com/wikis/dec-2016";

    <img class="xcomcalendaricon" src="https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/678569/xcomcal2.png">;

    </a>

     

    If you aren't a member of my campaign it adds the calendar icon to the bottom of the navigation icon list. If you are a member of my campaign it also adds it to the bottom of the navigation icon list but the list is longer so it needs a different top value.

    :not(.campaign-member) .xcomcalendaricon {position:absolute; TOP:216px; LEFT:15px; z-index:999}

    .campaign-member .xcomcalendaricon {position:absolute; TOP:396px; LEFT:15px; z-index:999}

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Katiekat
    Katiekat
    Posts: 14

    Thanks for the info! I am however a bit dusty in the head right now. 

    So.. how do i remove links?

  • cgregory
    cgregory
    Posts: 780

    You can hide them using display:none

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Katiekat
    Katiekat
    Posts: 14

    Thanks!

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