Comment adapter un thème pour Concrete5:

Pré-requis:

Nous allons aborder ici l'adaptation de thème pour concrete5. Afin de partir sur de bonne bases, nous vous conseillons de lire les pages relatives à l'explication du CSS et la création de page type de Concrete5. De cette façon il sera plus simple de comprendre les notions abordées.

   Ce tutoriel n'est en aucun cas un cours sur les classes CSS, ni sur le codage en xHTML. Juste une explication succinte sur l'approche et l'adaptation des thèmes pour conrete5. 

Nous prendrons donc comme exemple le thème entomology de freeCSS templates. Pour l'étudier il vous faudra donc avoir un éditeur de code comme notepad++, GEdit, bluefish, ou text wrangler (comme ça pas d'excuses) et un navigateur internet installé sur votre ordinateur et fonctionnel. Un serveur web en local comme Wamp, Lamp, ou Mamp serait idéal pour les tests et le développement.

Note importante:

Cette méthode d'adaptation est loin d'être LA méthode, ni la meilleur méthode, ni la plus rapide ou quoi que se soit dans le genre. C'est simplement la méthode que j'utilise habituellement pour adapter des thèmes existants sur concrete5. Quels qu'ils soient. L'exemple présent est relativement simple et donc adéquat pour une explication, car ressemblant à la base à la structure voulue.

A savoir qu'en moyenne il faut compter (selon votre niveau en (x)HTML, CSS, and co sur un thème comme celui-ci) entre 1 heure et 4/5 heures de travail pour une adaptation.

Etude:

Nous avons donc téléchargé et décompresser le thème en question, et avons ouvert avec notre éditeur les fichiers index.html et default.css. Nous avons également ouvert le fichier index.html avec notre navigateur pour avoir un repère visuel.

1ere constatation:

Le fichier index.html: Ce fichier à une structure relativement proche de celle du thème par défaut de concrete5  , et cela nous arrange bien. En effet nous remarquons:

• Un header
• Un wrapper contenant:
  • Une colonne
  • Un contenu Principal
• Un footer

Le fichier default.css: La feuille de style en cascade est on ne peu plus claire également. Celui-ci sera à scinder en deux parties (typography.css et main.css) pour respecter l'architecture de concrete5 au niveau des styles.

Un rapide examen de ce fichier nous montres les styles des textes, liens, menus, etc... et les définitions de contenus employé et leur emplacements. 

Encore une fois très similaire aux style de concrete5.

Méthode:

A partir d'ici deux méthodes s'offres à nous:

1. Conserver les styles de concrete5 et les "overighter avec notre style"
2. Partir de zéro et écrire tous les styles utilisés.

Nous allons opter pour la version la plus clean, soit le choix numéro 2.

Besoins:

          Définissons rapidement nos besoins. Si nous nous référons à la documentation sur la création de thème pour C5, nous avons besoins au minimum (pour bien faire) des templates suivants:

• un dossier elements contenant:
  • header.php
  • footer.php
• default.php
• left_sidebar.php
• full.php
• view.php
• typography.css
• main.css
• un dossier images
• un fichier description.txt
• une image photo miniature du thème

  Rien ne vous empêche par la suite de faire d'autres templates comme home.php ou toute autre page selon vos besoins.

Et côté zones nous définierons le minimum également:

• Header Nav
• Header
• Main
• Sidebar
• Footer

Qu'avons nous ?

Récapitulons nos acquis: 

• Un fichier html préformaté très ressemblant a ceux de C5.
• Un fichier CSS remplit relativement complet.
• Un dossier contenant les images de fond et décoratives.

Bref tout pour réeussir une adaptation en un tour de main.

Adaptation:

Etape1: la préparation

           Nous allons tout d'abord créer notre arborescence de fichiers vides dans un dossier nommé Entomology, tel que décris dans la chapitre des besoins. Dans le dossier images nous copierons le contenu du dossier du même nom du thème téléchargé. Nous pouvons également copier le fichier de license à la racine.

 Etape2: la copie des bases

          Continuons dans la copie "rapide" avec le fichier default.css. Nous copierons le contenu relatif au texte dans le fichier typography.css (soit les balises a, h, p blockquote, pre, code, etc ...) et le reste dans le fichier main.css.

