Replacing the standard Obsidian Portal top navigation bar

Kallak

Not sure if this has been posted anywhere before, but I cobbled it together after going over various campaign of the month pages and wikis that I thought looked good - and I thought I'd post it here to share with the community at large. The code below is used to replace the default Obsidian Portal top navigation bar with a replica containing whatever links to pages you would like. I have seen a few pages where the top navigation was replaced, but this was typical with images/buttons. I thought it would be cool to maintain the standard look, but be able to customize the navigation.

The downside is that you have to have this code at the top of every page you intend to replace the menu on, but if you start out with replacing the top navigation in mind, it's not TOO bad to create the pages and just paste it in. HOWEVER, finalize it in advance, cause updating could be quite a chore if your wiki has a large number of pages. Anyway, I hope that this hasn't yet been posted, and that (even if it has) someone finds it and gets some use out of it. I know I've had fun playing with code trying to get it perfected.

~~~~




Home
LINK NAME
LINK NAME
LINK NAME
LINK NAME
LINK NAME


PAGE CONTENT HERE

~~~~

GamingMegaverse

It also should be noted that the top px height does change on some pages, such as the start page. Thanks for posting this, it does come up fairly regularly.
killervp
"A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
Duskreign's "COTM for November 2011":http://www.obsidianportal.com/campaigns/wyrmshadow/wiki_pages/112011

Kallak

Did some more looking around and managed to find slightly cleaner coding for the positioning. As before, might need to play with the numbers slightly to line up from wiki page versus start page. Code is as below. I have noticed one thing that is off slightly. I haven't found a way to fix as of yet - if any more experienced person could chime in, it'd be great as this is nagging me. The text in the navigation tabs (at least on my test page) comes out SLIGHTLY below the text in the normal navigation tabs, despite the boxes lining up perfectly. It's a difference of like 1px lower on the text, but it's still annoying to me. I'd like it to be a perfect replacement. Anyway.
~~~~




Home
LINK NAME
LINK NAME
LINK NAME
LINK NAME




TEXT BODY

~~~~

TheMazeController

Thanks! Great for guys like me who are just starting out!

RaseCidraen

That's actually a really clever idea, and I'm glad someone's thought of it! Kudos to you sir, I tip my fedora in your direction.

Kallak

Almost forgot one thing! In order to make the tab of your choice not have the line below it and thus be the "current active" tab, you need to add a class="active" tag to the link in question. As an example, the code for the navigation for a page I'm working on for my campaign appears below. The page is still in the wiki section obviously, but it's an OOC sort of thing, so i'm giving it its own tab as opposed to like the calendar tab.

~~~~




Home
Adventure Log
Wiki
Characters
Party Documents
Party Treasure
Area Knowledge





PAGE CONTENT

~~~~

Kallak

Update of sorts, I've been continuing to play with the code, trying to fix the issue with the navigation tab text being off while the boxes were perfect. I have found a solution, with only one minor side effect. By altering the positioning of the tabs slightly and making the div position absolute instead of relative, i was able to perfectly align both the tabs and the tab text. Huzzah! Now on to the side effect. Because the position is absolute instead of relative, whenever you edit the page to make changes or additions, after saving, the tabs partially cover up the green box with the "your page has been saved [CONTINUE EDITING]" area. This isn't HUGE, but it's annoying. The only fix I could find for this was to put the absolute positioning div of the tabs into a relative position div, but this recreated the original issue of the tabs being lined up with the tab text being off slightly. grrr!

Anyway, for anyone interested in using this code as opposed to the relative positioning code, I am including it below. I have since found out about "id" attribute of div tags, so I have included them in the newest edition to make identifying/editing easier later. Thanks for reading.

~~~~




Home
PAGE NAME
PAGE NAME
PAGE NAME
PAGE NAME
PAGE NAME
PAGE NAME





[PAGE CONTENT]

~~~~

wolfhound

Wow now THAT is fantastic work. Well done!

Kallak

Thanks :D - took a bit of work to get it where I'm more or less happy with it. Hoping I can get it added to the tips post.

Kallak

So I've discovered another interesting tidbit regarding navigation tab replacements - things placed in the GM only area of a page show up OVERTOP of things from the normal area if they overlap or are placed at the same pixel location. I know I know, "but Kallak, what good is this if only you the GM can see it? It's a nav bar, other people are supposed to see it to navigate around your page?!"

While the above statement is true, the fact that things in GM only go overtop of others means that I can place a duplicate of my replacement nav bar in the GM only area, and make changes just for me, like say the addition of a "GM" tab leading to story notes! FAR more convenient than having to go to the wiki, and click show all in the filter and scroll to teh bottom of the hundred pages of wiki to get to the listing of GM only pages. Personally I plan to put my game writeup and notes in the GM tab (and obviously those pages will be GM access only), but others can do with this info as they wish.

magavendon

That's an excellent idea! Thanks for sharing!

