DokuWiki

It's better when it's simple

User Tools

Site Tools


template:arctic

Table of Contents

Arctic Template

Compatible with DokuWiki

  • 2024-02-06 "Kaos" unknown
  • 2023-04-04 "Jack Jackrum" unknown
  • 2022-07-31 "Igor" unknown
  • 2020-07-29 "Hogfather" yes

template A very customizable sidebar template

Last updated on
2020-08-22
Repository
Source

Tagged with cms, sidebar

Yet Another Sidebar Template. ;-)
Features: html5, sidebar (left/right/both/none), definable User-/Group-/Namespace-Sidebars, fully configurable via configuration manager, TOC inside sidebar, user defined sidebar actions.

For previous Dokuwiki releases please select an image from below

The Idea

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.

Features

  • enable/disable sidebar
  • sidebar position (left / right / both / none)
  • sidebars per users / groups / namespaces
  • enable/disable trace (top / sidebar / both)
  • resizes nicely
  • auto-hides sidebar in diff/edit/admin -mode
  • option to move the TOC to the sidebar
  • HTML5 compatible

Download

changes

previous Versions

DokuWiki Version Download
2012-01-25 “Angua” arctic-stable-20120914.tgz
2011-05-25 “Rincewind” template-arctic.tgz
2010-11-07 “Anteater” template-arctic.tgz
2009-12-25 “Lemming” template-arctic-2009-12-25.tgz
2009-02-14 template-arctic-2009-08-22.tgz
2008-05-05 template-arctic-2008-11-04.tgz
Github URL https://github.com/chimeric/dokuwiki-template-arctic

Update

For Angua the location of the latest downloads changed. To update using the plugin manager you have to delete and reinstall the plugin.

To update your git installation you can change the origin:

git remote rename origin origin.bak
git remote add origin https://github.com/samfisch/dokuwiki-template-arctic.git
git config branch.master.remote origin
git config branch.master.merge master
git pull

Installation

Make sure to select the link for your installed DokuWiki Version from Download

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

using git:

% cd <dokuwiki>/lib/tpl/
% git clone https://github.com/samfisch/dokuwiki-template-arctic.git arctic

Debian install (or probably any other distribution):

% cd /usr/share/dokuwiki/lib/tpl/
% wget http://r.notomorrow.de/dokuwiki-template-arctic/pkg/arctic-stable.tgz
% tar xzvf template-arctic-stable.tgz

Extension Manager

Since release 20140516 the stable and master branches have the template.info.txt and can be installed automatically using the extension manager (available in Dokuwiki Ponder Stibbons)

Configuration

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

ACL Setup

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 Steps

Adding the Main Sidebar

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.

Adding a User Sidebar

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.

Adding a Group Sidebar

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.

Adding a Namespace 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.

Adding custom sidebars

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:

  1. create <dokuwiki>/lib/tpl/arctic/sidebars/helloworld/sidebar.php
  2. add the following code:
    <?php
    print "Hello World";
    ?>
  3. add “helloworld” to the list of comma separated sidebars in the configuration manager.

Here's a list of other custom sidebar examples.

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 ;-)!

Current ID

How can I get current id highlighting to work? I copied the following into arctic_layout.css and layout.css in the arctic template folder, but it didn't work.

/* —- Current ID highlighting —- */
.curid {
font-weight: bold;
}

Try:
div.dokuwiki .curid a.wikilink1 {
font-weight:bold;
}

Donation Cloud Sidebar

FIXME

Here it's an example for WordPress

Donation cloud

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

sidebar.php
<?php
html_backlinks($ID);
?>

Cloud Plugin

For the Cloud Plugin you can use the following snippet:

/lib/tpl/arctic/sidebars/cloud/sidebar.php

sidebar.php
<?php
print p_render('xhtml',p_get_instructions('~~CLOUD~~'),$info);
?>

Site TOC

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

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&amp;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&amp;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

