How-to: Custom Wiki Sidebar

edited December 2009 in Help & Tips


  • gnunn
    Posts: 423
    Oh, and here's my main "wiki page": to see it in action.
  • autumnschild
    Posts: 153
    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,
  • gnunn
    Posts: 423
    I'm glad you like it! I know at least "one user": has already put it into practice.
  • Mowgli
    Posts: 24
    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!
  • Morrinn
    Posts: 166
    I am so stealing this. Thanks Gnunn, I'll be sure to credit you... somewhere when I get my stuff up and running.
  • countamantea
    Posts: 5
    This is a great sidebar and I've been using it in my campaign, thanks gnunn.
  • Anev
    Posts: 3
    Hey this is great! I've been playing with it, and will credit you when its up and running
  • arsheesh
    Posts: 850
    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.


  • wsocrates
    Posts: 18
    Thank you so much Gnunn for doing this, I am glad I found this out now when I am just starting on my site.
  • gnunn
    Posts: 423
    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:


    *[[MAIN PAGE]]*

    *[[Current Tasks]]*

    *[[The Adventure so Far| Adventure Log]]*

    *[[House Rules]]*

    * [[Players| PCs]]
    * "%{color:blue}NPCs%":

    * [[Countries]]
    * [[Cities]]
    * [[Regions]]
    * [[Important Sites]]
    * [[Maps]]

    * [[Races of the Westerlands| Races]]
    * [[Religions of the Westerlands| Religions]]
    * [[Organizations]]

    *[[GM Techniques]]*

    Page body text goes here
  • vstraydogstrutv
    Posts: 209
    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":
  • Sabotender
    Posts: 5 edited April 2010
    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:

    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
    Post edited by Sabotender on
  • gnunn
    Posts: 423

    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?
  • Sabotender
    Posts: 5
    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 :)

    PS. i fixed the error i had with links :)
  • gnunn
    Posts: 423
    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.
  • Dyluth
    Posts: 92
    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".
  • SkidAce
    Posts: 716
    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.
  • gaaran
    Posts: 740
    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":
  • FrankSirmarco
    Posts: 250
    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.
  • GuyHoyle
    Posts: 9
    This is really awesome! I'm using it at my site, "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!
  • Hardhead
    Posts: 65 edited June 2010
    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. :)
    Post edited by Hardhead on
  • gnunn
    Posts: 423
    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.
  • VentureSix
    Posts: 30 edited June 2010
    Thank you gnunn, for this! It took some time, mine's still pretty basic, but I definitely see the ease and potential here

    Post edited by VentureSix on
  • Anev
    Posts: 3
    Have everything up and running! Thanks once again, its a big help

    "The Land of Corra":
  • Duskreign
    Posts: 1,085
    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.
  • gnunn
    Posts: 423

    I love the color scheme and the transparency you've added to the sidebar! It ties the pages together really well!
  • Anev
    Posts: 3
    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
  • Kassious
    Posts: 5
    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.
  • Everdark
    Posts: 122
    Wicked, Gnunn. Looks awesome. I think I may have to use it. Thanks for the how-to guide, man! Your efforts are appreciated!
  • Takissis
    Posts: 37
    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?
Sign In or Register to comment.