Invictus

Hey all, i have been using this for my wiki and i was wodnering if their was a fix for the large gap made by the code.

See here:
http://www.obsidianportal.com/campaign/mutamon/wikis/main-page

See the gap between the navigation bar and the beginning of the list? how do i eliminate that?

GamingMegaverse

Unfortunately we all have the same issue...
killervp
"A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
"Duskreign's First Ever COTM":http://www.obsidianportal.com/campaigns/wyrmshadow/wiki_pages/112011

Langy

I haven't tried, but you should be able to put the body of the text in a div and move it upwards.

Invictus

This was the solution.
Thanks!

Kallak

I didn't get to see the page with the gap on it, as the issue for your page was resolved before I read this, but I'm interested in knowing, when you were having the gap issue, were you using the code I posted or alternate coding? I'm asking because I haven't had the issue on my wiki page, so I'm wondering if something was accidentally deleted when I posted the code or if there was another issue. My posted code includes a div section for the page content, perhaps this was left off by mistake?

Invictus

I whispered the code to kallak so it wont be a big pile of mess everywhere. but to counteract the space problem i encapsulated the main text with this line:


BLAH


this fixes the space issue. On the front page of the campaign the Top pixel space must be around -43px

To get the page title in the center i had to use this code BEFORE the main text code:


h1. TITLE



its a Frankenstein's monster job to be sure.

I find with all these tutorials online that my campaigns really starting to come along image and accessibility wise.
http://www.obsidianportal.com/campaigns/mutamon

Kallak

Been a while since I posted on this thread, BUT I thought I'd post back and let everyone know that I finally figured out the issue with the relative positioning that caused the tabs to line up but the text to shift slightly. Relatively adjusting the unordered list coding fixes this. Pages that I have noted this is required for so far are: Dynamic Character Sheets and the Comments page. Here's the coding for the menu bar from one of my pages to illustrate.





Home
Adventure Log
Wiki
Characters
Party Documents
Party Treasure
Area Knowledge

Kallak

As a side note, I don't see this topic covered in the FAQ, is this something people would like me to make a tab changing type guide for? I've invested quite a bit of time perfecting this over the months, so I feel I could do it reasonably well.

JaymesBolton

I would like a FAQ of exactly how this works and what it accomplishes. Also any draw backs that my exist because of it.

-Jaymes

"Changing History":http://www.obsidianportal.com/campaigns/l5r-changing-history

Kallak

Hello JaymesBolten,

Basically the code allows you to replicate the default tab navigation of Obsidian Portal and thus create your own tabs to whatever pages you might wish. In essence, you are creating a set of your own tabs and laying it overtop of Obsidian Portal's default tabs. I have seen other campaigns which have done this (and where I learned the basic placement procedure), but they used image files to act as the buttons instead of the tabs. It was my desire to retain the default tab look (as I think it is very clean and good looking), so I went with this instead.

In order to answer your question, I have taken the code to an empty page and pasted it below, for clarification purposes, I have provided line numbers. I'll explain what the code is doing and give pros and cons afterwards. Firstly, here is the code from a blank page for my campaign (for your own campiagns, you'll want to change the addresses in the links).

1.
2.
3.
4.
5. Home
6. Adventure Log
7. Wiki
8. Characters
9. Party Documents
10. Party Treasure
11. Area Knowledge
12.
13.
14.
15.
16.
17. PAGE CONTENT GOES HERE
18.

Kallak

Okay, so what is going on is this (line by line). Line 1 is simply assigning the "textile_longtext page-body" class to everything from Line 1 to Line 15 where the ends it. Line 2 is where stuff actually starts happening with respects to your mneu. The id value is just a name to identify the div entity by, so you can make that whatever will help you spot it later. It also sets the style of the section of webpage that will be laid overtop of the default Obsidian Portal tabs - a section of website that is 730px wide that has white as the background color. It is listed as absolute in position at 268px from the top of the page. Absolute position means fixed, as in will always show as there and cannot be moved by other things that might alter your site (more on this later in the pros/cons section).

Line 3 creates a section of website within the section created in Line 2 and calls to the class "tab-container", this is the class from Obsidian Portal's website and means that everything contained on that section of website will use all attributes and settings attributed to that class. In this case, that of the tab-container, which includes everything from Line 3 until Line 13. Line 4 is the beginning of the Unordered List and calls to the class "tabnav". This is where the links provided are formatted and placed into the tabs. If you don't call to this class, the links will just be a stanard Unordered List. Lines 5-11 are the links which are use for our tabs (again, taken from my game, the links and names will be of your choosing). and Line 12 ends the Unordered List. You will notice that Line 8 has the class attribute of "active" inside of the hyperlink. This means that is the tab to be shown with no line at the bottom or the current tab being viewed. Moving this around will change which tab the site shows as being the current tab.