Twitter Feed

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

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?></h1>
<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&amp;count=<?=$tweets?>"></script>

Clock Sidebar

If you have installed the Clock Plugin, you can enable it as a sidebar for your wiki installation. Just create the adequate file for the sidebar to work:

/lib/tpl/arctic/sidebars/clock/sidebar.php

sidebar.php
<?php
$outp= p_render('xhtml',p_get_instructions('{{clock}}'),$info);
print substr($outp, 4, -5);
?>

The substr operation is necessary to ensure that DokuWiki generates XHTML-compliant code: the output of the clock plugin is encased in a <div> block, but simply calling p_render will surround that with a paragraph block, causing incorrect behaviour.

Tip shamelessly brought to you by Luis (author of the Clock Plugin) – 2010/05/01 00:09

Bookmark sidebar

Even if there is plugin for that, here is another method :

/lib/tpl/arctic/sidebars/bookmark/sidebar.php

sidebar.php
Bookmark
<?php
 
$bookmarks = array(
    'del.icio.us' => array('link' => 'http://del.icio.us/post?title=%title%&amp;url=%link%', 'image' => 'delicious.png'),
    'Digg'        => array('link' => 'http://digg.com/submit?phase=2&amp;title=%title%&amp;url=%link%', 'image' => 'digg.png'),
    'Facebook'    => array('link' => 'http://www.facebook.com/sharer.php?u=%link%&amp;t=%title%', 'image' => 'facebook.png'),
    'Twitter'     => array('link' => 'http://twitter.com/home?status=%title%:%link%', 'image' => 'twitter.png'),
    'Google'      => array('link' => 'http://www.google.com/bookmarks/mark?op=add&amp;title=%title%&amp;bkmk=%link%', 'image' => 'google.png'),
    'Google Buzz' => array('link' => 'http://www.google.com/buzz/post?url=%link%&amp;message=%title%', 'image' => 'buzz.png'),
    'Stumbleupon' => array('link' => 'http://www.stumbleupon.com/submit?url=%link%&amp;title=%title%', 'image' => 'stumble.png')
  );
 
$title = rawurlencode(p_get_metadata($ID, "title")." [".strip_tags($conf['title'])."]");
$link = rawurlencode(wl($ID,'',true));
$before = array("%title%", "%link%");
$after = array($title, $link);
 
foreach ($bookmarks as $key => $value)
{
  $url = str_replace ($before, $after, $value["link"]);
  $image = DOKU_TPL."images/".$value["image"];
  $text = "Bookmark to ".$key;
?>
  <a href="<?php echo $url?>" target="_blank" rel="external nofollow"><img src="<?php echo $image?>" width="16" height="16" alt="<?php echo $text?>" title="<?php echo $text?>" /></a>
<?php
}
?>

You can use free icons from http://nouveller.deviantart.com/art/Social-Media-Bookmark-Icon-125995730.

Source : here

Translation

you need to install the translation plugin, place following code in a translation directory in the sidebars directory,

<?php                                                                                                                                            
$translation = plugin_load('helper','translation');
if ($translation) {
    echo $translation->showTranslations();
}

in admin add translation to your comma seperated list of sidebars.

Styles

The template style (colors/font-sizes/width) can be widely configured via the style.ini file located in <dokuwiki>/lib/tpl/arctic/style.ini.

The style.ini Explained

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
___wiki_full_width__ percent/pixel width of fullscreen elements (mediamanager)
__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

Other Styles

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 ;-).

  1. Name your style like <your-style-name>.style.ini
  2. Create a screenshot
  3. Log in with your account
  4. Upload the screenshot (1024×768) and the style.ini as described here:
    1. Edit this section
    2. Open the media manager
    3. Browse to dokuwiki:templates:arctic:styles
    4. Upload your files
  5. Insert the screenshot and the media-link in the table below
  6. Don't forget to insert your credentials
  7. :!: Don't forget to resize the screenshot in the table :!:


