This theme came about from the need at my organization to have a wiki for procedures that presents a highly usable, intuitive interface for a broad array of users. My hope is that it will serve your needs as well. For screenshots, and more detailed information, please visit http://caseyamcl.com/resources/usableTheme

Note that the original author has not had time to update this template or provide support. Anyone is free to modify/redistribute it from now on… If I do find time to update it, I will post the revision here.

Use the following URL to download this template:

• usable.zip (Version: 1.0 released 2008-09-16)

Refer to template on how to install and use templates in DokuWiki.

Is it possible to still have column or row separation in tables?

Add “border:1px solid;” to usable/blueprint/screen.css line 60

old: th, td {padding:4px 10px 4px 5px;}
new: th, td {border:1px solid;padding:4px 10px 4px 5px;}

Is it possible to still have the Table of Contents?

I was able to to this be adding to main.php at line 78 as follows:

<!-- add next line for table of contents on left side -->
            <?php tpl_toc()?>

Search did not work in my installation. Changed line 59 in main.php from
OLD: <form id='search' class='clearfix' accept-charset='utf-8' action='/doku.php/'>
NEW: <form id='search' class='clearfix' accept-charset='utf-8' action='doku.php'>

This worked for me also.

This did not work quite right for me. I added DOKU_BASE to the search action:

      <form id='search' class='clearfix' accept-charset='utf-8' action='<? echo DOKU_BASE?>doku.php'>

In main.php, the javascript definition has the 'php' missing in the source path to scripts.js which prevents onfocus clearing the 'Search' text. It should look like this (around line 16):

      <script src='<?php echo DOKU_TPL?>/scripts.js' type='text/javascript'></script>

Mediamanager not work (press button in editing - no effect) if no media files (on Firefox). On IE - work.

Just copy the mediamanager.php file from the default template to the usable template folder and that seems to fix problem.

In IE and Firefox - look different. In Firefox - very good. In IE - header with underline and blue.

I had the same problem and found a fix. Just replace the lines 111 to 117 in style.css which look like this:

#content .page h1 a,
#content .page h2 a,
#content .page h3 a,
#content .page h4 a,
#content .page h5 a { color: inherit;
                      text-decoration: inherit;
                      font-family: inherit; }

With the following code:

div.dokuwiki h1 a { color: black; text-decoration: none; }    
div.dokuwiki h2 a { color: black; text-decoration: none; }
div.dokuwiki h3 a { color: black; text-decoration: none; }
div.dokuwiki h4 a { color: black; text-decoration: none; }
div.dokuwiki h5 a { color: black; text-decoration: none; } 

#content .page h1 a { font-family: Georgia, serif; color: black; text-decoration: none; }   
#content .page h2 a { color: black; text-decoration: none; }
#content .page h3 a { color: black; text-decoration: none; }
#content .page h4 a { color: black; text-decoration: none; }
#content .page h5 a { color: black; text-decoration: none; }

Thank you for this. It corrected headings format in internet explorer for me also. It looks much better now. All in all I find this to be an impressive looking template.

I am having an issue with empty spaces when using other plugins (i.e notes, gcal) for whatever reason when I add these plugins there is a large blank space in my page and I have to scroll down to view the contents. Any fix?

I am also having the problem above. It's a Google Chrome issue, but I can't figure it out.

I'm using this template, but the tables do not show borders on the cells. How can I control that?

Add “border:1px solid;” to usable/blueprint/screen.css line 60

old: th, td {padding:4px 10px 4px 5px;}
new: th, td {border:1px solid;padding:4px 10px 4px 5px;}

I would like to reduce the size of the left hand column so that there is more room for body. Perhaps a smaller font for the column compared to body. Any suggestions appreciated?

[June 12, 2009] I found that the appearance in my Firefox wasn't quite right. This browser rounds font-size a lot, so that sometimes font-sizes that are close wind up looking identical. I made it look much better in my Firefox by overriding the template very slightly to say

h3 {font-size:1.65em;}
h4 {font-size:1.35em;}

(Of course this override in my local browser works only for me. Can the generic template be tweaked slightly so this works for everybody?)

If you are having a problem where text is wrapping around images even if they are enclosed in paragraph tags then this fix is for you. The following modification will make it more like the default style where images are displayed on their own line.

Edit line 37 of usable/blueprint/screen.css in the following way

Old:

p img {float:left; margin:1.5em 1.5em 1.5em 0;padding:0;}

New:

p img {margin:1.5em 1.5em 1.5em 0;padding:0;}