Ishimaru-Design

Avoir un cadre style Aero sous Prosilver

   Ce tutoriel fait suite à du support que j'ai apporté à un membre de phpBB-fr qui voulait adapter le style AeroBlue à Prosilver.
   La particularité des styles de la série Aero (disponibles sur phpbb3styles.net), c'est le cadrage fait en images PNG transparent, qui rappelle les effets de transparence de Windows Vista et qui entoure la liste des forums.  En raison de cette transparence, l'imbrication d'élément (x)HTML n'est donc pas possible et il faudra donc les placer côte à côte.

   Je vais donc vous montrer à le faire, afin d'arriver à un résultat sans chevauchement, comme ceci :
   [thumb=122,190]http://ftp.phpbb-fr.com/public/ressources/tutos/aero.jpg[/thumb]

   Préparer les images

   Que ce soit un cadre pris dans un style Aero ou un cadre que vous avez fait vous-mêmes et découpé en huit morceaux, vous devez d'abord les envoyer dans le dossier styles/votre_style/theme/images/.  Prévoyez également un fond, noir glossy de préférence, pour l'en-tête des forums (nom du forum - messages - posts - derniers messages).  On peut prendre pour l'exemple, le fond cellpic1.gif du même thème Aero.

   Pour la suite, je vais utiliser ces noms d'images pour identifier les morceaux, ainsi que les classes qui auront le morceau associé comme fond :

   

• [*]tl.png : Supérieur gauche
     
• [*]tm.png : Supérieur central
     
• [*]tr.png : Supérieur droit
     
• [*]ml.png : Milieu gauche
     
• [*]mr.png : Milieu droit
     
• [*]bl.png : Inférieur gauche
     
• [*]bm.png : Inférieur central
     
