That's a great how-to gnunn! Thanks for being so thorough! I hope everyone sees how great this is and we start seeing some really great home made navigation for campaigns.
I'm glad you like it! I know at least "one user":http://www.obsidianportal.com/campaign/dream-seekers/wikis/main-page has already put it into practice.
Thanks, Gnunn! I put this to use in my game as well - it's awesome! Now all I've got to do is find something cool to fill the space on my Wiki main page that used to be taken up with all that navigation stuff!
Just in case anyone is interested, I've created some graphic images that can be used as "buttons" for Grunn's "Site Index" and "Recaps Main" navigation system. You can find these at the "Free Navigation Buttons":http://www.obsidianportal.com/campaign/tales-of-darkmoon-vale/wikis/navigation-buttons page of my site.
Hey all, I'm really happy that so many people have found this little sidebar so useful. I wanted to post some slightly updated code that Creates a cleaner look in my opinion.
What's changed. I have switched the "float:left" attribute for "display:inline-block" This has the effect of ensuring that the main page text continues in a straight column below the sidebar (but it requires that the page body be placed in its own div with "display:inline-block" as well.
I found that "float:left" would occasionally make things look wonky depending on browsers and resolutions and whether your main page text extended below the sidebar.
Tip: When using inline-block, make sure the total width of your divs and margins do not exceed the width of the wiki page (730px?) also, I've found that sometimes, if you accidentally leave a line-break between the end of one in-line div and the start of another, it will cause them to stack vertically instead of side by side.
Hey thanks for this!
i modified it a little cause it was breaking my tables :P
"Try it here":http://www.obsidianportal.com/campaign/agon-mhiyr1/wikis/main-page
try scrolling and resizing the browser
basically, i use both the menu and the nav buttons. I changed so that their positions are off the side.
as i write the nav buttons first, they are hidden behind the menu, but hteir position is fixed to the browser not the page, so if you scroll down they will apear.
here is the code:
"http://d20.sabotender.com/obsidian_menu.txt":http://d20.sabotender.com/obsidian_menu.txt
i also tried using to include the menu from an external file, but Obsidian didnt let me load external files :P
if this was possible, it would be easier to edit the menu without needing to edit every single page :P
NOTE: i am having some problems with the menu "covering" up the links on my page, trying to fix it now
This is a neat idea and I think it could be very useful for other things like adding spoilers, puzzle solutions etc. that you don't mind people seeing, but which you don't want to... spoil... for everyone.
My only concern -from a design standpoint- about using it for a menu is that visitors to your page who have not read this thread may not realize that you need to zoom out your browser to see the nav tools, and so may not even know they are there. I don't know if they show up automatically on higher res screens, but I'm working at 1024x768 at the moment and couldn't see the menu until I zoomed out my browser.
Also, out of curiosity, what was happening with the original code that was breaking your tables?
"testpage":http://www.obsidianportal.com/campaign/agon-mhiyr1/wikis/testpage
that page uses your original code
The problem i was having was that the tables were being pushed out under the menu on the right (opera)
while in Firefox they were being pushed down underneath the menu
i noticed that your updated code works however :)
"testpage2":http://www.obsidianportal.com/campaign/agon-mhiyr1/wikis/testpage2
PS. i fixed the error i had with links :)
"http://d20.sabotender.com/obsidian_menu.txt":http://d20.sabotender.com/obsidian_menu.txt
Yeah, I'm guessing the reason the tables did that is that textile defaults to making tables span the whole page or the full width of whatever div container they are in. So unless you specify a smaller width for the table or its containing div, it will get pushed below or behind any divs with a "float" attribute. That's one of the big reasons I updated my code to use the "inline-block" instead of "float". It makes the positioning much more reliable.
I just found this helpful little thread now and I'll definitely be implementing it into my campaign's wiki main page as soon as possible. My only hope is that I can organize the code to display the index box and my other graphics on the main page without any issues like you have with "The Westerlands".
I would like to thank you for this tool. Most of us here are creative people, but not all of our (and especially mine) creativity is in coding. Without the help of you and folks like you, sometimes the creativity becomes work.
And besides, seeing how you do it will eventually rub off on me and I might learn something new.
Thanks for the code and the constant good work, gunn and chainsaw! I know I'm the 400th person to say this, but I'll be utilizing this on my campaign page.
This is really awesome! I'm using it at my site, "Encounter RISICAL!":http://www.obsidianportal.com/campaigns/encounter-risical
I shudder to think, though, what will happen when I need to change all the menus (adding new links, for instance). I don't suppose I can change all the menus at once, but I hope somebody will chime in with a way to do exactly that. I can forsee a LOT of pages on my site.
I'm pleased and happy now, though. Thanks again, GNUNN!
I've had to change mine a couple times. It's a huge bitch, yeah. I really wish they'd implement sidebars for the wiki.
*EDIT*: Here's some useful info. Your sidebar should contain an option called something like "General Information." This is the page where you can stick anything that doesn't fit anywhere else. I have a sidebar for People, Geography, History, etc. but when I created a Calendar for my game, where do I put it? General Info. By putting the Calendar there, I didn't have to go back and add more to the sidebar. Very important tip, and one I learned the hard way. :)
The fact that you have to edit each page's sidebar individually is part of the reason I set up my system the way I did. I only include the sidebar on main section pages. On all the sub-pages, I use a simple 2-button system that will take the user to the top of the section, or the main index.
That helps keep the sidebar from getting too long, and if I need to change it, I just go down through the sidebar links copying and pasting the code into the main page for each section. The whole procedure takes just a couple minutes, and I rarely need to do it as the vast majority of pages I create just use the two button system.
It seems you have to choose between having the sidebar float in Chrome or in Firefox, I use the code so generously given me and it works on FF but not Chrome. I use the "fix" and the bar floats in Chrome but is embedded in Firefox.
Comments
Well, I whipped one up that is available as a pdf for viewing and download at the url below:
"http://docs.google.com/fileview?id=0B5gBfncCduKOY2YzOWU0YTQtZGE5Yi00ZjI2LWIwNzItYzk2MjU5YTk2MDZm&hl=en":http://docs.google.com/fileview?id=0B5gBfncCduKOY2YzOWU0YTQtZGE5Yi00ZjI2LWIwNzItYzk2MjU5YTk2MDZm&hl=en
Let me know what you think! Happy coding!
Good Gaming,
AutumnsChild(dan)
If we had a rep system I'd lay one on you!
Cheers,
-Arsheesh
What's changed. I have switched the "float:left" attribute for "display:inline-block" This has the effect of ensuring that the main page text continues in a straight column below the sidebar (but it requires that the page body be placed in its own div with "display:inline-block" as well.
I found that "float:left" would occasionally make things look wonky depending on browsers and resolutions and whether your main page text extended below the sidebar.
Tip: When using inline-block, make sure the total width of your divs and margins do not exceed the width of the wiki page (730px?) also, I've found that sometimes, if you accidentally leave a line-break between the end of one in-line div and the start of another, it will cause them to stack vertically instead of side by side.
Anyway, here's the updated code:
INDEX
*[[MAIN PAGE]]*
*[[Current Tasks]]*
*[[The Adventure so Far| Adventure Log]]*
*[[House Rules]]*
+*REFERENCES*+
*People*
* [[Players| PCs]]
* "%{color:blue}NPCs%":http://www.obsidianportal.com/campaign/the-westerlands/npc-tracker
*Places*
* [[Countries]]
* [[Cities]]
* [[Regions]]
* [[Important Sites]]
* [[Maps]]
*Groups*
* [[Races of the Westerlands| Races]]
* [[Religions of the Westerlands| Religions]]
* [[Organizations]]
*[[GM Techniques]]*
Page body text goes here
"The Serpent Kingdoms":http://www.obsidianportal.com/campaign/the-serpent-kingdoms/wikis/main-page
i modified it a little cause it was breaking my tables :P
"Try it here":http://www.obsidianportal.com/campaign/agon-mhiyr1/wikis/main-page
try scrolling and resizing the browser
basically, i use both the menu and the nav buttons. I changed so that their positions are off the side.
as i write the nav buttons first, they are hidden behind the menu, but hteir position is fixed to the browser not the page, so if you scroll down they will apear.
here is the code:
"http://d20.sabotender.com/obsidian_menu.txt":http://d20.sabotender.com/obsidian_menu.txt
i also tried using to include the menu from an external file, but Obsidian didnt let me load external files :P
if this was possible, it would be easier to edit the menu without needing to edit every single page :P
NOTE: i am having some problems with the menu "covering" up the links on my page, trying to fix it now
This is a neat idea and I think it could be very useful for other things like adding spoilers, puzzle solutions etc. that you don't mind people seeing, but which you don't want to... spoil... for everyone.
My only concern -from a design standpoint- about using it for a menu is that visitors to your page who have not read this thread may not realize that you need to zoom out your browser to see the nav tools, and so may not even know they are there. I don't know if they show up automatically on higher res screens, but I'm working at 1024x768 at the moment and couldn't see the menu until I zoomed out my browser.
Also, out of curiosity, what was happening with the original code that was breaking your tables?
that page uses your original code
The problem i was having was that the tables were being pushed out under the menu on the right (opera)
while in Firefox they were being pushed down underneath the menu
i noticed that your updated code works however :)
"testpage2":http://www.obsidianportal.com/campaign/agon-mhiyr1/wikis/testpage2
PS. i fixed the error i had with links :)
"http://d20.sabotender.com/obsidian_menu.txt":http://d20.sabotender.com/obsidian_menu.txt
And besides, seeing how you do it will eventually rub off on me and I might learn something new.
Thanks again.
Unconquered Kingdoms, July 2016 CotM
"Click here":http://www.obsidianportal.com/campaign/melekar/wikis/main-page
I shudder to think, though, what will happen when I need to change all the menus (adding new links, for instance). I don't suppose I can change all the menus at once, but I hope somebody will chime in with a way to do exactly that. I can forsee a LOT of pages on my site.
I'm pleased and happy now, though. Thanks again, GNUNN!
*EDIT*: Here's some useful info. Your sidebar should contain an option called something like "General Information." This is the page where you can stick anything that doesn't fit anywhere else. I have a sidebar for People, Geography, History, etc. but when I created a Calendar for my game, where do I put it? General Info. By putting the Calendar there, I didn't have to go back and add more to the sidebar. Very important tip, and one I learned the hard way. :)
That helps keep the sidebar from getting too long, and if I need to change it, I just go down through the sidebar links copying and pasting the code into the main page for each section. The whole procedure takes just a couple minutes, and I rarely need to do it as the vast majority of pages I create just use the two button system.
It's far from ideal, but it's a good stopgap.
"Mine":http://www.obsidianportal.com/campaigns/profit-and-peril
"The Land of Corra":http://www.obsidianportal.com/campaigns/11454
I love the color scheme and the transparency you've added to the sidebar! It ties the pages together really well!
Ob'Portal makes me cry.