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
~~~~
Comments
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
Just trying to help out.
~~~~
Home
LINK NAME
LINK NAME
LINK NAME
LINK NAME
TEXT BODY
~~~~
- Kallak
~~~~
Home
Adventure Log
Wiki
Characters
Party Documents
Party Treasure
Area Knowledge
PAGE CONTENT
~~~~
- Kallak
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]
~~~~
- Kallak
- Kallak
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.
- Kallak
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?
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
Just trying to help out.
Thanks!
- Kallak
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
Home
Adventure Log
Wiki
Characters
Party Documents
Party Treasure
Area Knowledge
- Kallak
- Kallak
-Jaymes
"Changing History":http://www.obsidianportal.com/campaigns/l5r-changing-history
-Jaymes
Campaign of the Month Febuary 2013
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
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
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.
- Kallak
-Jaymes
"Changing History":http://www.obsidianportal.com/campaigns/l5r-changing-history
-Jaymes
Campaign of the Month Febuary 2013
- Kallak
- Kallak
Cheers,
-Arsheesh
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.
#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.
- Kallak
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/
Just trying to help out.