• [*]br.png : Inférieur droit

   Maintenant, on va préparer nos blocs qui contiendront nos fonds.

   Afin de mieux vous montrer la structure qu'on va utiliser, rien de mieux qu'un schéma
   

   Ainsi, le haut et le bas de notre cadre seront chacun composés d'un div conteneur avec chacun trois div placés côte à côte, tandis que la partie du milieu contiendra trois éléments imbriqués les uns dans les autres, le plus imbriqué étant notre liste de forums.

   On va donc commencer par la partie XHTML et ensuite, on attaque le CSS.

   Partie XHTML

   Ouvrez votre fichier styles/votre_style/template/forumlist_body.html.

   Au début du fichier
   cherchez
   <span class="corners-bottom"><span></span></span></div>
   remplacez par
          </div>
            </div>
            </div>
            <div class="bottom">
               <div class="bl">&nbsp;</div>
               <div class="br">&nbsp;</div>
               <div class="bm">&nbsp;</div>
            </div>
         </div>

   Plus bas cherchez ce bout de code :

         <div class="forabg">

   Juste après, vous trouverez cette ligne
            <div class="inner"><span class="corners-top"><span></span></span>

   que vous devrez remplacer par
            <div class="top">
               <div class="tl">&nbsp;</div>
               <div class="tr">&nbsp;</div>
               <div class="tm">&nbsp;</div>
            </div>
            <div class="ml">
            <div class="mr">
            <div class="mm">

   Ensuite, cherchez ce bout de code :
      <!-- IF forumrow.S_LAST_ROW -->
            </ul>

   Juste après, vous trouver cette ligne
            <span class="corners-bottom"><span></span></span></div>

   que vous devrez remplacer par
            </div>
            </div>
            </div>
            <div class="bottom">
               <div class="bl">&nbsp;</div>
               <div class="br">&nbsp;</div>
               <div class="bm">&nbsp;</div>
            </div>

   On a maintenant fini avec la partie XHTML.  Pour que ça puisse s'afficher comme on veut, on passe maintenant au CSS !

   Partie CSS

   Ouvrez votre fichier styles/votre_style/theme/colours.css

   Cherchez ceci :
   .forabg {
      background-color: #0076b1;
      background-image: url("{T_THEME_PATH}/images/bg_list.gif");
   }

   Mettez-le entre commentaires, comme ceci :
   /*
   .forabg {
      background-color: #0076b1;
      background-image: url("{T_THEME_PATH}/images/bg_list.gif");
   }
   */

   Ensuite, cherchez

   .forumbg {
      background-color: #12A3EB;
      background-image: url("{T_THEME_PATH}/images/bg_header.gif");
   }
   (note : vous pouvez également le mettre en commentaires si vous voulez avoir les cadres aussi pour la liste de topics)

   Après, vous ajoutez
   
   /*Vista-like transparent images backgrounds*/
       .tl{   background-image: url("{T_THEME_PATH}/images/tl.png");}
       .tm{   background-image: url("{T_THEME_PATH}/images/tm.png");}
       .tr{   background-image: url("{T_THEME_PATH}/images/tr.png");}
       .ml{   background-image: url("{T_THEME_PATH}/images/ml.png");}
       .mr{   background-image: url("{T_THEME_PATH}/images/mr.png");}
       .bl{   background-image: url("{T_THEME_PATH}/images/bl.png");}
       .bm{   background-image: url("{T_THEME_PATH}/images/bm.png");}
       .br{   background-image: url("{T_THEME_PATH}/images/br.png");}

       li.header
       {
          background-image: url("{T_THEME_PATH}/images/cellpic1.gif"); /*Vista-like glossy header for the forumlist*/
       }

   Ouvrez ensuite styles/votre_style/theme/common.css
   cherchez
   .forabg {
      background: #b1b1b1 none repeat-x 0 0;
      margin-bottom: 4px;
      padding: 0 5px;
      clear: both;
   }
   remplacez par
   .forabg {
      background: none;
      margin-bottom: 4px;
      padding: 0 5px;
      clear: both;
   }

   Ouvrez ensuite styles/votre_style/theme/content.css puis placez ce code au tout début, juste après le premier commentaire :
   /**Vista-like frame around the forumlist**/
   /*Top part*/
   .top{
      margin: 0px;
      height: 18px;
      padding: 0px;
   }
   .tl{
      background: no-repeat top left;
      float: left;
      width: 18px;
      height: 18px;
      margin: 0px;
   }
   .tm{
      background: repeat-x top center;
      margin: 0px 18px;
      height: 18px;
   }
   .tr{
      background: no-repeat top right;
      float: right;
      width: 18px;
      height: 18px;
      margin: 0px;
   }

   /*Middle part*/
   .ml{
      background: repeat-y left;
      padding-left: 18px;
      margin: 0px;
   }
   .mr{
      background: repeat-y right;
      padding-right: 18px;
      margin: 0px;
   }
   .mm{
      margin: 0px;
   }

   /*Bottom part*/
   .bl{
      background: no-repeat bottom left;
      float: left;
      width: 18px;
      height: 18px;
      margin: 0px;
   }
   .bm{
      background: repeat-x bottom center;
      margin: 0px 18px;
      height: 18px;
      padding: 0px;
     
   }
   .br{
      background: no-repeat bottom right;
      float: right;
      width: 18px;
      height: 18px;
      margin: 0px;
   }

   Je vous donne une petite explication avant de continuer :
   Nos coins dans l'exemple font 18*18 de dimensions, donc il fallait mettre des dimensions à nos blocs pour prévenir tout bug d'affichage.  Ainsi, les blocs de la partie du haut et de la partie du bas ont une hauteur fixe, et nos coins ont aussi une largeur fixe.
   De plus, j'ai appliqué un flottant aux coins pour que les morceaux puissent être côte à côte et ensuite, pour éviter le chevauchement, j'ai mis une marge externe de 18 pixels aux deux morceaux du milieu.
   Quant au milieu, étant donné que j'ai imbriqué mes blocs, j'ai mis des padding (marges internes) en conséquence afin de pouvoir afficher les morceaux latéraux.
   Et pour couronner le tout, j'ai réinitialisé les marges externes et internes à zéro, là où il n'y en a pas besoin, afin de prévenir tout bug d'affichage (on sait jamais :lol:).

   Maintenant, on passe à un ajustement pour notre en-tête de la liste des forums, au niveau des marges internes.

   Toujours dans styles/votre_style/theme/content.css

   Vous cherchez
   li.header dl.icon {
      min-height: 0;
   }

   li.header dl.icon dt {
      /* Tweak for headers alignment when folder icon used */
      padding-left: 0;
      padding-right: 50px;
   }

   Vous remplacez par
   li.header dl.icon {
      min-height: 0;
      padding-top: 5px;
      padding-bottom: 2px;
   }

   li.header dl.icon dt {
      /* Tweak for headers alignment when folder icon used */
      padding-left: 5px;
      padding-right: 50px;
   }

   [MAJ] Suite à un problème signalé, j'ajoute un point concernant les div conteneurs où nos cadres s'y trouvent.  Il se trouve que je n'avais pas remarqué que ces blocs avaient des marges internes variant entre 5 et 10 pixels sur les côtés, ce qui cause un problème d'esthétique.  Je vous donne donc la modifications à faire, toujours dans content.css

   Cherchez par exemple #forabg (liste des forums), #forumbg (liste des sujets) et .navbar (les barres en haut et en bas :
   .navbar {
      background-color: #ebebeb;
      padding: 0 10px;
   }

   .forabg {
      background: #b1b1b1 none repeat-x 0 0;
      margin-bottom: 4px;
      padding: 0 5px;
      clear: both;
   }

   .forumbg {
      background: #ebebeb none repeat-x 0 0;
      margin-bottom: 4px;
      padding: 0 5px;
      clear: both;
   }

   Mettez les attributs padding à 0 :
   .navbar {
      background-color: #ebebeb;
      padding: 0;
   }

   .forabg {
      background: #b1b1b1 none repeat-x 0 0;
      margin-bottom: 4px;
      padding: 0;
      clear: both;
   }

   .forumbg {
      background: #ebebeb none repeat-x 0 0;
      margin-bottom: 4px;
      padding: 0;
      clear: both;
   }

   Voilà, c'est maintenant fini !  Il ne vous reste qu'à enregistrer vos modifications et à rafraîchir le tout dans votre panneau d'administration !

   Vous pouvez adapter ce code aux dimensions des morceaux de votre cadre s'il est différent, et vous pouvez l'adapter pour d'autres éléments de votre design, comme l'entête et les navbar.  Tous ces cadres ayant pas mal le même code pour faire les arrondis, vous appliquez simplement les mêmes changements que pour la liste des forums, au niveau du code XHTML, sans oublier de mettre les marges internes de conteneurs à zéro, là où vous mettez les cadres.

   Astuce bonus - Rendre les cadres compatibles IE6

   Si vous tenez absolument à ce que ces cadres soient compatibles avec Internet Explorer 6, qui ne supporte pas la transparence des PNG24, voici une astuce qui a été testée et mise en place par micka76 sur le thème Vistablue de Samourai, ainsi que des fixes CSS pour corriger le problème d'espaces entre les morceaux.

   Résultat avant le fix : Capture
   Résultat après le fix : Capture

   Téléchargez d'abord le script disponible ici

   Ensuite, décompressez-le (utilisez 7-zip si vous n'avez pas Winrar), puis déplacez le fichier .JS dans styles/votrestyle/template/.

   Ouvrez maintenant votre fichier style/votre_style/template/overall_header.html et insérez ce code entre les balises <head> et </head>

   <!--[if IE 6]>
   <script type="text/javascript" src="{T_TEMPLATE_PATH}/DD_belatedPNG.js"></script>
   <script type="text/javascript">DD_belatedPNG.fix('.tl, .tm, .tr, .ml, .bl, .bm, .br');</script>
   <![endif]-->

   Comme vous voyez, entre les deux parenthèses de la ligne 3, on y place les classes à traiter, en les séparant par des virgules.  Vous pouvez donc en mettre autant que vous voulez.

   Maintenant, passons aux problèmes d'espace.
   Ouvrez le fichier styles/votre_style/theme/tweaks.css et ajoutez ce code à la fin du fichier :
       * html .tl{ margin: 0 -3px 0px -2px; }
       * html .tm{ margin: 0px; }
       * html .tr{ margin: 0 -4px 0px -3px; }

       * html .ml{ margin: 0 -2px 0 -2px; }
       * html .mm{ margin: 0px; }
       * html .mr{ margin: 0 -1px 0px -3px; }

       * html .bl{ margin: 0 -3px 0px -1px; }
       * html .bm{ margin: 0px; }
       * html .br{ margin: 0 -2px 0px -3px; }

       * html ul.topiclist {
           margin-left: 3px;
          margin-right: -1px;
       }

   Maintenant, votre style est compatible même avec IE6 !

   Le tuto est maintenant terminé !

   Un merci spécial à Samourai et à micka76 pour les tests, remontées d'erreurs et les correctifs pour IE6.