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
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
- template info date (2020-08-23 15:10)
- background_other color (2020-08-23 15:09)
- text_alt color (2020-08-22 22:45)
- searchform label (2020-08-22 22:03)
- sanitations (2020-08-22 21:35)
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 |
Sidebar Types
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:
- create
<dokuwiki>/lib/tpl/arctic/sidebars/helloworld/sidebar.php
- add the following code:
<?php print "Hello World"; ?>
- 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
Here it's an example for WordPress
I'm interested in integrating this into my arctic template.
Backlinks
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&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
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&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%&url=%link%', 'image' => 'delicious.png'), 'Digg' => array('link' => 'http://digg.com/submit?phase=2&title=%title%&url=%link%', 'image' => 'digg.png'), 'Facebook' => array('link' => 'http://www.facebook.com/sharer.php?u=%link%&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&title=%title%&bkmk=%link%', 'image' => 'google.png'), 'Google Buzz' => array('link' => 'http://www.google.com/buzz/post?url=%link%&message=%title%', 'image' => 'buzz.png'), 'Stumbleupon' => array('link' => 'http://www.stumbleupon.com/submit?url=%link%&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 |
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 .
- Name your style like
<your-style-name>.style.ini
- Create a screenshot
- Log in with your account
- Upload the screenshot (1024×768) and the style.ini as described here:
- Edit this section
- Open the media manager
- Browse to
dokuwiki:templates:arctic:styles
- Upload your files
- Insert the screenshot and the media-link in the table below
- Don't forget to insert your credentials
Don't forget to resize the screenshot in the table
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 |
![]() | 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:
- Complex Systems - Complex Systems Research Group website, Universidade Federal Fluminense, Niterói, Brazil
- http://www.mgv-hochmoessingen.de/ - Homepage of a choral society - THX to Che this is a very good template for CMS
- http://wiki.vehtoh.de - a semi-private, outsourced Brain (powerd by Dokuwiki and your great (little bit modified) template ;), feel free to contact me for the coffee!!!
- http://www.seiichiro0185.org/ My private Homepage about Linux and Tech stuff - arctic with some modifications through userstyle.css - Thanks for dokuwiki and this great template! -
- http://www.symbolic-link.org/schifffahrtwiki - Eine Site über Schiffe und Museen
FAQ
How to use an image instead of the root link in the header
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.css
1) 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.css
3) 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.css
4), 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.css
5) 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.css
6).
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 . '&' . '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" />';
How to quickly make it Smartphone ready
A quick and dirty way is to add some CSS. See here or here (french version).
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.css
7).
div.pagename { display: none; }
How to include links for dw2pdf plugin and/or bookcreator plugin?
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 tocase('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" /> 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" /> 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 thestyle.ini
. You have to modifydokuwiki/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 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_page
and if you have the sidebar right it'sdiv.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
Backlinks in a header
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.
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; } } }
Sidebar and IPTrust / Disable Sidebar on Login Page
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:21I 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:38I 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:28Seems 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
Sidebar for different language
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