Screenshot File Description Author
simplyred.style.jpg simplyred.style.ini Debian Red Michael Klier
simplyblack.style.jpg simplyblack.style.ini Black Michael Klier
chimeric.style.jpg chimeric.style.ini Former color scheme of this site, but without
header and body background images
Michael Klier
wiki.martinsgill.co.uk_media_projects_dokuwiki_arctic_dark_screenshot.jpg 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
Grey Theme rounded with shadows A derivative template that uses grey colours and rounded corners; the change was too big to be possible by editing style.ini. Laura Eun

How to apply a downloaded style?

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!

Browser Compatibility

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 :-)!

  • Lynx (2.8.4)
  • Links2
  • Firefox (Win 1.0.7 / Win 1.5.0.1 / Win 2.0 / Linux / Mac 1.0.7 / Mac 1.5.0.1)
  • Opera (Win 7.54 / Win 8.5 / Win 9.24 / Win 10.10 / Win 11.60 / Linux 8.5 / Linux 9.10 / Linux 9.20 / Linux 9.6X)
  • IE 6.0, 7.0 RC1, 7.0 (Win)
  • Safari (MAC 1.3.1 / MAC 2.0.3/ MAC 3.0.3)
  • Konqueror (3.4.2)
  • w3m
  • Galeon
  • Google Chrome (Mac 16.0 / Win 9.0)
  • Midori (0.2.6 OpenBSD)
  • Iceweasel
  • Microsoft Edge Ver. 115.0.1901.203 (oficial) (64 bits)

Translations

The configuration settings descriptions still need to be translated to other languages. If you like to help, send the translation of the below files (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)";
?>
:!: Looks like you haven't created the main sidebar yet. Do it now by creating the following page: LINK                                          
 
Once you've created the page, just add an unordered list of links to create the navigation i.e.:
 
<file>
* [[link 1]]
* [[link 2]]
* [[link 3]]
</file>
 
You can also use one of the many available index [[doku>plugins]].
 
For further information about sidebars refer to the template [[doku>template:arctic#first steps|documenation]].

Credits/Thanks

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!

Sites using this Template

Add yours here:

FAQ

see below.

How to add Google AdSense?

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.

How to add Google Analytics?

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

How to use a image as header background?

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).

How to integrate a logo in the sidebar?

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;
}
Wouldn't it be easier to insert an image using standard wiki images?
{{ :logo.png?100 |}}

How to hide empty namespaces from the sidebar index?

You can use for example the navi plugin in a sidebar as an alternative to the default index.

How to make the height of the page bigger by default (not IE compatible)?

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.

How to change the search button to an image?

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;
}

The editing toolbar is missing, what can I do?

See toolbar.

How to change the width of the search field?

You can set the width by adding the following CSS to your <dokuwiki>/conf/userstyle.css6).

div.dokuwiki #qsearch__in {
  width: [width]px;
}

The code up above is not working for me. This code works for me:

div.dokuwiki div.left_sidebar form#dw__search input.edit, div.dokuwiki div.right_sidebar form#dw__search input.edit {
margin-left: 0;
font-size: 100%;
width: 80%;
}

How to reference images in a custom sidebar?

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 . '&amp;' . 'w=' . $w . '&amp;cache=cache" />';
 
// without URL rewriting
print '<img src="' . DOKU_BASE . 'lib/exe/fetch.php?media=' . rawurlencode($IMG_ID) . '&amp;' . 'h=' . $h . '&amp;' . 'w=' . $w . '&amp;cache=cache" />';

How to quickly make it Smartphone ready

A quick and dirty way is to add some CSS. See here or here (french version). FIXME

Can I hide the Pagename at the left top of the header?

You can set the width by adding the following CSS to your <dokuwiki>/conf/userstyle.css7).

div.pagename {
  display: none;
}

