meta données pour cette page
Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentes Révision précédente Prochaine révision | Révision précédente | ||
dokuwiki:dokutouch [2012/08/28 11:23] ztrulphcs [aout 2012] |
— (Version actuelle) | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
- | ====== dokutouch ====== | ||
- | [[http:// | ||
- | |||
- | Comme ça m'a demandé un tout petit peu de travail d' | ||
- | |||
- | Je ne donne pas le détails des modifications pour DokuWiki version rc2011-11-10 " | ||
- | << | ||
- | |||
- | ===== Héritage de default ===== | ||
- | 4 fichiers .css de dokutouch proviennent directement du template default. Ce sont : | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | * '' | ||
- | |||
- | Donc, pour adapter dokutouch à une version de dokuwiki, il faudra reprendre ces fichiers depuis la version de dokuwiki ciblée. | ||
- | |||
- | ===== aout 2012 ===== | ||
- | |||
- | Les versions récentes de firefox ne présentent plus de boutons arrondis. Ajout dans les fichiers '' | ||
- | |||
- | En effet, la prise en charge des propriétés CSS ayant évoluée, il faut ajouter, à chaque fois qu'on trouve de ce genre de définitions : | ||
- | |||
- | < | ||
- | -webkit-border-top-left-radius: | ||
- | -webkit-border-top-right-radius: | ||
- | -moz-border-radius-topleft: | ||
- | -moz-border-radius-topright: | ||
- | -webkit-border-radius: | ||
- | -moz-border-radius: | ||
- | -webkit-border-radius: | ||
- | -moz-border-radius: | ||
- | </ | ||
- | des lignes dans ce genre : | ||
- | < | ||
- | border-bottom-left-radius: | ||
- | border-bottom-right-radius: | ||
- | border-radius: | ||
- | border-radius: | ||
- | </ | ||
- | |||
- | :!: Cette manipulation est à faire sur toutes les versions de dokutouch, y compris pour la version d' | ||
- | |||
- | ===== dokuwiki developpement aout 2012 ===== | ||
- | |||
- | Après la version de dokuwiki << | ||
- | |||
- | |||
- | ===== Gestionnaire de media ===== | ||
- | |||
- | Juste avant la version 2010-11-07, le gestionnaire de media a été pourvu de fonctionnalités supplémentaires, | ||
- | |||
- | Le thème dokutouch souffre donc d'une malformation au niveau de l' | ||
- | |||
- | {{.: | ||
- | |||
- | Pour corriger le problème, il faut ajouter le fichier '' | ||
- | |||
- | <file ini style.ini-snippet> | ||
- | |||
- | media.css | ||
- | _admin.css | ||
- | _linkwiz.css | ||
- | _mediaoptions.css = screen | ||
- | |||
- | rtl.css | ||
- | print.css | ||
- | |||
- | </ | ||
- | |||
- | ===== z-index ===== | ||
- | |||
- | Il faut ajuster le '' | ||
- | |||
- | Voilà ce que ça donne sans correction : | ||
- | |||
- | {{.: | ||
- | |||
- | On ajuste le '' | ||
- | |||
- | <file css layout.css.snippet> | ||
- | div.dokuwiki .stylehead { | ||
- | position: fixed; | ||
- | top: 0; | ||
- | height: 54px; | ||
- | width: 980px; | ||
- | z-index: 20; | ||
- | } | ||
- | |||
- | div.dokuwiki .stylefoot { | ||
- | position: fixed; | ||
- | bottom: 0; | ||
- | height: 54px; | ||
- | width: 980px; | ||
- | z-index: 20; | ||
- | } | ||
- | </ | ||
- | |||
- | On peut faire de même pour le fichier de css '' | ||
- | |||
- | <file css mobile.css.snippet> | ||
- | div.dokuwiki .stylehead { | ||
- | position: relative; | ||
- | width: 100%; | ||
- | z-index: 20; | ||
- | } | ||
- | |||
- | div.dokuwiki .stylefoot { | ||
- | position: relative; | ||
- | width: 100%; | ||
- | margin-top: -10px; | ||
- | z-index: 20; | ||
- | } | ||
- | </ | ||
- | |||
- | ===== Modification de fonctionnalité ===== | ||
- | |||
- | ==== Bouton de connexion ==== | ||
- | |||
- | L'une des fonctionnalité de ce thème, est que le bandeau de bas de page avec les boutons " | ||
- | |||
- | Après modification légère du thème, on peut choisir la position du bouton de connexion. Dans le bandeau du haut, toujuors visible, ou dans la barre du bas. Le réglage se trouve dans les options du thème sur la page de configuration du wiki. | ||
- | |||
- | {{.: | ||
- | {{.: | ||
- | ==== Titre pour les mobiles ==== | ||
- | |||
- | Le titre du wiki peut être trop grand pour les mobiles. J'ai ajouté une option permettant de définir un titre plus court spécialement pour les mobiles. Une petite image vallant mieux qu'un long discourt, voilà ce que ça donne sur un iphone : | ||
- | |||
- | {{.: | ||
- | {{.: | ||
- | ==== Icônes personnalisées ==== | ||
- | |||
- | Pour personnaliser le thème sans le modifier, créez un répertoire '' | ||
- | |||
- | Pour installer une icône de site (celle qui se trouve dans les onglets des navigateurs), | ||
- | |||
- | Pour installer une icône pour les mobiles, de type '' | ||
- | |||
- | |||
- | ===== Adaptations possibles ===== | ||
- | |||
- | J'ai été récemment contacté par un internaute qui souhaitait effectuer quelques modifications au thème. Voilà donc ce qu'il en ressort. | ||
- | |||
- | Certaines adaptations sont réalisées par un changement dans la feuille de style. Les nouveaux styles doivent être écrits dans un fichier nommé '' | ||
- | |||
- | ==== Affichage inconditionnel du bandeau du bas de page ==== | ||
- | |||
- | Cela nécessite une modification du code du thème. Dans le fichier '' | ||
- | <code php> | ||
- | <?php if (isset($INFO[' | ||
- | </ | ||
- | par cette ligne | ||
- | <code php> | ||
- | <?php if (true){ ?> | ||
- | </ | ||
- | |||
- | ==== Suppression de l' | ||
- | |||
- | Ceci peut se résoudre en trichant un peu, sans modifier le thème, juste un utilisant une feuille de style qui précise "Ne pas afficher cette partie" | ||
- | |||
- | Les lignes qu'il faut ajouter dans '' | ||
- | <code css> | ||
- | /* | ||
- | * Éliminer le bandeau de navigation (le truc blanc en haut) | ||
- | */ | ||
- | div.dokuwiki div.main-nav { | ||
- | display: none; | ||
- | } | ||
- | div.dokuwiki div.page { | ||
- | margin-top: 50px; | ||
- | } | ||
- | </ | ||
- | |||
- | ==== Éliminer la colonne de gauche contenant les images ==== | ||
- | |||
- | Même punition. On ne change pas le thème, mais on rajoute dans une feuille de style l' | ||
- | |||
- | Lignes du fichiers '' | ||
- | <code css> | ||
- | /* | ||
- | * Éliminer la colonne de gauche, prévue pour les images et | ||
- | * ne conserver que celle de droite contenant le texte | ||
- | */ | ||
- | div.dokuwiki div.page div# | ||
- | width: 100%; | ||
- | } | ||
- | div.dokuwiki div.page div# | ||
- | display: none; | ||
- | } | ||
- | </ | ||
- | |||
- | |||
- | ==== Modifier la largeur du thème ==== | ||
- | |||
- | Le thème dokutouch faut exactement 980 pixels de large. On peut vouloir élargir ou rétrécir ce thème. Cela nécessite deux modifications bien distinctes. L'une portant sur le style du thème, l' | ||
- | |||
- | Au passage, en bon amateur de logiciels libres, je vous recommande [[http:// | ||
- | |||
- | Commençons par le style. Il faut appliquer une propriété '' | ||
- | |||
- | Lignes à placer dans '' | ||
- | <code css> | ||
- | /* | ||
- | * Changer la taille du thème. Il faut créer une nouvelle image bg.gif | ||
- | * dont la taille est largeur-du-thème x 1 px. Cette image doit être | ||
- | * construite de la même manière que lib/ | ||
- | * faut alors remplacer l' | ||
- | * Ne pas oublier de renommer l' | ||
- | * avant d' | ||
- | */ | ||
- | div.dokuwiki div.stylehead { | ||
- | width: 1050px; | ||
- | } | ||
- | |||
- | div.dokuwiki div.stylefoot { | ||
- | width: 1050px; | ||
- | } | ||
- | div.dokuwiki { | ||
- | width: 1050px; | ||
- | } | ||
- | div.dokuwiki div.bar { | ||
- | width: 1030px; | ||
- | } | ||
- | </ | ||
- | |||
- | Passons maintenant à l' | ||
- | |||
- | La taille de l' | ||
- | |||
- | Maintenant, crez une image similaire de la taille désirée (1050x1 pixels dans mon exemple). Attention ! L' | ||
- | |||
- | {{ : | ||
- | |||
- | Si malgré ça vous observez un effet bizarre de " | ||
- | |||
- | ====== Téléchargement ====== | ||
- | |||
- | Voilà le thème dokutouch-mod avec toutes les **modifications** (mais pas les // | ||
- | |||
- | * [[http:// | ||
- | * [[http:// | ||
- | * [[http:// | ||
- | * [[http:// | ||
- | * [[http:// |