====== Arctic Template ======

---- template ----
author:         Michael Klier, Samuel Fischer
email:          sf@notomorrow.de
Description:    A very customizable sidebar template
LastUpdate_dt:  2011-12-23
Compatible:     2009-02-14 2009-12-25 2010-11-07 2011-05-25 2011-11-10
Template_tags:  sidebar, cms
Screenshot_img: :template:arctic.png
sourcerepo:     https://github.com/samfisch/dokuwiki-template-arctic
downloadurl:    http://m3.notomorrow.de/public/repos/dokuwiki/tpl/template-arctic-stable.tgz
----

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.

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 [[plugin:config|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

===== Download =====

  * **latest**: http://r.notomorrow.de/dokuwiki-template-arctic/pkg/latest 
  * **stable**: http://r.notomorrow.de/dokuwiki-template-arctic/pkg/stable (2011-12-25)


==== changes ====
{{rss>https://github.com/samfisch/dokuwiki-template-arctic/commits/master.atom 5 date}}


==== previous Versions ====

^ DokuWiki Version ^ Download ^
| 2011-05-25 "Rincewind" | [[https://cloud.github.com/downloads/chimeric/dokuwiki-template-arctic/template-arctic.tgz|template-arctic.tgz]] |
| 2010-11-07 "Anteater" | [[https://cloud.github.com/downloads/chimeric/dokuwiki-template-arctic/template-arctic.tgz|template-arctic.tgz]] |
| 2009-12-25 "Lemming" | [[https://cloud.github.com/downloads/chimeric/dokuwiki-template-arctic/template-arctic-2009-12-25.tgz|template-arctic-2009-12-25.tgz]]  |
| 2009-02-14 | [[https://cloud.github.com/downloads/chimeric/dokuwiki-template-arctic/template-arctic-2008-11-04.tgz|template-arctic-2009-08-22.tgz]] |
| 2008-05-05 | [[https://cloud.github.com/downloads/chimeric/dokuwiki-template-arctic/template-arctic-2008-11-04.tgz|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:**
<code>
% cd <dokuwiki>/lib/tpl/
% git clone https://github.com/samfisch/dokuwiki-template-arctic.git arctic
</code>

**Debian install (or probably any other distribution):**
<code>
% cd /usr/share/dokuwiki/lib/tpl/
% wget http://m3.notomorrow.de/public/repos/dokuwiki/tpl/template-arctic-stable.tgz
% tar xzvf template-arctic-stable.tgz
</code>

===== 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 [[.:arctic#sidebar types|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 [[.:arctic#sidebar types|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 [[.:arctic#adding the main sidebar|main sidebar]] |
| user | see [[.:arctic#adding a user sidebar|user sidebar]] |
| group | see [[.:arctic#adding a group sidebar|group sidebar]] |
| namespace | see [[.:arctic#adding a namespace sidebar|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 [[.:arctic#adding custom sidebars|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".



<file>
---- snip ----
user:*           @ALL   0
group:*          @ALL   0
user:tom:*       tom    8
group:users:*    @user  2
---- snap ----
</file>

===== 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 [[.:arctic#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: \\ <code php><?php
print "Hello World";
?>
</code>
  - add "helloworld" to the list of comma separated sidebars in the configuration manager.

Here's a list of other [[.:arctic#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 ====

FIXME

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;\\
}''
==== Donation Cloud Sidebar ====

FIXME  

Here it's an example for WordPress

[[http://www.zirona.com/software/wordpress-donations-cloud/|Donation cloud]]

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''
<code php sidebar.php>
<?php
html_backlinks($ID);
?>
</code>

==== Cloud Plugin ====
For the [[plugin:cloud|Cloud Plugin]] you can use the following snippet:

''/lib/tpl/arctic/sidebars/cloud/sidebar.php''
<code php sidebar.php>
<?php
print p_render('xhtml',p_get_instructions('~~CLOUD~~'),$info);
?>
</code>

==== 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''
<code 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);
	

?>
</code>

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''
<code 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>
</code>

==== Clock Sidebar ====

If you have installed the [[plugin:clock|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''
<code php sidebar.php>
<?php
$outp= p_render('xhtml',p_get_instructions('{{clock}}'),$info);
print substr($outp, 4, -5);
?>
</code>

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.machuca@gulix.cl|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''
<code 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
}
?>
</code>

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

Source : [[http://blog.slucas.fr/en/oss/dokuwiki-arctic-sidebar|here]]

==== Translation ====
you need to install the [[plugin:translation]] plugin,
place following code in a translation directory in the sidebars directory,
<file /lib/tpl/arctic/sidebars/translation/sidebar.php>
<?php                                                                                                                                            
$translation = &plugin_load('helper','translation');
if ($translation) echo $translation->showTranslations();

</file>

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 ^
|{{http://chimeric.de/_media/projects:dokuwiki:template:arctic:styles:style2.jpg?200|}}| 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 [[http://www.chimeric.de/?do=register|register]] yourself and get an account. Of course you can send [[chi@chimeric.de|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 (1024x768) 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 ^
|{{http://chimeric.de/_media/projects:dokuwiki:template:arctic:styles:simplyred.style.jpg?200}}| {{http://chimeric.de/_media/projects:dokuwiki:template:arctic:styles:simplyred.style.ini}} FIXME | Debian Red | [[chi@chimeric.de|Michael Klier]] |
|{{http://chimeric.de/_media/projects:dokuwiki:template:arctic:styles:simplyblack.style.jpg?200}}| {{http://chimeric.de/_media/projects:dokuwiki:template:arctic:styles:simplyblack.style.ini}} FIXME | Black | [[chi@chimeric.de|Michael Klier]] |
|{{http://chimeric.de/_media/projects:dokuwiki:template:arctic:styles:chimeric.style.jpg?200}}| {{http://chimeric.de/_media/projects:dokuwiki:template:arctic:styles:chimeric.style.ini}} FIXME | Former color scheme of this site, but without \\ header and body background images | [[chi@chimeric.de|Michael Klier]] |
|{{http://wiki.martinsgill.co.uk/_media/projects/dokuwiki/arctic_dark_screenshot.jpg?200}}|  [[http://wiki.martinsgill.co.uk/projects/dokuwiki/arctic_dark_theme|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@martinsgill.co.uk|Martin Gill]]|

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

<code php>
<?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)";
?>
</code>
<code>
:!: 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]].
</code>

===== Credits/Thanks =====
Some of the Ideas are taken from the other great [[:templates|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:
  * [[http://www.freemedforms.org|FreeMedForms, Free open source medical software]]. Theme is slightly modified.
  * [[http://bibliopedia.ptcvic.org]] -- great template. Shame someone doesn't write a decent add new page plugin.
  * [[http://freenaswiki.ru/|FreeNAS Wiki.ru]] -- A website about [[http://www.freenas.org/|FreeNAS]] Server (almost completely written in Russian)
  * [[http://www.quantum-measurement-and-control.org/|Quantum Measurement and Control]] -- A website about a book on quantum measurement and quantum feedback control, many thanks for the template.
  * [[http://neuroanalysis.org/wiki/|STAToolkit Wiki]] -- Our sincerest appreciation for a wonderful template!
  * [[http://thecoffeespoon.net/battlestations/]] - MWBS Wiki
  * [[http://www.howcanibuild.com]] -- Great info to customize AdSense ads 
  * [[http://www.luizgustavo.pro.br]] -- The best of template for DokuWiki
  * [[http://blobseer.gforge.inria.fr]]
  * [[http://samuele.netsons.org]]
  * [[http://www.gregow.se]]
  * [[http://izotretin.pl/wiki|Polish wiki about Accutane (isotretinoin)]]	 
  * [[http://www.shambhala-toulouse.fr]] -- thanks you for your great template ^_^
  * [[http://www.bridgeclub-grunewald.de/]] -- Etwas Bastelarbeit war nötig. Aber ^_^
  * [[http://www.gerion.pl/dokuwiki/doku.php]] -- polish site of RPG fans (Earthdawn)
  * [[http://www.rollberg.de|Der Rollberg]] -- Eine Webseite über den Neuköllner Norden
  * [[http://cdli.ucla.edu/wiki/|CDLI-Wiki]] -- Cuneiform Digital Library Initiative, University of California, Los Angeles
  * [[http://www.hodique.info/]], personal and professional website of Yann Hodique
  * [[http://www.chennaibus.info]] -- A website on complete information on an Indian City, Chennai - Bus Routes on web and mobile.
  * [[http://www.chennaitrain.info]] -- A website on complete information on an Indian City, Chennai - Train Timings on web and mobile.
  * [[http://www.TheFreyers.net]] -- personal and professional website of Chris Freyer
  * [[http://Zlotnik.ScienceOnTheWeb.Net]] -- prof. Alexander Zlotnik's homepage (mostly in Russian)
  * [[http://tooyi.net/noki/|wiki.tooyi.net]] --中国(简体)信长之野望online百科
  * [[http://informatica.temuco.udelmar.cl/~lmachuca/dokuwiki-lucho/]] -- my website, development of plugins for DokuWiki, and some personal stuff.
  * [[http://www.seirios.org/~seirios/dokuwiki/]] -- Web site of "ほほほのほ" for Technical and other memos Wiki in Japan.
  * [[http://www.envirolaw.org.au/]] 
  * [[http://complex.if.uff.br|Complex Systems]] - Complex Systems Research Group website, Universidade Federal Fluminense, Niterói,  Brazil
  * [[http://folkipedia.org|Folkipedia]] - Folk and Tradition Wiki
  * [[http://www.pythongamebook.com]] - Book about python game programming
  * [[http://wiki.nagios-fr.org]] -- Nagios French Community Wiki
  * [[http://www.xj3.nl/dokuwiki|www.xj3.nl]] - small cooperation of engineers
  * [[http://www.spielend-programmieren.at]] - Game programming courses for young people, Vienna, Austria
  * [[http://www.madesimple.de/inkasso-kochbuch]] - Das Inkasso-Kochbuch der Anwaltskanzlei Lueneberg.
  * [[http://www.mgv-hochmoessingen.de/]] - Homepage of a choral society - **THX to Che** this is a very good template for CMS
  * [[http://wiki.mausebande.com]] - German wiki about mice
  * [[http://doctoryoo.pe.kr]] - Korean wiki, modified.
  * [[http://openwrt.pl]] - Polish Wiki about OpenWrt Project
  * [[http://www.unipoly.ch]] - Student Association for Sustainable Development 
  * [[http://bash-hackers.org/wiki]] - Wiki about the GNU Bash shell. Relatively simple/plain configuration of the Arctic template
  * [[http://www.yake.org]] - Project site for the cross-platform game/simulation engine
  * [[http://www.wurzelwerkerinnen.at]] - Dear Michael, Thx for your work !!! Wonna buy y one ore more coffees ;-)
  * [[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://weidewiki.org]] - Das Portal rund um Weideprodukte in Deutschland, Luxemburg, Österreich und der Schweiz bedankt sich für das Template!
  * [[http://wiki.miiconsola.com]] - MiiConsola Wiki (Spanish). Videogames, consoles, tournaments, etc.
  * [[http://baum.petermansfeld.de]] - Hugo Baum - eine Biographie
  * [[http://qcake.unkompliziert.org]] - QCake, the Game Maker - 3d software
  * [[http://trow.cc/wiki/]] - T.R.O.W. Wiki（简体中文） - <del>fantasy style theme</del> Parchment Style(merged with our [[http://trow.cc/forum/|forum]])
  * [[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://trace-libre.net|Trace Libre]] : blog of a research in information and communication science. I always have a problem with dates of posts (I can't make a reindexation every time I change a namespace), but this template makes me happy, thanks ! :-D
  * [[http://www.artduweb.com|Art du web]] - Wiki collaboratif consacré à l' Administration Système et Réseaux
  * [[http://cheaterwiki.pl/|Cheater WIKI]] - Polish website dedicated to game cheats.
===== FAQ =====


==== How to use an image instead of the root link in the header ====

==== 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
<code html>
<div class="left_sidebar">
...
</div>
</code>
or
<code html>
<div class="right_sidebar">
...
</div>
</code>

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''((in the <dokuwiki>/conf/ folder; not arctic/conf/!  Just create it if it doesn't exist.)) and add:

<code css>
div.dokuwiki .header {
  background:url(lib/tpl/arctic/images/[name-of-your-image]) no-repeat;
}
</code>

Then edit ''<dokuwiki>/lib/tpl/arctic/style.ini'' and set ''%%__%%header_height%%__%%'' and eventually ''%%__%%wiki_width%%__%%'' according to the dimensions of your image((you may need to experiment a bit with the values)).

==== How to integrate a logo in the sidebar? ====
Just put your logo in ''<dokuwiki>/lib/tpl/arctic/images/'' and edit ''<dokuwiki>/conf/userstyle.css''((just create it if it doesn't exist)) and add your logo as a background image to ''div.dokuwiki div.left_sidebar'' or ''div.dokuwiki div.right_sidebar'', e.g.

<code css>
div.dokuwiki div.left_sidebar {
  background: url('lib/tpl/arctic/images/filename.png') no-repeat;
  padding-top: [height of your logo in px]px;
}
</code>

==== How to hide empty namespaces from the sidebar index? ====
You can use for example the [[plugin:navi|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''((just create it if it doesn't exist)), and add:
<code css>
div.dokuwiki div.left_sidebar,
div.dokuwiki div.right_sidebar {
  min-height: 350px;
}
</code>

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''((just create it if it doesn't exist)) add the following.

<code css>
div.dokuwiki form#dw__search input.button {
  border: none;
  background: url(images/search.png) no-repeat;
  padding-left: 50px;
  color: #fff;
  width: 25px;
}
</code>

==== The editing toolbar is missing, what can I do? ====
See [[faq:toolbar]].

==== How to put a logo in a sidebar? ====                                                                                      
Just put your logo in ''<dokuwiki>/lib/tpl/arctic/images/'' and add the following CSS to your ''<dokuwiki>/conf/userstyle.css''((just create it if it doesn't exist)). Use either ''div.dokuwiki div.left_sidebar'' or ''div.dokuwiki div.right_sidebar''((**Note:** leave out the square brackets)).

<code css>
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;
}
</code>

==== 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''((just create it if it doesn't exist)).

<code css>
div.dokuwiki #qsearch__in {
  width: [width]px;
}
</code>


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

<code css>
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%;
}
</code>
==== 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'':

<code php>
// 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" />';
</code>

==== How to quickly make it Smartphone ready ====
<del>A quick and dirty way is to add some CSS. See [[http://blog.slucas.fr/en/oss/dokuwiki-arctic-mobile|here]] or [[http://blog.slucas.fr/fr/oss/dokuwiki-arctic-mobile|here (french version)]].</del> FIXME


===== Discussion =====
==== 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.machuca@gulix.cl|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:
<code php>
      <?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 } ?>

</code>
 --- [[user>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?
>//[[michi1409@gmx.de|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: <code css>
div.dokuwiki div.left_sidebar {
  ...
  width: 21%;
  ...
}
</code>
or 
<code css>
div.dokuwiki div.right_sidebar {
  ...
  width: 21%;
  ...
}
</code>
--- //[[chi@chimeric.de|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@chimeric.de|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.
--- //[[horstjens@gmail.com|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@chimeric.de|chi]] 11.05.2007 00:09//

>> I simply use <code>div.dokuwiki div.pagename { visibility: hidden }</code> in %%userstyle.css%%. But search engines like Google seem to not like hidden links. -- //[[az1@land.ru|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.


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

<code javascript>
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({
</code>

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. 
<code php>
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;
        }
    }
}
</code>

==== 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 [[plugin: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//:
<code php>
$act_hide = array( 'login', 'edit', 'preview', 'admin', 'conflict', 'draft', 'recover');
</code>
Et voilà: Because IPTrust shows the login page for not logged-in users, the sidebar is perfectly hidden.

--- //[[stehling@designtoproduction.com|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: [[http://www.freelists.org/post/dokuwiki/Chis-Legacy|1]], [[http://www.freelists.org/post/dokuwiki/New-maintainer-for-Arctic-and-Dokubook-template-needed|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  --- [[user>sf|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. --- [[user>harald|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. --- [[user>sf|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. --- [[rogerdan@mail.ru|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  --- [[rogerdan@mail.ru|Denis]] //2011/12/29 19:14//

>Hi, I also updated [[template:arctic-mbo]]. It should work now.  --- [[user>matthieu|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.  --- [[user>sf|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.