There are different ways to have links for dw2pdf and/or bookcreator plugin in the arctic template. For me the following works well:

  • Edit your \lib\tpl\arctic\main.php.
  • Search for the <div class=“bar-left”> and move down to case('links').
  • Enter the following lines before the break; statement. (should be line 221)
//dw2pdf
if(!plugin_isdisabled('dw2pdf') && plugin_load('action', 'dw2pdf') instanceof PluginInterface) {
    print '<a class="action" href="' . exportlink($ID, 'pdf') . '"><img src="' .  DOKU_BASE . 'lib/images/fileicons/pdf.png" alt="PDF Export" />&nbsp;PDF Export</a>' . DOKU_LF;
}
//dw2pdf Ende
//bookcreator
if(!plugin_isdisabled('bookcreator') && plugin_load('action', 'bookcreator') instanceof PluginInterface) {
    print '<a class="action" href="' .  DOKU_BASE . 'doku.php?do=addtobook&id='.$ID.'"><img src="' .  DOKU_BASE . 'lib/plugins/bookcreator/images/smallbook.png" alt="add to book" />&nbsp;Add to book</a>' . DOKU_LF;
}
//bookcreator Ende

Discussion

Namespace sidebars not working in root namespace?

Hi! First of all, thanks for the great work. May it be that namespace sidebars are only shown within namespaces deeper than the root? I got a bilingual page using the translation plugin. German pages are in : and english ones in :en: I want arctic to show a german left sidebar (file: :sidebar.txt) within the German pages and an english one within the english pages (file: en:sidebar.txt). Funnily, the english one works, while the german does not.

fmueller: I think I could track this issue back to the function call _getNsSb($id), which is called with the current site id as its parameter. This id is split into its segments, the resulting array being used as the starting point to look for “sidebar” pages.
E.g. with a given site id “my:ns:foo” it looks for “my:ns:foo:sidebar”, then “my:ns:sidebar”, then “my:sidebar”… The first lookup “my:ns:foo:sidebar” is imho debatable, if not completely wrong or unnecessary!
Unfortunately - and a lot worse - it never looks for a “sidebar” page in the wiki's root! My suggestion is to fix _getNsSb($id) by adding two lines before the while-loop:

array_unshift($path, '');
array_pop($path);

This will add an empty element to the array, so the lookup for a “sidebar” page in the wiki's root won't be skipped anymore, and removes the imho unnecessary lookup for “my:ns:foo:sidebar”.

Language-dependent right sidebar

Furthermore, I want to show localized versions of the right sidebar also. Is that possible? I don't really see a way without messing with the template code itself … Thanks for your answers!

Minimize sidebar?

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 did this with a few tweaks to the /lib/tpl/arctic/main.php file. Basically all I did was add a button that fires off two javascript calls that hides the page. That may not be good enough for you, since you may have a different sidebar style, or require that the user be able to show it again without refreshing, but it was a quick and dirty fix for me. The detailed changes are:

  • Line 137: Added: id=“left_sidebar”
  • Line 140: Added: <input type=“button” value=“«” name=“hidesb” id=“hidesb” onclick=“document.getElementById('left_sidebar').style.display = 'none';document.getElementById('right_page').setAttribute('style','width: 95% !important');”></input>
  • Line 142: Added: id=“right_sidebar”

And here is what the code looks like now:

      <?php if(!tpl_sidebar_hide()) { ?>
        <div class="left_sidebar" id="left_sidebar">
          <?php tpl_searchform() ?>
          <?php tpl_sidebar('left') ?>
          <input type="button" value="<<" name="hidesb" id="hidesb" onclick="document.getElementById('left_sidebar').style.display = 'none';document.getElementById('right_page').setAttribute('style','width: 95% !important');"></input>
        </div>
        <div class="right_page" id="right_page">
          <?php ($notoc) ? tpl_content(false) : tpl_content() ?>
        </div>
      <?php } else { ?>
        <div class="page">
          <?php tpl_content()?> 
        </div> 
      <?php } ?>

