Total Pageviews

Saturday, November 12, 2011

DOKUWIKI: modify arctic template to support mobile devices

1. Create arctic_mobile.css. The aim of the mobile CSS is to : 
  • Reduce all margins and paddings. 
  • Remove all float (right or left). There will be only one collumn with sidebar in the bottom. 
  • Maximize the width of the div.
body {
  margin: 0.1em;
}
 
div#wrapper {
  width: 98%;
  padding: 0.1em;
}
 
div.dokuwiki div.right_sidebar, div.dokuwiki div.left_sidebar {
  float: none;
  width: 99%;
}
 
div.dokuwiki div.right_page, div.dokuwiki div.left_page {
  padding: 0;
  width: 99% !important;
}
 
div.dokuwiki div.toc {
  float: none;
  width: 99%;
  margin: 0.1em;
}

2. Modify main.php
 
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
<link rel="stylesheet" media="only screen and (max-device-width: 599px)" type="text/css" href="<?php echo DOKU_TPL?>arctic_mobile.css" /> 
Orgin from: http://blog.slucas.fr/en/oss/dokuwiki-arctic-mobile

No comments:

Post a Comment