Vous devriez obtenir les fichiers suivants: (nous remplirons les blancs plus tard)

pour typography.css :

h1, h2, h3 { color: #F08F02; } h1 { } h2 { margin-bottom: 1em; text-transform: uppercase; font-size: 1.2em; } h3 { margin-bottom: 1.5em; text-transform: uppercase; font-size: .8em; } p, blockquote, ul, ol { margin-bottom: 1.5em; } p { } blockquote { margin-left: 2em; padding-left: 1em; border-left: 2px solid #F08F02; font-style: italic; } pre, code { } pre { } code { } a:link { color: #F08F02; } a:hover { text-decoration: none; } a:visited { } 

pour main.css :

/* Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License */ * { margin: 0; padding: 0; } body { background: #FFFEF5 url(images/img01.gif); font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #767941; } ul, ol { margin-left: 3em; } ul { } ul li { } ol { } ol li { } img { } .image-left { float: left; margin-right: 1em; } .image-right { float: right; margin-left: 1em; } input, textarea, select { } input { } textarea { } select { } /* Header */ #header { height: 230px; padding: 0 0 0 330px; background: url(images/img02.jpg) no-repeat; } /* Logo */ #logo { height: 80px; padding: 150px 0 0 30px; background: url(images/img03.jpg) no-repeat; text-transform: lowercase; } #logo h1 { float: left; letter-spacing: -.1em; font-style: italic; font-size: 3em; } #logo h1 a { color: #767941; } #logo h2 { float: left; letter-spacing: -.05em; font-style: italic; font-size: 1em; } #logo a { text-decoration: none; } /* Wrapper */ #wrapper { margin-right: 100px; background: url(images/img05.jpg) repeat-y 330px 0; } /* Sidebar */ #sidebar { float: left; width: 330px; } /* Content */ #content { margin-left: 330px; padding: 30px; } /* Menu */ #menu { } #menu h2 { display: none; } #menu ul { margin: 0; list-style: none; } #menu li { display: inline; } #menu a { display: block; height: 45px; padding: 16px 0 0 30px; background: url(images/img04.jpg) repeat-x; text-decoration: none; font-size: 1.4em; font-style: italic; color: #767941; } #menu a:hover { color: #F08F02; } /* Testimonial */ #testimonial { padding: 30px; } #testimonial blockquote { margin-left: 0; } /* Welcome */ #welcome { } /* Footer */ #footer { padding: 60px 30px; background: url(images/img06.gif); color: #ADB07C } #footer hr { display: none; } #footer p { margin: 0; font-size: .8em; } #footer a { color: #ADB07C }  

          Maintenant nous allons poser la base du thème, soit l'entête et le pied de page de la façon la plus basique possible. Nous affinerons plus tard, ici nous allons juste copier bêtement les parties du thème correspondantes. En gardant tout de même les syntaxes de bases de concrete5 pour:

les liens de fichiers CSS:

<style type="text/css">@import "<?php echo $this->getStyleSheet('main.css')?>";</style> <style type="text/css">@import "<?php echo $this->getStyleSheet('typography.css')?>";</style> 

les protections de base:

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?> 

et les éléments requis, pour le header:

<?php Loader::element('header_required'); ?> 

et le footer:

<?php require(DIR_FILES_ELEMENTS_CORE . '/footer_required.php'); ?> 

Ainsi que les protections et inclusions des fichiers header et footer dans les fichiers de contenus principaux. soit les:

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); $this->inc('elements/header.php'); ?> 

et

<?php $this->inc('elements/footer.php'); ?> 

Nous avons donc pour /elements/header.php : (notez que je triche un peu en laissant xhtml transitionnel au lieu de strict qui simplifiera la vie plus tard, ne serait-ce que pour les types de lien href)

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"> <html lang="en"> <head> <!-- Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License --> <!-- Site Header Content //--> <style type="text/css">@import "<?php echo $this->getStyleSheet('main.css')?>";</style> <style type="text/css">@import "<?php echo $this->getStyleSheet('typography.css')?>";</style> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <?php Loader::element('header_required'); ?> </head> <body> <div id="header"> <div id="logo"> <h1><a href="#">Entomology</a></h1> <h2><a href="#">By Free CSS Templates</a></h2> </div> </div> <div id="wrapper"> 

et pour le /elements/footer.php :

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?> </div> <div id="footer"> <hr /> <p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="#">RSS Feeds</a></p> <p id="legal">Copyright © 2007 Entomology. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p> </div> <?php require(DIR_FILES_ELEMENTS_CORE . '/footer_required.php'); ?> </body> </html> 

et pour finir notre (plus que brutale) copie de contenu, nous allons inséré le reste du code dans le fichier left_sidebar.php. Ce choix est arbitraire, nous avons pris celui-ci dans le cas présent car la colonne du thème est à gauche au départ.

nous avons donc dans left_sidebar.php:

<div id="sidebar"> <div id="menu"> <h2>Navigation Menu</h2> <ul> <li><a href="#" accesskey="1" title="">Homepage</a></li> <li><a href="#" accesskey="2" title="">About Us</a></li> <li><a href="#" accesskey="3" title="">Products</a></li> <li><a href="#" accesskey="4" title="">Services</a></li> <li><a href="#" accesskey="5" title="">Forums</a></li> <li><a href="#" accesskey="6" title="">Join Us</a></li> <li><a href="#" accesskey="7" title="">Contact Us</a></li> </ul> </div> <div id="testimonial"> <h2>Testimonial</h2> <blockquote> <p>“Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.”</p> <p><em>Jane Smith</em><br /> <a href="#">www.example.com</a></p> </blockquote> </div> </div> <div id="content"> <div id="welcome"> <p class="image-right"><img src="images/img200x150.jpg" alt="" width="200" height="150" /></p> <h2>Welcome to Entomology!</h2> <p><strong>Entomology</strong> is a free template from <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photos are from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. Enjoy :)</p> </div> <div id="example"> <h2>Common Markup Examples</h2> <p>This is a paragraph followed by an unordered list of links. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula.</p> <ul> <li><a href="#">Integer sit amet pede vel arcu aliquet pretium.</a></li> <li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a href="#">Phasellus nec erat sit amet nibh pellentesque congue.</a></li> <li><a href="#">Pellentesque quis elit non lectus gravida blandit.</a></li> <li><a href="#">Maecenas vitae orci vitae tellus feugiat eleifend.</a></li> </ul> <h3>A Heading Level Three</h3> <blockquote> <p>This is a blockquote. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula.</p> </blockquote> <h3>A Heading Level Three</h3> <p>Another paragraph example followed by an ordered list:</p> <ol> <li>Integer sit amet pede vel arcu aliquet pretium.</li> <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> <li>Phasellus nec erat sit amet nibh pellentesque congue.</li> </ol> </div> </div> <div style="height: 1px; clear: both;"></div> 

      Nous n'avons pour le moment, QUE copier le thème télécharger sans rien toucher. Nous n'avons donc aucune zone de contenu ni quoi que ce soit d'exploitable en soit !!

