====== neolaoresources3 Template ======

---- template ----
description   : HTML 5 template
author        : neolao
email         : neo@neolao.com
lastupdate    : 2010-01-15
compatible    : Lemming
depends       : 
conflicts     : 
similar       : 
screenshot_img: http://resources.neolao.com/_media/php/dokuwiki/neolaoresources3.png
tags          : html5, css3

downloadurl   : http://resources.neolao.com/_media/php/dokuwiki/template_neolaoresources3_20100115.zip
bugtracker    : # eg. https://github.com/example/dokuwiki-template-sample/issues
sourcerepo    : # eg. https://github.com/example/dokuwiki-template-sample/
donationurl   : # eg. https://www.paypal.com/...
---- 


This is a template for [[plugin:html5|HTML5 Renderer]].

===== Download and Install ======

Use the following URL to download this template:

   * [[http://resources.neolao.com/_media/php/dokuwiki/template_neolaoresources3_20100115.zip|template_neolaoresources3.zip]]

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

===== Sites using this Template =====

  * http://resources.neolao.com

===== Discussion =====

I like the playful appearance of this theme, but I made a couple of minor changes that might be useful to others so I would like to share them here:
  - I like the new DokuWiki Admin screen icons, but they were missing with this template. I tracked the problem down to being due to a missing "dokuwiki" division tag, but if this tag is placed right after the body tag it messes up the page formatting. By placing it right after the **section id=body** tag it works.  So around line 219 of main.php add the **div** line like this:<code><section id="body" role="main">
ADD THIS ==>  <div class="dokuwiki">
<?php html_msgarea()?></code> Just before the </section> tag, add a </div> tag (which will end up being line 230).
  - I wanted the top menu buttons to react to the mouse moving over them, so in lines 184-190 of main.php I made all the **li** tags of class "menu" like this:<code><li class="menu> ... </li></code>Then I edited **style.css** to change "li.selected" into "li.menu" (a better name, I thought) and then changed the "a" element to be "a:hover" instead. The following are the lines I changed (with line numbers shown for convenience):<code>135  body > nav li.menu a:hover
141  body > nav[role="primary navigation"] li.menu a:hover
149  body > nav[role="secondary navigation"] li.menu a:hover</code>Now when I mouse-over the top menu items they change nicely.
  - On the right ADMIN menu I did not care for the colour scheme, it didn't seem to blend with the rest.  So I came up with a pleasing look by editing **style.css** in the folowing ways: In the style "body > aside section input[type=submit]" (line 212) I placed some space between buttons with this:<code>padding-bottom: 2px;</code>The class following it I changed thusly:<code>      body > aside section input[type=submit]:hover {
         background-color: #1ba6b2;
         border-top:       solid 1px silver;
         border-left:      solid 1px silver;
         border-bottom:    solid 1px black;
         border-right:     solid 2px black;
      }
</code>Try it and I think you will like the results.
 --- //Angelo Babudro 2010/02/06//