Not signed in (Sign In or Register)
    •  
      CommentAuthorgnunn
    • CommentTimeDec 6th 2009 edited
     

    I got a request to write-up a how-to guide for creating a navigation sidebar similar to the one on my campaign’s wiki.

    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

    Let me know what you think! Happy coding!

    •  
      CommentAuthorgnunn
    • CommentTimeDec 6th 2009
     

    Oh, and here’s my main wiki page to see it in action.

  1.  

    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.

    Good Gaming,
    AutumnsChild(dan)

    •  
      CommentAuthorgnunn
    • CommentTimeDec 7th 2009
     

    I’m glad you like it! I know at least one user has already put it into practice.

    •  
      CommentAuthorMowgli
    • CommentTimeDec 7th 2009
     

    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!

    If we had a rep system I’d lay one on you!

    •  
      CommentAuthorMorrinn
    • CommentTimeDec 20th 2009
     

    I am so stealing this. Thanks Gnunn, I’ll be sure to credit you… somewhere when I get my stuff up and running.

  2.  
    This is a great sidebar and I've been using it in my campaign, thanks gnunn.
    •  
      CommentAuthorAnev
    • CommentTimeJan 16th 2010
     
    Hey this is great! I've been playing with it, and will credit you when its up and running
    •  
      CommentAuthorarsheesh
    • CommentTimeMar 18th 2010
     

    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 page of my site.

    Cheers,

    -Arsheesh

    •  
      CommentAuthorwsocrates
    • CommentTimeMar 19th 2010
     
    Thank you so much Gnunn for doing this, I am glad I found this out now when I am just starting on my site.
    •  
      CommentAuthorgnunn
    • CommentTimeMar 19th 2010
     
    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.

    Anyway, here's the updated code:

    <div style="width:150px;display:inline-block;margin-right:20px">
    <div style="font-family:garamond;font-size:11pt;line-height:normal;border:1px solid black;">

    <div style="background:#660000;color:#FFFFFF;font-weight:bold;padding:1px 4px 1px 6px;fon-size:12pt">INDEX</div>

    <div style="background-color:#ddd;alink:red;padding:6px 4px 1px 6px;">

    *[[MAIN PAGE]]* <br>
    *[[Current Tasks]]* <br>
    *[[The Adventure so Far| Adventure Log]]* <br>
    *[[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]]*

    </div>
    </div>
    </div>
    <div style="width:550px;display:inline-block;vertical-align: top">

    Page body text goes here

    </div>
  3.  

    Hey gnunn I appreciate the ever-loving hell out of you for posting this. I thought I’d share what I did using image files in place of straight links.

    The Serpent Kingdoms

    •  
      CommentAuthorSabotender
    • CommentTimeApr 23rd 2010 edited
     

    Hey thanks for this!
    i modified it a little cause it was breaking my tables :P
    Try it here
    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

    i also tried using <script> 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

    •  
      CommentAuthorgnunn
    • CommentTimeApr 23rd 2010
     
    @Sabotender

    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?
    •  
      CommentAuthorSabotender
    • CommentTimeApr 23rd 2010
     

    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

    PS. i fixed the error i had with links :)
    http://d20.sabotender.com/obsidian_menu.txt

    •  
      CommentAuthorgnunn
    • CommentTimeApr 23rd 2010
     
    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.
    •  
      CommentAuthorDyluth
    • CommentTimeMay 3rd 2010
     
    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".
    •  
      CommentAuthorSkidAce
    • CommentTimeMay 20th 2010
     
    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 again.
    •  
      CommentAuthorgaaran
    • CommentTimeMay 21st 2010
     

    Below you’ll find a link to my page where I’ve used images for the side bar. A big thanks to gnunn (and chainsaw) for the formatting tutorials!

    Click here

  4.  
    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.
    •  
      CommentAuthorGuyHoyle
    • CommentTimeJun 14th 2010
     
    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!
    •  
      CommentAuthorHardhead
    • CommentTimeJun 14th 2010 edited
     

    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. :)

    •  
      CommentAuthorgnunn
    • CommentTimeJun 14th 2010
     
    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's far from ideal, but it's a good stopgap.
    •  
      CommentAuthorVentureSix
    • CommentTimeJun 16th 2010 edited
     

    Thank you gnunn, for this! It took some time, mine’s still pretty basic, but I definitely see the ease and potential here

    Mine

    •  
      CommentAuthorAnev
    • CommentTimeAug 10th 2010
     

    Have everything up and running! Thanks once again, its a big help

    The Land of Corra

    •  
      CommentAuthorDuskreign
    • CommentTimeAug 10th 2010
     

    VentureSix and Anev, I am very impressed with your sites. I don’t know why I never did before, but I’m glad I finally got the chance to discover them.

    •  
      CommentAuthorgnunn
    • CommentTimeAug 10th 2010
     
    Anev,

    I love the color scheme and the transparency you've added to the sidebar! It ties the pages together really well!
    •  
      CommentAuthorAnev
    • CommentTimeAug 10th 2010
     

    Duskreign and Gnunn thank you so much! The site is still a WIP and I wouldnt have been able to make it without the creativity of people on this site

    •  
      CommentAuthorKassious
    • CommentTimeNov 30th 2010
     
    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.

    Ob'Portal makes me cry.
    •  
      CommentAuthorSHINenzo
    • CommentTimeDec 1st 2010
     

    Wicked, Gnunn. Looks awesome. I think I may have to use it. Thanks for the how-to guide, man! Your efforts are appreciated!

    •  
      CommentAuthorTakissis
    • CommentTimeDec 1st 2010
     

    Kassious, I have used both FF and Chrome and it works for me. Can you put up a link to your campaign and maybe one of us coders can take a look at it?

    •  
      CommentAuthorDuskreign
    • CommentTimeDec 2nd 2010
     

    Takissis, I can confirm that it seems to be working fine on both Firefox and Chrome. Also, lookin’ pretty sweet, Anev!

    • CommentAuthorfirebird12
    • CommentTimeApr 10th 2011
     
    This is awesome, thanks gnunn!

    Is there a way to put this into some sort of text file that I can link to in all of my wiki entries (sort of like a server-side include)? I've got the layout and such pretty much finalized, but if I decide to change something, I'd have to have to edit dozens of entries.
    •  
      CommentAuthorgnunn
    • CommentTimeApr 10th 2011
     
    Firebird,

    Unfortunately, OP does not currently support CSS templates, and I'm 99% sure it does not allow content to be pulled dynamically from another source like a text or xml file. Right now, any UI needs to be hard coded into each page.

    That being said, I have recently implemented a strategy, which I find helps tremendously on the maintenance end. I have created template documents in Evernote, which include the code for various page types (section pages, adventure logs etc.) When I want to update or create a new page, I simply plug the page content into the content section of my template and copy and paste to the wiki.

    The advantage of setting up these templates outside of OP is that you can gray out the code that needs to stay the same from page to page, so you are less likely to alter it by accident and it is easier to spot the content in the mass of code.

    I feel like using this strategy has made my page update process much quicker than it used to be.
  5.  

    I’m rebooting the Spelljoined pages soon to include Gnunn’s sidebar. Tweaking it now. Thanks for this.

    •  
      CommentAuthorwolfhound
    • CommentTimeOct 6th 2011
     

    I’m not home to test this myself or I wouldn’t bother asking but… since this menu style is within the main live area of the site; iPad 2’s running Safari (that normally ignore the more common left floating menus) will now display this menu, correct?

  6.  

    Okay, all installed and SO MUCH better! Gnun, you’re the man!
    http://www.obsidianportal.com/campaigns/spelljoined

    •  
      CommentAuthorkillervp
    • CommentTimeOct 7th 2011
     

    Silly DMLoki, you know how to link.
    Seriously folks, Spelljoined is a must read!! I check out the adventure logs regularly- great stuff!

    killervp
    A God…Rebuilt

  7.  

    Thanks killervp! I’m flattered, and must point out that is mostly because of the wonderfully talented players I’ve got who actually write journals! Hope you like the new layout and functionality, I’ve separated out the journals and such to make them easier to access.

    Gnun is getting added to my credits page for the wonderful work on the side navbar.

    •  
      CommentAuthorZeram
    • CommentTimeNov 11th 2011
     
    I incorporated gnunn and sabotender's sidebar on my wiki page but now I cannot edit the page after i initially inputted the script and save the page. I mouse over the edit button but I cannot select it and I believ it's due to the sidebar being there. How can I fix this? I'm pretty much handcuffed if I cannot edit the pages where that sidebar is located.
  8.  

    That’s really really weird. Have you tried clearing your browser’s cache and reloading?

  9.  

    Ahhh! I think I know your problem Zeram – I ran into that problem when I was creating the floating sidebar. The problem occurs due to one of the div’s having a width that’s much too wide.

    To edit the pages, just log in and go to the webpage – then select the HTML section and append “/edit” to the end of it.

    This should allow you to get at the code in order to trim down one of the divs… if the code is what I think it is, the outermost div is too big, and can be shrunk to 1px. If you need more help, post or PM the code to me and I’ll look at it.

    •  
      CommentAuthorkillervp
    • CommentTimeNov 12th 2011
     

    Thanks Rase… Same advice as above…

    killervp
    A God…Rebuilt
    Duskreign’s COTM for November

    •  
      CommentAuthorZeram
    • CommentTimeNov 12th 2011 edited
     
    I decided to go with gnunn's sidebar due to a player's problems with viewing the page with the sabotender sidebar in his IE browser. This fixed the problem and with Rase's help I've figured out how to edit the wiki page from html. Thanks a lot for the help!
  10.  
    Sir!

    Thank you, Gnunn, for working all this out. I've been struggling with it for a while now and this just nails it. Great work!