roundbox Template

(Original author: Christopher Arndt)

Based on the design of Chris's homepage. Boxes that divide the page into a header, sidebar and main content area. In some browsers, for example Firefox, the boxes may have round corners.

Author: Don Bowman (was ChristopherArndt)
Date: 2009-01-26

Roundbox is a template for DokuWiki, that was built to match the style of Chris's homepage, which is in turn based on a design from Open Source Web Designs. It has a clear, tableless design build on boxes, which divide the page in three main sections: the header, a sidebar, and the main content area. The template is suitable for sites, that have read-only access for non-registered users, since all buttons can switched on/off, depending on acl levels and group membership.

Click the image to the left to see a bigger screenshot!

There is now a new release which has made Roundbox compatible with the 2008-05-05 release of DokuWiki. It incorporates the changes discussed below and also some additional updates to make it easier to use.

Feel free to send your experiences with this template by email or write a comment below.

See what's new here!

1. Download the template archive.
2. Extract it to <dokuwiki>/lib/tpl. This will create a subfolder called roundbox.
3. Use the Admin Configuration Settings to select the template.
4. Optional: configure some aspects of the template (see Configuration).
5. Optional: select a theme (see Themes).

With the 2009-06-21 version the theme is a configuration option. The theme can be selected through Configuration Settings.

With the 2009-01-26 version it is possible to change the theme by modifying the file style.ini. Some suggested themes have been included in the themes folder. To use these, simply copy and rename one of them to replace the existing style.ini.

This template draws ideas and uses code from the following:

• The default template distributed with DokuWiki as of version 2005-09-19 2008-05-05
• The sidebar template
• The Better navigation template
• It also includes some CSS styles taken from different plugins which I use at my site. These all went into the file plugins.css. The use of plugins.css has been dropped in the 2009-01-26 version. It may be re-instated later.

• http://decaturclassical.org/
• http://www.phppatterns.com/
• http://www.muckels-fahrtenleben.de/
• http://www.asif.dreamhosters.com/
• http://harrywiki.com/
• http://coldstonelabs.org/
• http://blep.org/
• http://www.spamer.me.uk/wiki/
• http://www.scoutlink.it/it/
• http://trolug.de/ Troisdorfer Linux User Group
• http://lynplex.org/
• http://lynsoft.co.uk/
• http://bodlyn.me.uk/
• http://tollerporcorum.org.uk/

Feel free to add your own site here, if you are using this template!

Some aspects of this template look and behaviour can be configured by changing the settings in <dokuwiki>/lib/tpl/roundbox/conf/default.php. Most of them can now also be changed through Configuration Settings. The following settings are available:

Specifies the theme to be used.

• Type: String
• Values: <current list of themes>
• Default: evening

Specifies on which side of the main page content block the sidebar is displayed.

• Type: String
• Values: left|right
• Default: left

Show the site navigation box in the sidebar. See the section the sidebar for details.

• Type: Boolean
• Default: true

Set the text for the subtitle of your wiki, which is shown below the wiki title.

• Type: String
• Default: <empty string>

Enable rounded corners for the main layout boxes. Works only for Mozilla-based browsers.

• Type: Boolean
• Default: true

Replace breadcrumbs with a hierarchical navigation path.

• Type: Boolean
• Default: true

Sets the text that separates each breadcrumb. This only has an effect if rb_youarehere is true.

• Type: String
• Default: ” → ”

Sets the name for the index page of namespaces. This only makes sense if rb_youarehere is true.

• Type: String
• Default: “index”

Remove underscores from breadcrumb links. This only has an effect if rb_youarehere is true.

• Type: Boolean
• Default: true

Which actions should be available in the command box in the sidebar? Available actions are:

The order of the actions in the array determine the order of the commands in the sidebar (top-down).

• Type: Array
• Default: array('edit', 'history', 'subscription', 'backlink', '-', 'index', 'recent', '-', 'admin', 'login')
• Default: array('edit', 'history', 'subscription', 'backlink', '-', 'index', 'recent', '-', 'admin', 'profile', 'login')

If you want the “Edit Profile”you have to add 'profile', to the above. It does not come with the out of the box template.

Use links instead of buttons in the sidebar command box.

• Type: Boolean
• Default: true

The following settings determine which action buttons/links are shown to which users.:

For each of the actions listed above there can be a key in both of the associative arrays of the two options rb_act_min_access and rb_act_users.

The former specifies, which access level the current user must have at minimum to see this button. The latter allows to specify a list of users and/or groups that will see this button, regardless of their accesslevel. Groupnames must be prefixed with an '@'. The special group '@ALL' refers to users, logged in or not.

Additionally the following keys in the arrays are checked to determine the visibility of the search and the “Goto” form:

NOTE These options only determine the visibility of the buttons/links for these functions. The functions themselves can still be called by entering the appropriate URL parameters manually!. You have been warned.

See the file conf/default.php in the template directory for an example.

• Type: Array
• Default: see conf/default.php

These lists can only be modified in the conf/default.php. They have not been made available through Configuration Settings.

The Roundbox template uses a few translatable strings (e.g. for box titles and button tooltips). To translate them to your language, create a directory named after the two-letter code of your language in <dokuwiki>/lib/tpl/roundbox/lang/, copy the file <dokuwiki>/lib/tpl/roundbox/lang/en/lang.php to it, and translate the strings in it.

Language files for English, German, French and Italian are included. If have corrections for these or you translate them into your language, please send the lang.php file to the author for inclusion in the template distribution.

There is now a second language file, settings.php, which is used for the descriptions in Configuration Settings. Only an English version exists at the moment.

This templates integrates code from the sidebar template to provide a box with a site navigation in the sidebar. The contents of this box are normal wikipages. Which wiki page is loaded in the site navigation box, depends on the current namespace. See the original sidebar template for an explanation.

As a quick starter, just create a page named “sidebar” in the default namespace. Whatever you put on this page, will be shown in the site navigation box. You may create separate files for each namespace.

The sidebar can be shown on the left or the right of the main box depending on the option selected. The default is to the left.

Version: 2009-06-21 Don Bowman

- Themes
  - Allow change of theme from the Configuraton Settings.
  - New configuration setting 'rb_theme'
  - Force a page refresh on change of theme.
  - New theme similar to 'sxs' template.  This illustrates the use of CSS for overrides.
  - New theme 'yuk' to illustrate use of background images and structure.
    ** Please do not use for a site! **
  - 'Blue' and 'Green' renamed to 'Evening' and 'Spring' respectively.
- Language support
  - Include Finnish language. Thanks go to Mika Rantanen.
- Miscellaneous
  - Standard and Roundbox versions of "you are here" are now set on or off independently.
  - Blend horizontal rule in sidebar with border.
- Bug Fixes
  - Sidebar border display corrected.
  - Contrasting background for message confirming setting update.
  - Changes to TOC hover and logged in user for consistency across themes.
  - Some template configuration settings were not being used correctly.
  - Image information displays correctly.
  - Date and time display correctly.
  - Insitu footnotes display correctly.
  - 'Last modified' displays correctly.
  - 'Autosaved' displays correctly.

Version: 2009-01-26 Don Bowman

- Colour scheme handling changed to comply with DokuWiki 2008-05-05.
- TOC now displaying correctly with DokuWiki 2008-05-05.
- Media Manager changed to comply with DokuWiki 2008-05-05.
- You Are Here/Breadcrumbs selection options modified (possibly still not correct).
- Edit Profile added to default action list rb_action.
- Other miscellaneous changes to comply with DokuWiki 2008-05-05.

New in version 0.4.1b:

* Sat Nov 12 2005 Christopher Arndt
- fixed double list bullets in index list in sidebar
- removed -moz-border line from sidebar.css (reported by anonymous (131.215.6.232) on wiki page)
- set rb_tagline in conf.php to empty string again

New in version 0.4b:

* Sat Oct 22 2005 Christopher Arndt
- added French translation (Jean-Philippe Georget)
- added Italian translation
- adapted image details page (detail.php) to template style
- adapted media selection page (media.php) to template style
- adapted media reference page (mediaref.php) to template style
- added missing meta data edit page (mediaedit.php) and adapted to template
  style
- fixed text color for error and success messages
- moved inclusion of discussion plug-in file to top to prevent
  "headers already sent" error