cornmaster 2010/11/09 14:13

Overflow:hidden in sidebar for IE 6

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

Fixed width Sidebar

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 the style.ini. You have to modify dokuwiki/lib/tpl/arctic/arctic_design.css and 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 is dokuwiki/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 change div.right_page and if you have the sidebar right it's div.left_page, div.center_page applies 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 use
div.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.
The “Feature” that the page is showing the backlinks at top left is weird. As mentioned above, most users would expect the “home” link at this place. So I think to place the Backlinks there is against every haptics. I made a quick & dirty patch in my main.php to show a logo with a home link (also disabled the textlink at the right side):
    <div class="header">
    <a href="<?php echo $url?>?id=start" accesskey="h" title="[[START]]" name="dokuwiki__top"><img src="<?php echo DOKU_TPL?>images/headerlogo.png" width="400" height="100" border="0" /></a>
      <!-- <div class="pagename">
        [[<?php tpl_link(wl($ID,'do=backlink'),tpl_pagetitle($ID,true))?>]]
      </div>
      <div class="logo">
        <?php tpl_link(wl(),$conf['title'],'name="dokuwiki__top" accesskey="h" title="[ALT+H]"')?>
      </div> -->
    </div>

(Kept old source to show the difference)
Just put a picture into the image folder of the template and rename it to “headerlogo.png”

I would like to have the choice of the logo and the option to show/hide the default Backlinks / Homelinks in the config

Disable sidebar for one page

Hello, It is possible to disable sidebar for only one page? Fred

– I'm wondering the same thing.

Hello, In javascript, it's possible to do a test on the url.

E.g., I don't want to show my twitter sidebar if I'm on IE or I use the trace-libre:auteur:cv namespace:

This test above can use a black list of namespaces to don't show the sidebar in specified cases.

