Eliminate the Navbar!

Dropbeartots
Dropbeartots

Not sure if there's a way to do this and make the home page a house for buttons that will access various buttons for the page without making it look wonky. I've tried a few of the Navbar mods I've found lying about in tutorials but still can't really get the look I was hoping for. 

 

Here's the page.

https://wilderlandadventures.obsidianportal.com

I'd like to use the triboxes for navigation, instead of the Navbar. Would anyone care to drop any hints or tips on how to accomplish this, if possible? Thanks in advance!

 

 

Comments

  • Kallak
    Kallak
    Posts: 1,090 edited September 2016

    This isn't too tough to accomplish, but does require ascendant status if you aren't already. You'll use the custom CSS to "display:none" the standard navigation (I forget the class/id's required off the top of my head, but they can be found easily enough with your browser's element inspection). Then use HTML elements (divs, links, images, etc..) to create your tribox replacement.

    A thing to note with this, you'll want to have some manner of reverse navigation or easily accessible "Home" link to keep the site straightforward to navigate for visitors, especially new visitors who are used to having the standard navigation.

    EDIT: Another thing worth mentioning here, you'll want to make sure that you are only targeting the public portion of the site with your CSS if you still need the standard navigation on the dashboard side of things, so be careful with that.
    Post edited by Kallak on
    All the best,
    - Kallak
  • Dropbeartots
    Dropbeartots
    Posts: 96

    Okay, I think I've figured something out. Anyone here willing to check it out and see how the navigation works for them and let me know how it goes?

    https://wilderlandadventures.obsidianportal.com

     

  • cgregory
    cgregory
    Posts: 780

    Generally, I can get around, but it does require a couple extra clicks depending on where I am and where I want to go compared to the navbar.

    There is no way to leave the maps page without hitting the back button.

    The character and item pages requires you to enter an item/character to get out of there.

    It will mean you can't use DST character sheets (which may not be an issue, but some players really like using them).

     

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Dropbeartots
    Dropbeartots
    Posts: 96

    Thanks for your input!

    I was noticing that myself about the characters, items & maps pages. I am still trying to think on that one. Not sure how to get around it yet.

    The DST sheets for 5th Ed are not that impressive to me, so I'm fine with that part.

  • cgregory
    cgregory
    Posts: 780

    You could make the navbar visible on those pages only (character-index, campaign-map-index, and item-index) and change the icons to smaller versions of your Tree on a green background image.

    Something like this

    image

     

    .op-icon-book-wiki::before {

       content: url("https://db4sgowjqfwig.cloudfront.net/campaigns/116780/assets/640266/Tree.png";);

    }

    I used your image put cropped it and scaled it down to 36px

    Also you wouldn't need to display every link on the nav bar, maybe just the ones you want.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Dropbeartots
    Dropbeartots
    Posts: 96

    That worked really well for the navbar. Thank you! The only thing that is annoying me is that I cannot locate the background rgba behind the icon row in the navbar to make it transparent.

    I used the below, which does change the code rom rgba to transparent in the inspector, but it does not change the appearance of that background color when viewed.

    .campaign-public-layout #campaign-nav {background-color:transparent;}

    Not sure where I'm missing it.

     

     

  • cgregory
    cgregory
    Posts: 780

    There are two places to add background-color:transparent codes in the nav bar one for the #campaign-nav as you figured out.

    The second for the .campaign-public-layout #campaign-nav .icon (which is the smaller darker one)

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Dropbeartots
    Dropbeartots
    Posts: 96

    Thanks for all the pointers, c. I don't know if I will get rid of the navbar for sure. It actually looks pretty nice now.

  • cgregory
    cgregory
    Posts: 780

    Yeah, it does look good. 

    Giving pointers actually helps me come up with ideas of what to do for mine campaign site. I added some alternate icons on my nav bar shortly after suggesting it for yours.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Bortas
    Bortas
    Posts: 645

    cgregory - I tried pasting that little snippet in, and had no results, am I missing something obvious?

  • cgregory
    cgregory
    Posts: 780

    Should be fairly straight forward. Do you still have the snippet of code saved to your css? If so i can take a look and see what is wrong.

    In my campaign I've changed every one of the icons from the standard.

     

     

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Bortas
    Bortas
    Posts: 645

    Yessir, still saved in my CSS.

    -bort

  • cgregory
    cgregory
    Posts: 780

    Looks like I've changed the code slightly on my site. Try without the quotes around the url/

    Also looks like you have in in your code twice.

     

    .op-icon-book-wiki::before {

        content: url(https://db4sgowjqfwig.cloudfront.net/campaigns/124016/assets/640320/XFront.png);

    }

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Bortas
    Bortas
    Posts: 645

    Getting there... the quotes impacts something, as the old image falls away, but no new image comes in place. I swapped my own image in, and still not getting anywhere. Feeling pretty dense on this!

    -bort

  • cgregory
    cgregory
    Posts: 780

    Odds are you have an extra bracket or are missing a bracket somewhere in your code.

    try moving that code to the first line of you custom css to see if it makes a difference. If it does it means you have an extra bracket, quote, etc somewhere in your code.

    notepad++ is a nice tool for finding extra or missing brackets, quotes etc. I'll copy your css into notepad++ to see if something is messing up the parsing.

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • cgregory
    cgregory
    Posts: 780

    I see what it is you have a ; at the end of the content url. It is preventing the image from loading.

    content: url(https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/657915/wiki.png;);

    change it to

    content: url(https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/657915/wiki.png);

     

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • Bortas
    Bortas
    Posts: 645

    Hah, wow, i'm a special kind... Thanks man!

    -bort

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