How to move the sidebar under the mainMenu

Update: This technique only worked with Version 1.2 of TiddlyWiki. TW 2.0 uses templates for rearranging the structure. I’ll try to clean this up noting 2.0 differences some time. The main thing is to edit the PageTemplate shadow tiddler and leave out the javascript.

Before we attempt to rearrange the page’s layout, it is important to understand the page’s structure. What is the page’s structure? Think of a tree. The base element for a web page is the HTML element, like the trunk of a tree. Many elements branch out of the HTML element and even more elements branch out of those elements. So the page’s structure branches out like a tree. Got it?

Now the elements that we are concerned with are the MainMenu and Sidebar. Here’s how they sit in TiddlyWiki:

* ContentWrapper
* * Sidebar
* * * SidebarOptions
* * * SidebarTabs
* * mainMenu
* * DisplayArea (where the tiddler’s are)

To move the sidebar under the MainMenu we have to move it in two ways: 1) we need to place the MainMenu before or at the top of the sidebar (using JavaScript) and 2) we have to change how it displays on the page (using CSS).

Create a tiddler and name it whatever you want. (‘HTML Structure’ is usually a good name.) Give it the tag of ‘systemConfig’. This will make it execute the JavaScript in the tiddler the next time the page is refreshed. Now insert the following code:

var sidebar = document.getElementById('sidebar');

This ‘grabs’ the sidebar then grabs the mainMenu element and moves it to be before the sidebarOptions element. Save your TiddlyWiki file and refresh it. This will execute the new HTML Structure tiddler and rearrange the page structure. Now the page’s structure looks like this (notice where the mainMenu has moved to):

* ContentWrapper
** Sidebar
*** ”mainMenu”
*** SidebarOptions
*** SidebarTabs
** DisplayArea (where the tiddler’s are)

You may be scratching your head wondering why we need to do anything else. In the TiddlyWiki the mainMenu is overlapping the sidebar and its still on the wrong side of the page. We’ll fix it with CSS.

CSS rules allow you to change how the page displays. They’re pretty easy to understand once you see them written out. We’ll just add a few rules that undo the default TiddlyWiki styles.

Create a tiddler named ‘StyleSheet’ and add the following rules:

position: static;
left: 0;
margin-right: 0;

The first rule turns off a ‘position: absolute;’ rule. Absolute positioning is what make the mainMenu overlap the sidebar. ‘Static’ tells the sidebar to move on down and display after the mainMenu.

The second rule tells the sidebar to be zero pixels from the left side of the screen. It was set at ‘right:0;’ by TiddlyWiki before.

The final rule is actually not necessary but once we move the sidebar to the left side of the screen we want to let the tiddler’s fill in the empty area again. So we remove the displayArea’s right margin.

To keep the TiddlyWiki useable you’ll probably want to keep the mainMenu realatively short. Next time I’ll show you how to make your mainMenu horizontal and part of the header.

3 thoughts on “How to move the sidebar under the mainMenu

  1. been trying to get this to work.

    when I load the page, I get an error on HtmlStructure ‘Type Error – sidebar has no properties.

    Also, the display area is on the right as a large 2nd column, but below the main menu

    any advice appreciated.

  2. Hi Clint,

    just wanted to let you know that I’m glad about the updated TiddlyPedia style.
    First I got the same Error as metioned above and the Header was always on top of the page. As I realized that the tested style was based on an older version I became a bit sad ;-). A search in TW google group led me to the 2.0 version on your themes & plugins TW. Thank you so much for updating. I love TiddlyPedia.

    a new TW fan from Germany

Comments are closed.