Mes modifications sur le template mnml-blog
Sep 18, 2011
3 minute read

Mes modifications sur le template mnml-blog

Rappel

Comme dit dans mon précédent billet, je viens de passer sur le template mnml-blog. J’ai fait quelques modifications légères soit purement graphiques soit pour mieux intégrer des plugins.

En voici le détail.

Modifications graphiques mineures

Toutes ces modifications ont été faites dans le fichier user/screen.css.

J’ai voulu ajouté une légère ombre bleue autour de la barre de navigation horizontale (pour rappeler la couleur des liens et des titres) :

#tmpl_header_nav
{
  -moz-box-shadow: 0 0 4px 1px #2B85A2;
  -webkit-box-shadow: 0 0 4px 1px #2B85A2;
  box-shadow: 0 0 4px 1px #2B85A2;
}

J’ai aussi ajouté une ombre grise autour de la page principale :

div#pagewrap
{
  -moz-box-shadow: 0 0 5px 5px #AAA;
  -webkit-box-shadow: 0 0 5px 5px #AAA;
  box-shadow: 0 0 5px 5px #AAA;
}

Version mobile du site

Comme pour mon précédent template (voir Version mobile du template Arctic pour Dokuwiki), j’ai voulu ajouter une version optimisée pour les smartphones.

Modification du main.php

J’ai ajouté avant le </head> :

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

Modification de user/screen.css

Pour simplifier j’ai viré purement et simplement la barre latérale de droite et le champ de recherche (mais il serait possible de les garder et les mettre à la fin par exemple).

@media (max-device-width: 599px)
{
div#tmpl_sidebar
{
display:none;
}

#tmpl_header_nav_search
{
display:none;
}

div#pagewrap
{
width: 98%;
min-width: 98%;
max-width: 98%;
padding: 0 5px;
margin: 0;
}

#tmpl_header #tmpl_header_nav ul li.level1 a, #tmpl_header #tmpl_header_nav ul li.level1 a:visited
{
  padding: 10px 5px;
}

.dokuwiki div#content
{
width: 100%;
}
}

Intégration du plugin translation

Pour certaines parties du site à la fois en français et anglais, j’utilise le plugin translation et j’ai voulu l’intégrer dans la barre de navigation horizontale.

Modification du main.php

Voici le diff :

--- main.php    2011-09-18 12:41:42.000000000 +0000
+++ /new/main.php     2011-09-16 15:18:57.000000000 +0000
@@ -220,6 +236,15 @@
                    echo $interim;
                 }
             }
+
+        $translation_plugin = &plugin_load('syntax','translation');
+        if ( $translation_plugin ) {
+                if (!plugin_isdisabled($translation_plugin->getPluginName())) {
+                print $translation_plugin->_showTranslations();
+                }
+        }
+
+
             if (tpl_getConf("mnmlblog_search") &&
                 tpl_getConf("mnmlblog_search_pos") === "headernav"){
                 echo "\n            <div id=\"tmpl_header_nav_search\" class=\"dokuwiki\">\n";

Modification de user/screen.css

.plugin_translation ul li {
  padding: 0;
  margin: 0;
  list-style: none outside none;
  float: left;
}

.plugin_translation ul li a, .plugin_translation ul li a:visited {
    background: none repeat scroll 0 50% transparent;
    color: #CCCCCC;
    display: block;
    padding: 15px 5px;
    text-decoration: none;
    text-transform: uppercase;
}

.plugin_translation ul li .curid a, .plugin_translation ul li .curid a:visited {
  background: #2B85A2;
}

.plugin_translation ul li a.wikilink2 {
  color: #000000;
}

Modification de user/screen.css pour la version mobile

@media (max-device-width: 599px)
{

.plugin_translation ul li a, .plugin_translation ul li a:visited {
    padding: 10px 3px;
}

}


comments powered by Disqus