Lines 13-15 close out each respective div in reverse order. Line 13 closes out line 3, Line 14 closes out Line 2, and Line 15 closes out Line 1.

Line 16-18 is where the actual rest of your page comes in. All of the previous code has altered your page and so if you do not set the starting location for your page content, there will be a large gap between your custom menu and the beginning of your page content. By placing your page content inside of a section of website (starting with Line 16 and ending with Line 18), you can correct this gap. You'll note that Line 16 sets the position and fixes the gap error. Line 17 will be where all of your page content goes and thus will be certainly more than one line on your actual page.

Kallak

Now that you have had an explanation of the code, what are the pros and cons to this setup.

PROS:
You can create a custom tab navigation for your site! Not every campaign is the same, and you may wish to have different features that don't fit into the wiki the way that you'd like or thta you want to make more prominant. As an example, you can see from my links above that I use the tabs to separate Party Documents, Treasure and Area Knowledge/Maps onto their own tabs.

You aren't stuck with tabs that you don't want. Using myself as an example, I have no use for the forum tab, or the calendar tab, so they were basically wasted space on my page. This allowed me to get rid of them and put tabs that I want my players to have easy access to.

You set your campaign apart from the standard faire. You aren't just some noob, you're a person who is savvy enough to customize the site to your liking.

CONS:
This code must be placed on every page that you wish to have the custom navigation on. Meaning you need to copy paste it on any new page and if any page is missing it, it can mess up your navigation.

Altering or Updating in a pain on large sites. If you end up changing your mind after having placed this code on 200 wiki pages, going back and editing a tab or adding a new one will be a pain in the ass. FINALIZE YOUR TABS BEFORE YOU START!!!

Messages from Obsidian Portal causes the original menu to be visible below yours. Anytime that OP sends out a message that's displayed on all sites (like server maint or the like), that message pushes down the original OP menu, but not your custom one because you fixed its position with the "position:absolute" entry on Line 2. So whenever there's server maint or anything that OP sends a message out on, it will bugger up your page slightly for the day or so that the message is active on. This also applies to smaller messages on a daily basis, like when you edit a page and get the green area asking if you'd like to "continue editing", your custom menu will appear overtop of this until the page is refreshed and the message is gone.

Code on the page will potentially confuses less savvy players who wish to update pages. If your players aren't HTML gurus, this block of code at the beginning of every page might confuse them until you lay it out for them.

Minor alterations to the code will be necessary for SOME pages. Examples for this include character pages that use the Dynamic Character sheets, the home page and the comments page. The alteration required will change slightly based on which page it is for. For the character sheets and comments page, you can see that I had to add a left adjustment to Line 2, for example.

JaymesBolton

That makes sense. I hadn't decided if I was going to use the image replacing the nav bar yet anyways and this could be an interesting alternative. Thanks for all the work Kallak.

-Jaymes

"Changing History":http://www.obsidianportal.com/campaigns/l5r-changing-history

Kallak

No knock to the image replacement bars, but I think custom tabs are cleaner, and mesh better considering that they are the "default"

Savannah

Can you have more/fewer tabs than the standard, or do you have to match them exactly?

Kallak

You can have as many as you want, just bear in mind that if it's wider than 732px, it'll go off the page and under the boxes on the side.

arsheesh

Just added this to Chainsaw's Tips page (in the spillover section). Thanks for contributing Kallak, it really does help the community.

Cheers,
-Arsheesh

Job

Hooray! I was able to get this to work! I had two problems crop up, but a lot of trial-and-error testing helped me through it.

1) My "top:268px" actually turned out to be "top:368px". I'm not sure why, but to get the menus to line up, I had to add the extra 100 pixels.

2) I had cut-and-pasted in the code directly from Kallak's above post and the buttons could not locate my OP campaign pages--I kept getting 404 errors. Well, it turns out that the quote characters in these forum posts are not the same quote characters used in the page editing blocks. Once I replaced the quote marks, it worked like a charm!

Thank you Kallak!!! Excellent work!

Job.

Kallak

Hey Job, glad that you like the menu system. Really hoping that people enjoy it and get the most out of it. With regards to your post, just thought I'd chime in.

#1. For reference, the additional 100px that you had to add to your "top" entry was because your top banner image is 100px taller than mine. Hope this helps.

#2. I was unaware of this, but this is good to know. I have copy/pasted things from the forums before and had issues with making them work. Makes me wonder if this was why.

GamingMegaverse

Thanks again Kallak for posting this. The quotes are different- this is a common issue. Also, Job and others, the nav bar height will change depending on the area- it is different between adventure logs and wiki pages, for example. Kallak's campaign is "here":http://www.obsidianportal.com/campaigns/dangerous-kalamar-4 The nav bar he uses is pretty darn cool!!
killervp
"A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
"Duskreign's First Ever COTM":http://www.obsidianportal.com/campaigns/wyrmshadow/wiki_pages/112011
"OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/