Maintenant nous allons dégrossir (à la hache) le fichier de contenu principal afin qu'il soit un minimum exploitable.

Etape 3: Un premier nettoyage rapide.

Ok, si nous faisions en sorte d'avoir quelque chose d'utilisable ?

Oublions un instant les fichiers d'entêtes et de pied de page, et conentrons nous sur le contenu principal. Qu'avons nous:

• Un menu dans la colonne (que nous ne touchons pas pour le moment (mais ce ne saurait tarder).
• Des zones de texte dans la colonne et la zone centrale.

      Tranchons dans le vif et effaçons le texte. D'ailleurs nous remarquerons au passage que les classes welcome (vide), example (qui n'éxiste pas dans le CSS d'ailleurs) et image-right ne nous servent plus à rien. Nous pouvons donc épurer le fichier main.css pas la même occasion.

          Nous conserverons la classe testimonial pour le moment vu que sont conteneur nous intéresse pour le moment. En effet pour ne pas nous lancer dans plusieurs choses à la fois nous conservons le menu en dur pour le moment.

          Maintenant insérons nos zones de contenu standard à leurs endroit respectifs. Soit Sidebar dans la colonne et Main dans la zone principale.

Ce qui nous donne pour le fichier main.css:

/* Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License */ * { margin: 0; padding: 0; } body { background: #FFFEF5 url(images/img01.gif); font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #767941; } ul, ol { margin-left: 3em; } ul { } ul li { } ol { } ol li { } img { } .image-left { float: left; margin-right: 1em; } input, textarea, select { } input { } textarea { } select { } /* Header */ #header { height: 230px; padding: 0 0 0 330px; background: url(images/img02.jpg) no-repeat; } /* Logo */ #logo { height: 80px; padding: 150px 0 0 30px; background: url(images/img03.jpg) no-repeat; text-transform: lowercase; } #logo h1 { float: left; letter-spacing: -.1em; font-style: italic; font-size: 3em; } #logo h1 a { color: #767941; } #logo h2 { float: left; letter-spacing: -.05em; font-style: italic; font-size: 1em; } #logo a { text-decoration: none; } /* Wrapper */ #wrapper { margin-right: 100px; background: url(images/img05.jpg) repeat-y 330px 0; } /* Sidebar */ #sidebar { float: left; width: 330px; } /* Content */ #content { margin-left: 330px; padding: 30px; } /* Menu */ #menu { } #menu h2 { display: none; } #menu ul { margin: 0; list-style: none; } #menu li { display: inline; } #menu a { display: block; height: 45px; padding: 16px 0 0 30px; background: url(images/img04.jpg) repeat-x; text-decoration: none; font-size: 1.4em; font-style: italic; color: #767941; } #menu a:hover { color: #F08F02; } /* Testimonial */ #testimonial { padding: 30px; } #testimonial blockquote { margin-left: 0; } /* Footer */ #footer { padding: 60px 30px; background: url(images/img06.gif); color: #ADB07C } #footer hr { display: none; } #footer p { margin: 0; font-size: .8em; } #footer a { color: #ADB07C }  

Et pour le fichier left_sidebar.php:

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); $this->inc('elements/header.php'); ?> <div id="sidebar"> <div id="menu"> <h2>Navigation Menu</h2> <ul> <li><a href="#" accesskey="1" title="">Homepage</a></li> <li><a href="#" accesskey="2" title="">About Us</a></li> <li><a href="#" accesskey="3" title="">Products</a></li> <li><a href="#" accesskey="4" title="">Services</a></li> <li><a href="#" accesskey="5" title="">Forums</a></li> <li><a href="#" accesskey="6" title="">Join Us</a></li> <li><a href="#" accesskey="7" title="">Contact Us</a></li> </ul> </div> <div id="testimonial"> <?php $as = new Area('Sidebar'); $as->display($c); ?> </div> </div> <div id="content"> <?php $a = new Area('Main'); $a->display($c); ?> </div> <div style="height: 1px; clear: both;"></div> <?php $this->inc('elements/footer.php'); ?> 

          Ce n'est toujours pas ça mais on avance. Pour continuer avec notre hache  regardons de plus pret les fichiers contenus dans le dossier /elements. Et insérons quelques zones de base dont nous aurons besoins. Soit le nom du site avec le lien sur l'accueil à la place du nom du thème, et une navigation (Header_nav). La zone Header ne se prête pas trop bien à ce thème en l'état. Nous laisserons donc cette partie à votre discrétion.

          Par contre nous pouvons nous créer une petite zone type slogan pour remplacer le texte "By Free CSS Templates". Il va de soit que cette zone sera dédié à de courts textes, mais éditables sur chaque page, ce qui peut être sympa. Cependant, rien ne vous empêche de laisser un texte au choix en dur. LEs classes logo h1 et logo h2 étants définies pourquoi se priver.

Nous obtenons donc un fichier /elements/header.php comme suit:

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"> <html lang="en"> <head> <!-- Design by Free CSS Templates http://www.freecsstemplates.org Released for free under a Creative Commons Attribution 2.5 License --> <!-- Site Header Content //--> <style type="text/css">@import "<?php echo $this->getStyleSheet('main.css')?>";</style> <style type="text/css">@import "<?php echo $this->getStyleSheet('typography.css')?>";</style> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <?php Loader::element('header_required'); ?> </head> <body> <div id="header"> <div id="logo"> <?php if ($c->isEditMode()) { ?> <div style="min-height: 80px"> <?php } ?> <?php $a = new Area('Header Nav'); $a->display($c); ?> <h1><a href="<?php echo DIR_REL?>/"><?php echo SITE?></a></h1> <h2> <?php $a = new Area('Slogan'); $a->display($c); ?> </h2> <?php if ($c->isEditMode()) { ?> </div> <?php } ?> </div> </div> <div id="wrapper"> 

Vous remarquerez que nous gardons la définition de hauteur minimum en mode édition. En effet nous définirons l'emplacement de la navigation avec des valeurs absolues. Cette définition est donc nécessaire pour ne pas tout déformer en mode édition.

L'insertion est brute pour le moment nous affinerons le CSS plus tard. A l'oeil.

          Concernant le footer nous jaoutons les lignes de copyright et le lien d'entrée en mode édition. Sans pour autant enlever les copyrights des auteurs originels du thème !! 

Ce qui nous donne un fichier /elements/footer.php :

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?> </div> <div id="footer"> <hr /> <p id="links">© <?php echo date('Y')?> <a href="<?php echo DIR_REL?>/"><?php echo SITE?></a>.  |  <?php echo t('All rights reserved.')?>  |  <a href="<?php echo $this->url('/login')?>"><?php echo t('Sign In to Edit this Site')?></a></p> <p id="legal">Copyright © 2007 Entomology. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p> </div> <?php require(DIR_FILES_ELEMENTS_CORE . '/footer_required.php'); ?> </body> </html> 

Arrivé à ce stade nous avons une base utilisable. Nous allons remplir, sans précautions, les fichiers full.php, default.php, et view.php pour pouvoir tester notre template et affiner tout ça de visu. 

Pour le moment le fichier default.php sera le même nous inverserons la colonne de gauche à droite plus tard. Nous y copions donc simplement le contenu de left_sidebar.

Pour full.php nous éliminons la colonne:

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); $this->inc('elements/header.php'); ?> <div id="content"> <?php $a = new Area('Main'); $a->display($c); ?> </div> <div style="height: 1px; clear: both;"></div> <?php $this->inc('elements/footer.php'); ?> 

idem pour view.php avec son contenu spécial:

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); $this->inc('elements/header.php'); ?> <div id="content"> <?php print $innerContent; ?> </div> <div style="height: 1px; clear: both;"></div> <?php $this->inc('elements/footer.php'); ?> 

          Le résultat sera loin d'être bon, mais nous créerons les classes nécessaires à l'obtention d'un affichage convenable plus tard.

Avant des tester notre ébauche de thème il nous faut remplir le fichier description.txt avec par exemple:

Entomology theme adapted from freeCSS template one by me. 

Voilà nous allons pouvoir tester ça en local et rendre le tout présentable. Le gros du travail va maintenant se situer sur les fichiers CSS. Quelques modifs seront faites sur les .php mais uniquement pour y incorporer nos classes.

Etape 4: Mise en forme.

          A partir d'ici nous allons pouvoir poser nos haches et passer aux choses plus subtiles.

A suivre .....