var url = new String(document.location);
var test = url.replace(/id=trace-libre:auteur:cv/,'');
if (!document.all && typeof(TWTR) != 'undefined' && String(test) === String(url)) {
new TWTR.Widget({

I made it by changing the dokuwiki/lib/tpl/arctic/tpl_functions.php. The last function tpl_sidebar_hide is modifed to look for pagenames too. Unfortunatly you need to “hardcode” every page you want to hide in this file, but I only need a single page without the sidebar. Change in $id_hide the pagenames you need without a sidebar.

function tpl_sidebar_hide() {
    global $INFO;
    global $ACT;
    $act_hide = array( 'edit', 'preview', 'admin', 'conflict', 'draft', 'recover');
    if(in_array($ACT, $act_hide)) {
        return true;
    } else {
        $id_hide = array( 'namespace:site1','specialsite2');
        if(in_array($INFO['id'], $id_hide)) {
            return true;
        } else {
            return false;
        }
    }
}

Just a quick note, because I did not find any information on this:

I am using this template to display the wiki index tree in the sidebar. The wiki uses the iptrust plug-in to be freely accessible from our office but force login from outside.

So, while no content is presented without login, the sidebar still is. It is no option to disable it for not logged-in users, because of the IPTrust open-within-the-office feature.

What I finally did is editing the dokuwiki/lib/tpl/arctic/tpl_functions.php to add the 'login' action in tpl_sidebar_hide:

$act_hide = array( 'login', 'edit', 'preview', 'admin', 'conflict', 'draft', 'recover');

Et voilà: Because IPTrust shows the login page for not logged-in users, the sidebar is perfectly hidden.

Hanno 21-01-2011

Maintainer


2011-05-16: A new maintainer for this template is needed. Have a look at the following if you are interested: 1, 2.


The Arctic template (or Arctic-mbo) is one of the most important templates around. Once these templates have been updated the switch to Angua will be possible widely. (Harald Ronge, 14 november 2011)

Hello, i updated the arctic template to work with angua and added the mediamanager. I will keep supporting the template. Right now there is a github repository and a tarball tested against angua RC1. Regards — sf 2011/11/16 22:54
It works, nice! I have two comments:

- I would prefer the sidebars to be hidden in the full page mode of the media-manager. Chimeric did this for the admin and diff-views too. The center-page lacks space with this template, »overflows happen everything is a bit tight.
- The action links in the template are preceded by icons, the Media-Manager action link still misses such an icon
I tried to send feedback through the forum but got access denied. Hope you pick this up here. — harald 2011/11/21 22:21
I added the mediamanager listing icon in toolbar and actionlinks. The sidebars in media view are now removed but I still have to work on the resizing. — sf 2011/11/22 17:38
I just downloaded latest dokuwiki and arctic template but Media Manager looks corrupted. In default and arctic-mbo it is OK. — Denis 2011/12/29 16:28
Seems links at the top of the page point to outdated package (even xxx-latest one). Package from GitHub contains necessary files and fixes problems with Media Manager and its icon — Denis 2011/12/29 19:14
Hi, I also updated arctic-mbo. It should work now. — matthieu 2011/11/16 23:11

Hi!

I use “translate3” plugin. I create 2 custom sidebars for 2 language.

Is it posible to change sidebar with language?

(I tried to use file “nosidebar.txt” in different languages but it not work. DokuWiki used this file in “En” folder only).

Wbr, Alexandr.

Hello, i didnt test with translation plugin yet. You could try checking “namespace” in right_sidebar_content setting and create a page in the namespace of every language and name it like the pagename setting. — sf 2011/12/12 22:32

A&R#@^%$!!! BUG!!!

There can't be “/lib” path (Error 404 if dokuwiki isn't installed on “/”)

fixed, thank you

Also please add bug-tracker link. Thanks.

Media Manager not displayed correctly

Help!!!! Media Manager not working. After click the button the page of manager is total mess and If select a file for uploading… It said that after the file name “failed” .

As a temp fix if you copy all the css files that start with an underscore from the arctic-mbo download into your arctic template directory everything will start appearing normally. -keblerelfkc
Most probably a cache problem. Try touching (updating the timestamps of) style.ini.

main box in left sidebar disappears when creating new translation

when creating a new translation of a page, the “main box” of my left sidebar (id =sidebar ) disappears but the “extra box” (translations) remains. Someone has already had this issue?

Did you try translating the sidebar also? The translation plugin might change the namespace so arctic will look for the sidebar in the namespace of that language.

toc and tables

the table of contents lies over tables (normal text areas flow around the table of content, but if the page starts with tables, the toc-area converges with the table) - how can I fix it?

Only let admins edit sidebar pages

For public sites with lots of users, is it possible to only let admins edit/create pages named “sidebar”? So no one else gets to change how the sidebar looks and what's in it.

I have managed it (to some extent) by using ACL. Set ACL rule for page sidebar and user @user to read only

Index in sidebar, doesn't open start.txt

When using the index in sidebar option clicking on a namespace in the sidebar doesn't open the corresponding start.txt file. Is it possible to make this happen? In the case where there are a lot of .txt files in a namespace it can be far from obvious which is the 'most important' one.

I can't get the width to change

I have edited <my dokuwiki root>/lib/tpl/arctic/style.ini to set the width:-

wiki_width = “95%”

… and I have touched <my dokuwiki root>/conf/local.php (and I've also done CTRL/SHIFT/R) but to no avail. My arctic template stays obstinately at 84%.

So what am I doing wrong?

… and the answer is the width is also set in the Template style admin settings and that value overrides whats in style.ini
1)
in the <dokuwiki>/conf/ folder; not arctic/conf/! Just create it if it doesn't exist.
2)
you may need to experiment a bit with the values
3) , 4) , 5) , 6) , 7)
just create it if it doesn't exist
template/arctic.txt · Last modified: 2023-09-01 16:27 by Klap-in

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki