Yet Another Sidebar Template.
Features: sidebar (left/right/both/none), definable User-/Group-/Namespace-Sidebars, fully configurable via configuration manager, TOC inside sidebar, user defined sidebar actions.
Support the ongoing development of DokuWiki Plugins and Templates and buy me a coffee
(Suggested: 3€ for a regular or 5€ for big latte with caramel).
I created the Arctic template to let DokuWiki look more like a CMS. The template provides a sidebar (left or/and right) which is built from normal Wiki pages. It also provides sidebars which are only visible to certain users or groups. Furthermore it is fully configurable via the configuration manager.
diff/edit/admin -modeSome screenshots can be found here.
Make sure you download the archive for your installed DokuWiki version!
| DokuWiki Version | Download |
|---|---|
| 2009-12-25 “Lemming” | template-arctic.tgz ( |
| 2009-02-14 | template-arctic-2009-08-22.tgz |
| 2008-05-05 | template-arctic-2008-11-04.tgz |
| Github URL | http://github.com/chimeric/dokuwiki-template-arctic |
Refer to template on how to install and use templates in DokuWiki.
using git:
% cd <dokuwiki>/lib/tpl/ % git clone git://github.com/chimeric/dokuwiki-template-arctic.git arctic
Debian install (or probably any other distribution):
% cd /usr/share/dokuwiki/lib/tpl/ % wget http://www.chimeric.de/_src/template-arctic.tgz % tar -xvf template-arctic.tgz
Note: http://chimeric.de/_src/template-arctic.tgz always points to the latest stable version!
The template can be widely configured via the configuration manager. These are the available options (reflecting the ones of the latest release):
| Option | Value(s) |
|---|---|
| Sidebar setup | left/right/both/none |
| Pagename to use for sidebars | defaults to sidebar |
| Trace | show trace on top |
| Main sidebar always | show main sidebar in every namespace (default) |
| Actionlink style | buttons/links |
| Namespace for group sidebars | defaults to group |
| Namespace for user sidebars | defaults to user |
| Left sidebar order | comma separated list of sidebars (all sidebars defined in the content section not listed here will show up after the one you specify here in no particular order) |
| Content of the left sidebar | multicheckbox to select the different sidebar types which should be active inside the left sidebar |
| Right sidebar order | comma separated list of sidebars (all sidebars defined in the content section not listed here will show up after the one you specify here in no particular order) |
| Content of the right sidebar | multicheckbox to select the different sidebar types which should be active inside the right sidebar |
| Position of the search field (only applies if both sidebars are used) | left/right |
| Closed Wiki | hide all sidebars regardless of their ACLs and show login button to not logged in users |
| Hide Actions | hide all actions to non logged in users (this makes sense if you have a read only wiki). The login form is only available by appending ?do=login to the URL |
These are the different sidebar types.
| Type | Description |
|---|---|
| main | see main sidebar |
| user | see user sidebar |
| group | see group sidebar |
| namespace | see namespace sidebar |
| index | shows the DokuWiki index |
| toc | shows the TOC of the current page inside the sidebar instead of in the page itself |
| trace | shows the trace |
| toolbox | shows the set of “action links” (login, edit, index, etc.) inside the sidebar, instead of their default location in horizontal toolbars above and below the page |
| extra | There are 2 new files inside <dokuwiki>/lib/tpl/arctic called left_sidebar.html and right_sidebar.html which will be included if you select the extra type. This comes in handy for example if you like to include Google ads. |
| custom | see custom sidebar |
If you like to use the user- or group-sidebars you have to set up your <dokuwiki>/conf/acl.auth.php the right way.
This is an example setup for a user “tom” (User-Name: tom) who is a member of group ”@user”. The “user sidebar namespace” is set to ”user” and “group sidebar namespace” is set to ”group”. We will grant him write/page-creation/upload permissions for his own namespace and read/edit permissions for the group:users namespace to everyone who's part of the group ”@users”.
---- snip ---- user:* @ALL 0 group:* @ALL 0 user:tom:* tom 8 group:users:* @user 2 ---- snap ----
First of all, you would probably like to create the main sidebar, i.e. the sidebar associated with the root namespace. You simply have to create a wikipage called sidebar—or whatever you set pagename to— and add some links.
====== Navigation ====== [[wiki:playground]]\\ [[wiki:syntax]]\\ [[some:more:links]]\\
TIP: It is possible to create this page right in the wiki. Go to any page of your wiki and change the query string of the URL (in your browser's address bar) to '?id=sidebar'; then just create this page.
If you've enabled user sidebars you can add a sidebar for each registered user. All you have to do is create a wikipage user:username:sidebar. Note, this feature depends on a proper acl-setup. If you use @USER@ inside this sidebar it will get substituted with the user name of the logged in user.
Group sidebars are set up just like user sidebars. For example, to create a sidebar visible only to those in the admin group, you would create one named group:admin:sidebar. If you use @GROUP@ inside such a sidebar it will get substituted with the group name of the sidebar.
If you've enabled namespace sidebars you can add a sidebar for every namespace you like. Thus the naming scheme is the same for all sidebars, the only thing you've to do is create a page called, you guessed right
, “sidebar” inside the desired namespace. This sidebar, then, will only show if you browse pages within this namespace.
The template also supports custom sidebars. You can create your own custom sidebar by creating a new subdirectory inside <dokuwiki>/lib/tpl/arctic/sidebars/ and putting a file called sidebar.php in there which holds your PHP code, i.e. <dokuwiki>/lib/tpl/arctic/sidebars/<sidebar name>/sidebar.php. Then you can activate the sidebar by adding its name to the comma separated list of other sidebars in the arctic template settings.
Here's a simple example:
<dokuwiki>/lib/tpl/arctic/sidebars/helloworld/sidebar.php<?php print "Hello World"; ?>
Here's a list of other custom sidebar examples.
Here are some more examples of custom sidebars for the arctic template.
Feel free to contribute, just post your custom sidebars to this page
!
Here it's an example for WordPress
I'm interested in integrating this into my arctic template.
Shows the backlinks to the current viewed page. You have to add “backlinks” to the comma separated list of other sidebars in the arctic template settings.
/lib/tpl/arctic/sidebars/backlinks/sidebar.php
<?php html_backlinks($ID); ?>
For the Cloud Plugin you can use the following snippet:
/lib/tpl/arctic/sidebars/cloud/sidebar.php
<?php print p_render('xhtml',p_get_instructions('~~CLOUD~~'),$info); ?>
Creates a site wide TOC and highlights the current page in it.
Open and closed folders and files can have different CSS-symbols once I have
figured out where to put the CSS
/lib/tpl/arctic/sidebars/sitetoc/sidebar.php
<?php /** * Table of content-function that will * create a hierarchical TOC for the site (by namespace) * and highlight the current page * The startpage if it exists, will always * be shown first in the menu */ function tpl_processStartPage($ns,$context) { // Check if a start page exists and add it first global $conf; $pageExists = false; $startPageName = $conf['start']; if ($ns == "") { $startPageID = $startPageName; } else { $startPageID = $ns . ":" . $startPageName; } $startPagePath = $startPageID; resolve_pageid($ns, $startPagePath,$pageExists); if ($pageExists) { // Check if page is visible $perm = auth_quickaclcheck($startPageID); if($perm > 0){ // Determine Page Title from first heading $firstHeading = p_get_first_heading($startPageID); if($conf['useheading'] && !empty($firstHeading)){ $linkName = $firstHeading; }else{ $linkName = $startPageName; } // echo "<b>" . $conf['useheading'] ."</b>"; tpl_pageLinkCreate($startPageID, $linkName, "tpl_processStartPage:$context"); } } } function tpl_pageLinkCreate($fileToLinkID, $linkName, $calledFrom) { global $ID; echo "<li class=\"file\">"; if($fileToLinkID == $ID){ // highlight current page echo "<strong class=\"currentPage\">"; } if($_REQUEST["do"] == "admin" && $_REQUEST["page"] == "acl"){ $path = wl($fileToLinkID, "do=admin&page=acl"); }else{ $path = wl($fileToLinkID); } // echo "<em>$fileToLinkID, $linkName, $calledFrom</em>"; tpl_link($path,$linkName); if($fileToLinkID == $ID){ // current page echo "</strong>"; } } function tpl_list_folder($dataList, $findAndProcessStartpage){ global $conf; global $ID; global $INFO; require_once(DOKU_INC.'inc/auth.php'); $currentLevel = 1; $pathinfo = pathinfo($_SERVER['REQUEST_URI']); $url = $pathinfo['dirname']; echo "<ul class=\"explorer\">\n"; tpl_processStartPage("","tof"); for($i=0; $i<count($dataList); $i++){ // Check if page is visible if($dataList[$i]["type"] == "d"){ $perm = auth_quickaclcheck($dataList[$i]["id"].":*"); }else{ $perm = auth_quickaclcheck($dataList[$i]["id"]); } // process only visible pages if($perm > 0){ // don't show start page in normal order if (noNS($dataList[$i]["id"]) != $conf['start']) { // FIXME not sure if this is actually needed // Could we not use noNS($dataList[$i]["id"]) instead??? $pageFileName = split(":", $dataList[$i]["id"]); $pageFileName = $pageFileName[count($pageFileName) - 1]; $pageFileName = str_replace("_", " ", $pageFileName); // Determine Page Title from first heading $firstHeading = p_get_first_heading($dataList[$i]["id"]); if($conf['useheading'] && $dataList[$i]["type"] == "f" && !empty($firstHeading)){ $linkName = $firstHeading; }else{ $linkName = $pageFileName; } // Adjust the level. If level of page is higher than current level // close list-item and list // FIXME: Why is this needed when the same happens down below? if($currentLevel > $dataList[$i]["level"]){ echo str_repeat("</ul></li>\n", $currentLevel - $dataList[$i]["level"]); $currentLevel = $dataList[$i]["level"]; } // if entry is a folder if($dataList[$i]["type"] == "d"){ if($dataList[$i]["open"]){ echo "<li class=\"open\">"; }else{ echo "<li class=\"closed\">"; } if($_REQUEST["do"] == "admin" && $_REQUEST["page"] == "acl"){ $path = wl($dataList[$i]["id"].":".$conf['start'], "do=admin&page=acl"); }else{ $path = wl($dataList[$i]["id"].":".$conf['start']); } // echo "<p>Path: $path, LinkName: $linkName</p>"; tpl_link($path,$linkName); }else{ // entry is a file // echo "<p>Path: $path, LinkName: $linkName, id: ". $dataList[$i]["id"] . "</p>"; tpl_pageLinkCreate ($dataList[$i]["id"], $linkName, "direkt:tpl_list_folder" ); } if($dataList[$i+1]["level"] == $currentLevel){ // current folder (just close list-item) echo "</li>\n"; }else if($dataList[$i+1]["level"] > $currentLevel){ // new sub-folder (start new sub-list) echo "<ul class=\"idx\">\n"; // Check if a start page exists and add it first tpl_processStartPage($dataList[$i]["id"],""); }else if($dataList[$i+1]["level"] < $currentLevel){ // end of sub-folder (close open sublists) if(!empty($dataList[$i+1]["level"])){ echo str_repeat("</ul></li>\n", $currentLevel - $dataList[$i+1]["level"]); } } $currentLevel = $dataList[$i+1]["level"]; } } } echo "</ul>\n"; } global $ID; global $ACT; global $conf; $folder = getNS($ID); require_once(DOKU_INC.'inc/search.php'); require_once(DOKU_INC.'inc/html.php'); $ns = cleanID($ID); if(empty($ns)){ $ns = dirname(str_replace(':','/',$ID)); if($ns == '.') $ns =''; } $ns = utf8_encodeFN(str_replace(':','/',$ns)); $list = array(); search($list,$conf['datadir'],'search_index',array('ns' => $ns)); tpl_list_folder($list,true); ?>
Have fun, Ferdinand
This displays the latest tweets from a given Twitter account (presumably yours). Adjust the variables and CSS to suit your needs. (Shamelessly ripped from the twitter.com/widgets service.)
/lib/tpl/arctic/sidebars/twitter/sidebar.php
<?php $account = 'accountname'; $tweets = 5; ?> <style type="text/css"> #twitter_update_list{ margin-left: 0; color: #000000; } #twitter_update_list li{ list-style-type: none; text-indent: -2em; margin-left: 2em; margin-bottom: 1em; } </style> <div id="twitter_div"> <h1 class="sidebar-title">@<?=$account?></h2> <ul id="twitter_update_list"></ul> <a href="http://twitter.com/<?=$account?>" id="twitter-link" style="display:block;text-align:right;"> follow me on Twitter</a> </div> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/<?=$account?>.json?callback=twitterCallback2&count=<?=$tweets?>"></script>
The template style (colors/font-sizes/width) can be widely configured via the style.ini file located in <dokuwiki>/lib/tpl/arctic/style.ini.
You can modify the look of the template by editing the style.ini file and change the values to your needs. The best way to check out which part of the template is affected is to view the syntax page of your wiki, then edit the style.ini and see what happens.
These are the substitutions introduced by the arctic template.
| Replacement | Value | Description |
|---|---|---|
__wiki_width__ | percent/pixel | width of your wiki |
__header_height__ | percent/pixel | the height of the blue header |
__body_margin__ | em/pixel | margin of HTML <body> |
__page_padding__ | em/pixel | padding around your wiki |
__footer_padding__ | em/pixel | the padding of the footer |
__font_size__ | em/pixel/pt | the global font size |
__line_height__ | percent/em | the global line height |
__pagename_color__ | hex color value | self-explanatory |
__logo_color__ | hex-color | self-explanatory |
__headline_color__ | hex color value | self-explanatory |
__body_background__ | hex color value | self-explanatory |
__header_background__ | hex color value | self-explanatory |
__footer_background__ | hex color value | self-explanatory |
__form_border__ | hex color value | the color of all form borders |
| Screenshot | Description |
|---|---|
![]() | description of parameters style.ini |
If you've created a style.ini that you like to share with the world, you can upload it to this Wiki and insert it in the table below. All you need to do to be able to upload files is register yourself and get an account. Of course you can send me an email with the style.ini and a screenshot too
.
<your-style-name>.style.inidokuwiki:templates:arctic:styles
| Screenshot | File | Description | Author |
|---|---|---|---|
![]() | simplyred.style.ini | Debian Red | Michael Klier |
![]() | simplyblack.style.ini | Black | Michael Klier |
![]() | chimeric.style.ini | Former color scheme of this site, but without header and body background images | Michael Klier |
![]() | Dark Theme | A derivative template that uses dark colours and a dark background; the change was too big to be possible by editing style.ini. | Martin Gill |
Just copy the downloaded style.ini to <dokuwiki>/lib/tpl/arctic/style.ini (you may want to backup the old one first!). If nothing happens after the first page reload you need to touch <dokuwiki>/conf/local.php or reload the page using <CTRL> + <SHIFT> + R. That's it!
The template was tested with the following Browsers.
If you've seen it working with other browsers feel free to add them to the list
!
The configuration settings descriptions still need to be translated to other languages. If you like to help, just send the translation of the below file to chi [at] chimeric [dot] de (the file needs to be UTF-8 encoded).
<?php /** * LANGUAGE language file for configuration manager */ $lang['sidebar'] = "Sidebar setup"; $lang['pagename'] = "Pagename to use for sidebars"; $lang['trace'] = "Trace setup"; $lang['wiki_actionlinks'] = "Actionlink style"; $lang['user_sidebar_namespace'] = "Namespace for user sidebars"; $lang['group_sidebar_namespace'] = "Namespace for group sidebars"; $lang['left_sidebar_order'] = "Left sidebar order (comma separated)"; $lang['left_sidebar_content'] = "Content of the left sidebar"; $lang['left_sidebar_content_other'] = "Other sidebars (comma separated)"; $lang['right_sidebar_order'] = "Right sidebar order (comma separated)"; $lang['right_sidebar_content'] = "Content of the right sidebar"; $lang['right_sidebar_content_other'] = "Other sidebars (comma separated)"; $lang['search'] = "Position of the search field (applies only if 2 sidebars are used)"; ?>
A complete changelog is available at my github page!
To report bugs and feature requests please use the bug tracker.
Some of the Ideas are taken from the other great DokuWiki templates. Furthermore a big “Thank you!” to the great DokuWiki team for your very good looking and well structured default template and this cool Wiki!
Add yours here:
You can add Google AdSense to the Arctic template (or any other DokuWiki template) by adding the needed piece of code directly into <dokuwiki>/lib/tpl/templatename/main.php. If you want AdSense to show up in the sidebar search for
<div class="left_sidebar"> ... </div>
or
<div class="right_sidebar"> ... </div>
and insert the AdSense code before the closing div. If you want AdSense to show up in the footer just insert the required lines into <dokuwiki>/lib/tpl/templatename/footer.html.
Like with Google AdSense, it's sufficient to add the Google Analytics code either directly in the main.php or the footer.html of the template
Put your image into <dokuwiki>/lib/tpl/arctic/images/. Then you have to edit <dokuwiki>/conf/userstyle.css1) and add:
div.dokuwiki .header { background: url('lib/tpl/arctic/images/[name-of-your-image]') no-repeat; }
Then edit <dokuwiki>/lib/tpl/arctic/style.ini and set __header_height__ and eventually __wiki_width__ according to the dimensions of your image2).
Just put your logo in <dokuwiki>/lib/tpl/arctic/images/ and edit <dokuwiki>/conf/userstyle.css3) and add your logo as a background image to div.dokuwiki div.left_sidebar or div.dokuwiki div.right_sidebar, e.g.
div.dokuwiki div.left_sidebar { background: url('lib/tpl/arctic/images/filename.png') no-repeat; padding-top: [height of your logo in px]px; }
You can use for example the navi plugin in a sidebar as an alternative to the default index.
To get a bigger main page by default, you need to edit your <dokuwiki>/conf/userstyle.css4), and add:
div.dokuwiki div.left_sidebar, div.dokuwiki div.right_sidebar { min-height: 350px; }
Of course, you can change the min-height property to whatever you want.
Here's a little CSS trick. You may have to play with the padding value a bit, it just moves the text away from the image - and you have to choose the color value to be of the same as your background in order to make the text disappear. In your <dokuwiki>/conf/userstyle.css5) add the following.
div.dokuwiki form#dw__search input.button { border: none; background: url(images/search.png) no-repeat; padding-left: 50px; color: #fff; width: 25px; }
See toolbar.
Just put your logo in <dokuwiki>/lib/tpl/arctic/images/ and add the following CSS to your <dokuwiki>/conf/userstyle.css6). Use either div.dokuwiki div.left_sidebar or div.dokuwiki div.right_sidebar7).
div.dokuwiki div.left_sidebar { background: url(lib/tpl/arctic/images/filename.[jpg|png]) no-repeat; padding-top: [height of your logo in px]px; }
You can set the width by adding the following CSS to your <dokuwiki>/conf/userstyle.css8).
div.dokuwiki #qsearch__in { width: [width]px; }
It depends on if you use URL rewriting or not (following code is untested but should work). If you want absolute links replace DOKU_BASE with DOKU_URL:
// your image ID $IMG_ID = 'namespace:image.jpg'; $w = '100'; //width $h = '100'; //height // with URL rewriting print '<img src="' . DOKU_BASE . '_media/' . rawurlencode($IMG_ID) . '?h=' . $h . '&' . 'w=' . $w . '&cache=cache" />'; // without URL rewriting print '<img src="' . DOKU_BASE . 'lib/exe/fetch.php?media=' . rawurlencode($IMG_ID) . '&' . 'h=' . $h . '&' . 'w=' . $w . '&cache=cache" />';
Is there any possibility to minimize the sidebar to gain more space for the main-content? E.g. a function sidebar_toggle() would let the menu disappear and reload the page to let the change take effect. If you place an flat icon on the left/right side with which you can show the sidebar again, the user can turn back to former state. (e.g. Dreamweaver menus)
Why this? If you have content the user should focus on it, the menus irritates the user. For this he should be able to minimize the sidebar for certain situations (independent from other users in the wiki). Thanks — deshi 2008-12-28
It is possible; however due to the coding of the arctic main template, the code changes would be fairly extensive (the layout cases are too differentiated). However, once (if) those changes are made, the JavaScript and CSS required to do the toggle are actually already available in the template and require minor changes. Ill bee experimenting with this issue for a while. — Luis 2010/01/13 18:59
I had to add “overflow:hidden” to “div.dokuwiki div.left_sidebar”, because otherwise long entries in indexmenu Plugin would cause the main area to break and appear under the sidebar when using IE 6.
Thanks for the great template!
This solution leads to a scrambled layout as the DIV section with the indexmenu has no right border any more..
Is there anything to do in the .css so that IE accepts the width of the DIV instead of making it wider?
phoenix
I am just wondering: You are using a sidebar with fixed width. What do I have to change in the style.ini to get that? Thanks!
The width of the sidebar is not changeable within thestyle.ini. You have to modifydokuwiki/lib/tpl/arctic/arctic_design.cssand look for the following:div.dokuwiki div.left_sidebar { ... width: 21%; ... }
or
div.dokuwiki div.right_sidebar { ... width: 21%; ... }
— chi 08.05.2006 14:11
Hi,
In the last version, it seems that the file to modify isdokuwiki/lib/tpl/arctic/arctic_design.css.
And you need to change the div.center_page too (in the same file).
Thanks for this template.
Hebus82
Yep, you're right! If you have the sidebar left you have to changediv.right_pageand if you have the sidebar right it'sdiv.left_page,div.center_pageapplies only if you have sidebars left and right. — chi 08.03.2007 14:09
What must I code to have a right sidebar with fixed width 200px (width: 200px) and the left page taking up the rest of the browser width? If I code for the left page width = auto then my sidebar disappears. If I let the left page width at 72% then the left page disappears if the browser window becomes too small. — Horst 8-10-2009
First, I would like to thank you for excellent work! Templates you created are really wonderful.
I have a little request, I found that many users found the backlinks in a header (the link on a left side in a squared brackets) - confusing.
If you have settings to show the first header of page as a text of link. This link looks like a header of the current page. And it is located in the place where many websites put their name which suppose to lead them to the main page of the website. The user clicks on this link, sees the backlinks page (which often does not have any links) - and gets confused.
It would be nice if in configuration settings for template we had a settings which allow to hide those backlinks and to put the website name on a left. Otherwise we need to change CSS of the template.
Thank you :). Well, since you're not the first one who asks for this particular change in the template layout I'll implement it as soon as I find some time, just give me a view days. — chi 11.05.2007 00:09
I simply usediv.dokuwiki div.pagename { visibility: hidden }in userstyle.css. But search engines like Google seem to not like hidden links. – Alexander 15.09.2007
I'm also faced with the same dilemma… I take it you place that class attribute in arctic_design.css? [wikierookie]
Has a fix for this been completed? If I use the above recommendation how do I use it? I don't know anything about CSS. Do I just create a userstyle.css and put that line in it? Please help.
Yes, just create that file put it into the <dokuwiki>/conf directory and your done.
Hello, It is possible to disable sidebar for only one page? Fred