- included sidebar fix from Andreas Nyholm (see [[#comments_suggestions|below]])

New in version 0.3b:

* Tue Oct 11 2005 Christopher Arndt
- fixed unmatched div tag
- new option for sidebar orientation (requested by Warren Smith)
- some CSS fixes (removed unneeded divs, some margins adjusted)
- moved sidebar code after page content (for screen readers)
- marked page sections by HTML comments for easier customization
- added hr between toplink and page meta data
- added up arrow to toplink

New in version 0.2b:

* Sat Oct 01 2005 Christopher Arndt
- added detail.php from 2009-09-22 DokuWiki release
- renamed all options to have a 'rb_' prefix
- added 'Subscribe changes' button (currently only works when using latest
  (2005-10-01) darcs version of DokuWiki or when rb_sitenav_use_links == false)
- move tpl_msgarea() to top of wikipage area
- added a "Goto" button
- renamed $lang['*_btn'] strings to $lang['btn_*'] to match DokuWiki usage
- removed note plugin CSS code. Not ready for prime time yet.
- correct accidental bold ol items
- add support for discussion plugin (only loaded when available)

* Fri Sep 30 2005 Christopher Arndt
- small horizontal space between quicksearch field and button
- factored out sitecmd in extra include file
- config option whether to use links or buttons
- config options for commands available in sitecmd
- config options for button showing based on accesslevel or user/group
- added CSS for image meta and mediapopup from 2009-09-22 DokuWiki release
- removed breadcrumbs.php, renamed function and moved to roundbox.php
- new CSS for note plugin

The following ToDo list items have been dropped. They will be re-instated if needed.

• have edit links instead of buttons in sections (ask how to do this on the mailing list)
• provide substitute for tpl_pageinfo() with configurable contents
• find better solution for hard-coded height of #header_bar
• beautify print.css

Please add any comments, suggestion or questions regarding the 2009-06-21 version of the template here. Please also sign your comments using the toolbar button. — Don Bowman 2009/06/23 11:40

Please add any comments, suggestion or questions regarding the 2009-01-26 version of the template here. Please also sign your comments using the toolbar button. — Don Bowman 2009/02/01 15:11

Does anybody know how to remove this message from the sidebar?

This is an index over all available pages ordered by namespaces.

Is there a way to have the dynamic sidebar + my own sidebar? — chris

The message is part of the standard Index display. This is normal. If you select Index from the Commands box you will find the same display in the main window, complete with message. The simple answer is therefore that you can not remove it. There are several plugins that affect the way the index is displayed. One of these may do what you want.

When a file called sidebar exists in any namespace, or in a higher namespace, it is used in place of the normal index in the contents box. You can not display both in the same box. You can, of course, still select the Index option from the commands box and see the index that way. See The sidebar.

I hope that this is enough information for you. — Don Bowman 2009/02/03 14:20

This is a terrific update to the look of the template!

One small issue with the haze color scheme (which is quite nice, BTW). After making changes on the Configuration Settings screen, an alert box tells you “Settings updated successfully.” In the haze color scheme, that box is yellow on bright green and very hard to read. — Grant Root 2009/04/02 11:50

It looks like this box always comes with a default green background. If you edit design.css and search for div.success you will see that there is a color: attribute but not a background-color:. I have inserted one with the value __text_alt__ and it looks good in the various schemes. I will include this in the next version. — Don Bowman 2009/04/03 23:02

Has anyone else had poor luck with the styling of footnotes? For me (and hopefully behavior is consistent as it should be) there is no style associated, and the in-page footnote just inherits the style of the body text. This makes it unreadable. I have added the following to design.css to improve readability:

div.insitu-footnote {
  border: 1px solid __border__;
  background-color: white;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  font-size: 10px;
  color: black;
}

I'm sure that there are better ways such as using a templated color for the background, but it's a start. — Timothy Hoppen 2009/04/07 22:00

It looks like there has never been an entry in design.css for div.insitu-footnote. The original version was probably too old and I never noticed that it was not there. In fact I only learnt about insitu footnotes after reading this comment. There is another updated version on the way and I will include a suitable CSS entry. — Don Bowman 2009/04/20 22:05

The following comments relate to version 0.4.1b (2005-10-22). Most of the changes mentioned have been incorporated in some form in the 2009-01-26 version. Please add any comments relating to the new version in the section above. — Don Bowman 2009/02/01 15:09

Please feel free to add any comments, suggestion or questions regarding this template here. Please sign your comments using the toolbar button as can be seen here: — ChristopherArndt 2005-09-28 04:08

I cannot get the Trace to work. I tried and tried, but nothing shows up. Have a look: http://www.mobily.com . Is it broken with the latest version of DokuWiki? $conf['rb_youarehere'] is set to true… help! — TonyMobily 2006-05-11 03:08

I had the same problem, it turns out that I could only get it to work by turning on $conf['breadcrumbs'] on $conf['rb_youarehere'] — Chris Phillips 2006-08-16 08:56

If you expect the search index to continue working, add the following line right before the end body tag in main.php.

<?php tpl_indexerWebBug()?>

— AlexWest 2006-05-10 10:56

I've made the same changes that you for my personal wiki on a local host.

* Using the sidebar (thank' to ChrisS)

Check!

* Using the tag line (thanks to Jan)

Check!

* Separating contents and command in the sidebar

Check!

* Using ButtonsCommands only for register user

Check! (since version 0.2b)

[removed example code here, since this is now supported by roundbox]

* Using Plugins hr, Searchindex and Gallery (thanks for their respective author)

These are independent of the template. Install via plugin manager
— ChristopherArndt 2005-10-02 03:42

Comment concerning youarehere: “Replace breadcrumbs with a hierarchical navigation path.”

you don't need to use that tip !

In the last version the code allow you to select if you want hierarchical breadcrumbs or no (see the file main.php in /lib/tpl/default)

<?php if($conf['breadcrumbs']){?>
    <div class="breadcrumbs">
      <?php tpl_breadcrumbs()?>
      <?php //tpl_youarehere() //(some people prefer this)?>
    </div>
    <?php }?>

I have to disagree. The tpl_youarehere() function in the distribution doesn't do exactly what I want and there was no way to enable it from the configuration (as is possible with this template), only by editing main.php in the template. The version, which I included in my template, also links namespaces to namespace:index as explained on the page linked above. — ChristopherArndt 2005-09-28 14:24

* Bug ? I unzipped the package in the tpl directory and make the change in local.php. I actually use sidebar template and it works well. With 'roundbox', It gives me he following error :

Fatal error: Call to undefined function: tpl_pagetitle() in /home/jpg/public_html/iufmjpgwiki/lib/tpl/roundbox/main.php on line 43

Then I tried to copy the code of the function (taken from sidebar package) and it works but now I've got another error

This function should be in inc/template.php (starting at about line 816). Please make sure, you use an up-to-date version of DokuWiki.

Fatal error: Call to undefined function: tpl_indexerwebbug() in /home/jpg/public_html/iufmjpgwiki/lib/tpl/roundbox/main.php on line 226

Do I correct again or I misunderstood something ? Thanks for help. — jpgnews1 at ouvaton dot org 2005-10-16 20:00

Sure it is tpl_indexerWebBug()!? This function too, is only present in fairly new versions of DokuWiki. If you don't have it, you can remove the call to that function safely, but search indexing won't work anymore then. — ChristopherArndt 2005-10-17 11:57

* I'm using several namespaces below each other, e.g. customers:Company1:Project1:startpage . The navigation will not change when I click namespaces, only when I click the real page. To get the navigation follow namespaces change the following in sidebar.php, function html_sidebar:

  global $IDX;   // Add this at beginning of html_sidebar
 
// in "else" change this...
  html_index('.');   //remove this
  html_index($IDX);  // and insert this line instead

– Andreas Nyholm 2005-10-17 00:50

Ok, I'll check this out and include in the next release if it works. You should probably report this issue to the author of the sidebar template as well. — ChristopherArndt 2005-10-17 12:06

Well using this design at http://www.phppatterns.com - thanks Chris

Nice! I added a new section listing sites, which use this templates — ChristopherArndt 2005-11-13 00:49

I believe that the moz-border line around line 33 in sidebar.css should be removed. It makes the sidebar corners rounded, overriding the conf.php setting. When the line is removed, things work as they should, for me.

You're absolutely right. I've no idea why that line is still there I'll remove that in the next release — ChristopherArndt 2005-11-06 04:27

Fixed in version 0.4.1b — ChristopherArndt 2005-11-13 00:49

The plugin's manager's design is broken by this template… Err747, err747@free.fr

You mean that the horizontal line at the end of the page? To fix this add “clear: both;” to the style definition of the “toplink” class in “design.css”. In will incorporate this fix into the next release — ChristopherArndt 2005-11-26 22:55

Yes, I mean that the horizontal line at the end of the page. Thanks for your help, it is good now. — err747 2005-12-10 23:12

For some reason the “Subscribe Changes” link is broken for me in this template. I'm seeing ”[unknown link type]”. The only reason I know which link it's looking for is the screenshot above. Not sure what is parsing this info to gather the links. Any help would be appreciated. =G=

whups…missed the footnote…what would need to be done to fix for 09/22/2005 version?

OK…works fine when “rb_uselinks” is false (i.e., use buttons). =G= 2006-01-02

In the latest dev release the template looks great except 2 things. Table of contents is broken and the goto & search boxes aren't on the same bar (they're aligned vertically). I've tried and I can't seem to turn the goto box off in the template config. (i know this is what I get for bleeding edge, I updated for other reasons.) Chris 2006-01-25

Answering my own question. I've been trying to compare against the default TOC to figure out how to get it to look right. I've managed to fix most of the glaring problems problems but it's still not perfect. It looks like the major difference is they've renamed some entities i.e. tocinside is now toc__inside.

Two things I added to fix the Table of contents. Both are changes in the roundbox/design.css file. Fist change the #tocinside to #toc__inside (actually I cut and pasted a new one and left the old one there) then change the toctoggle to toc__toggle. I did not change the docheader or toctoggle img entries. Thumper 2006-04-17

TOC issue - Possible solution I guess many of you have already found it; anyway I'm sending the way I solved the Table of Contents issue of roundbox's version 0.4.1b. The correction must be done in default.css in the template's directory. What I write below is what I found out comparing the design.css files in the roundbox and DokuWiki's default templates. I would gladly upload the design.css I'm using, to avoid being to descriptive in here, but apparently I don't have uploading privileges.

1. Firstly, I followed Chris's and Thumper's instructions and changed #tocinside to #toc__inside as well as #toctoggle to #toc__toggle (take notice of the double underscore between the words).
2. Then I noticed that the default template's CSS uses the div.dokuwiki prefix in all toc entries. So, everywhere I added this prefix (e.g. div.toc was changed to div.dokuwiki div.toc). I'm not sure if that really makes a differences, however, it does not seem to harm… and seems ok.
3. What must finally be the problem is the spacing/margin settings for the tocheader and tocheader img elements.

For all practical purposes I'm sending the whole correct design.css part concerning the TOC (feel free to edit it or copy it to a design.css to upload it here, instead of all this code):

/* ---------- table of contents ---------- */
div.dokuwiki div.toc {
  margin-left: 2em;
  margin-top: 1.2em;
  margin-bottom: 0;
  float:right;
  width: 200px;
  font-size: 80%;
  clear: both;
}
div.dokuwiki div.tocheader {
  padding: 3px;
  border: 1px solid #8cacbb;
  background-color: #dee7ec;
  text-align: left;
  font-weight: bold;
  margin-bottom: 2px;
}
div.dokuwiki div.tocheader img{
  width:0.8em;
  height:0.8em;
  float:right;
  margin-top:0.3em;
  margin-right:3px;
  cursor: pointer;
}
div.dokuwiki div.toc__toggle {
  float: right;
  margin-top: 0.3em;
  margin-right: 3px;
}
div.dokuwiki div.toc__toggle img {
  width: 0.8em;
  height: 0.8em;
}
div.dokuwiki #toc__inside {
  border: 1px solid #8cacbb;
  background-color: white;
  text-align: left;
  padding-top: 0.5em;
  padding-bottom: 0.7em;
}
div.dokuwiki ul.toc {
  list-style-type: none;
  list-style-image: none;
  line-height: 1.2em;
  margin: 0;
  padding: 0;
  padding-left: 1em;
}
div.dokuwiki ul.toc li {
  background: transparent url(images/tocdot2.gif) 0 0.6em no-repeat;
  padding-left: 0.4em;
}
div.dokuwiki ul.toc li.clear {
  background-image: none;
  padding-left: 0.4em;
}
div.dokuwiki a.toc {
  color: #436976;
  text-decoration: none;
}
div.dokuwiki a.toc:hover {
  color: black;
  text-decoration: underline;
}
/* ---------- diff rendering ---------- */

Now, my suggestion would be to change the TOC's colors as well, so that it would be more “compatible” to the templates colors. Something I'd propose is to set the tocheader and the toc__inside like that:

div.dokuwiki div.tocheader {
  padding: 3px;
  border: 1px solid #000000;
  background-color: #123456;
  text-align: left;
  font-weight: bold;
  margin-bottom: 2px;
}
div.dokuwiki #toc__inside {
  border: 1px solid #8cacbb;
  background-color: #dee7cc;
  text-align: left;
  padding-top: 0.5em;
  padding-bottom: 0.7em;
}

That's all. Hope some will find it useful. — Panagiotis Kapsokavadis 2006-07-13 16:16

I want it to only show the current pagename, not the entire namespace hierarchy (in the heading). How can I do this? Thanks. — Vishal Doshi P.S. The removeunderline feature doesn't seem to be working for me. Much appreciated, thank you! – Vishal Doshi

I have an idea. Perhaps someone can package up the fixes and re-release the template as “roundbox-template-0.4.1c.zip” — Gary 2006-08-4 21:30

I am using version 2006-03-09b of DokuWiki and the style div.toctoogle is working fine, not #tocinside as you have already said.

I have also made some changes of my own to the table of contents styles because it was not working properly.

div.toctoggle {
    /*float: right;*/
    margin-top: 0.3em;
    margin-right: 3px;
}

I have commented out the float style, it made the header an toggle to be on the right of the first title. It looked weird in that way.

I have also found that the login div was not properly centered even though it had the centering style. I get to solve the problem with the following snippet of code.

fieldset {
    width: 300px;
    text-align: center;
    border: 1px solid #8cacbb;
    padding: 0.5em;
    margin: auto; /* This is added. */
}

As regards the trace and youarehere feature, I preferred to have the following code in main.php in order to be able to enable both features at the same time.

<!-- start content block -->
    <div id="content">
      <?php if($conf['breadcrumbs']) { ?>
        <div class="breadcrumbs">
      <?php // if($conf['rb_youarehere']) {
        //   echo rb_youarehere();
        // } else {
           echo tpl_breadcrumbs();
        //} ?>
      </div>
      <?php }?>
    
      <?php if($conf['youarehere']) { ?>
        <div class="breadcrumbs">
      <?php if($conf['rb_youarehere']) {
               echo rb_youarehere();
        } else {
           echo tpl_youarehere();
        }?>
        </div>
      <?php }?>

With this code, both can be enabled and if rb_youarehere is true the youarehere feature is replaced with the one provided by this template.

And finally ( I hope I did not forget anything ) I have changed the following line of the function rb_youarhere in roundbox.php

print hsc($lang['breadcrumb']).': ';

with the following one

print hsc($lang['youarehere']).': ';

in order to print the correct label. — diego nieto cid 2006-08-30 03:30

Does anybody know how to fix the following issue? (This only happens in IE 6, works fine in Firefox) When you resize the page and make it small the sidebar goes below the content side! all the above sites using this template have that problem. Other than that this is a great template. (After you apply the changes for the TOC, profile, etc)

Media Manager with Release Candidate 2007-05-24 (RC1)
Is anyone else having problems with the media manager with RC1 ? The layout of the media manager popup window is broken for me…
gedaso 2007-06-08 19:52

Does anybody know how to remove this message from the sidebar?
This is an index over all available pages ordered by namespaces.
Is there a way to have the dynamic sidebar + my own sidebar?

As this question and the answer are relevant to Version 2009-01-26 I have copied the question and provided an answer there. — Don Bowman 2009/02/03 14:05