Ishimaru-Design

Avertissement : J'ai testé les modifications du mieux que j'ai pu, mais je ne peux garantir la compatibilité totale avec Internet Explorer, étant sous Linux.  Les testeurs sont les bienvenus !

vous voulez faire la même chose que sur certains forums prosilver utilisant les bordures comme celui-ci, mais avec subsilveer2 ?

Je vais vous monter dans ce tuto à en mettre, de plusieurs façons selon le contexte.

Note : Ce tuto a été testé sur un forum phpBB 3.0.8 non modifié utilisant un style subsilver2

Sommaire

1. [*]Préparation
   
2. [*]Installation - forum à largeur fixe avec images opaques
   
3. [*]Installation - forum à largeur fixe avec images transparentes
   
4. [*]Installation - forum à largeur fixe ou fluide avec images opaques
   
5. [*]Installation - forum à largeur fixe ou fluide avec images transparentes

Entre les points 2, 3 et 4, vous n'avez qu'à choisir celui qui correspond le mieux à votre contexte.

Pour chaque cas, vous aurez un pack disponible que vous pouvez télécharger pour la démonstration, mais vous pouvez choisir d'utiliser vos propres bordures, en adaptant les valeurs CSS données dans le tuto.


Préparation

Voici comment se présente subsilver2 par défaut :


Pour le préparer pour ajouter des bordures, nous devrons tout d'abord enlever le dégradé du header, puisque celui-ci s'intègrera très mal aux bordures.

Pour cela, ouvrez subsilver2/theme/stylesheet.css et cherchez ceci :
#logodesc {
   background-color: #C1CAD2;
   background-image: url('./images/background.gif');
   background-repeat: repeat-x;
   background-position: center bottom;
   padding: 0 25px 15px 25px;
}

Supprimez ou commentez ces lignes :
   background-color: #C1CAD2;
   background-image: url('./images/background.gif');
   background-repeat: repeat-x;
   background-position: center bottom;

Regardons notre style maintenant :


Déjà, on n'a plus ce dégradé, sauf bien sûr pour le logo, mais je me doute bien que vous voudrez le changer de toutes façons.

Maintenant, passons à la couleur de fond : Nous voulons définir le fond de page d'une autre couleur, tout en gardant le blanc dans la partie interne de la page.

Pour cela, toujours dans subsilver2/theme/stylesheet.css, cherchez ceci :
body {
   /* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
   font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
   color: #323D4F;
   background-color: #FFFFFF;
   font-size: 62.5%; /* This sets the default font size to be equivalent to 10px */
   margin: 0;
}

Remplacer la valeur hexadécimale de cette ligne :
   background-color: #FFFFFF;

Puisque subsilver2 n'a pas de bloc global, on fera le reste des modifications au moment de mettre en place le code XHTML des bordures.

Voilà le résultat pour le moment :


À partir de maintenant, choisissez la méthode correspondant à votre situation.  Dans tous les cas, vous devrez modifier les fichiers subsilver2/template/overall_header.html et subsilver2/template/overall_footer.html


Largeur fixe, images opaques

Pour l'exemple, j'ai divisé mon cadre en trois morceaux : le haut, le milieu et le bas.  Les trois morceaux font 950px de largeur, mais milieu ne fait qu'un pixel de hauteur puisqu'il sera répété verticalement.  Puisque notre cadre est opaque, ça ne dérange pas qu'ils se chevauchent et dans ce cas, on va simplement utiliser un <div> global pour le morceau du centre, ainsi que #wrapheader et #wrapfooter pour le haut et le bas

Télécharger les images de démo

Ouvrez subsilver2/template/overall_header.html et cherchez ceci :
<div id="wrapheader">

Juste avant, ajoutez
<div id="global">

Ensuite, ouvrez subsilver2/template/overall_footer.html et cherchez ceci :
</body>
</html>

Juste avant, ajoutez :
</div>

Passons maintenant au CSS !  Pour cela, retournez dans votre fichier subsilver2/theme/stylesheet.css et cherchez :
#wrapheader {
   height: auto !important;
   padding: 0;
}

#wrapcentre {
   margin: 15px 25px 0 25px;
}

#wrapfooter {
   text-align: center;
   clear: both;
}

Remplacez par :
#global {
   width:950px;
   margin: 0 auto;
   background: transparent url("images/cadre-centre.gif") repeat-y top center;
}

#wrapheader {
   height: auto !important;
   padding: 25px 0 0;
   background: transparent url("images/cadre-haut.gif") no-repeat top center;
}

#wrapcentre {
   margin: 15px 25px 0 25px;
}

#wrapfooter {
   text-align: center;
   clear: both;
   padding:0 0 25px;
   background: transparent url("images/cadre-bas.gif") no-repeat bottom center;
}
N'oubliez pas de définir la couleur de fond de l'élément body, soit #dddddf si vous utilisez le pack téléchargé, pour aller avec les bordures.

Et voilà le résultat !



Largeur fixe, images transparentes

Si vous devez utiliser des images avec des parties transparentes, comme c'est le cas des bordures Vista, le chevauchement n'est pas possible dans ce cas.  Pour cela, on va devoir utiliser un jeu de trois <div> non imbriqués, le deuxième <div> étant celui qui contient l'ensemble de la page.

Télécharger les images de démo

Pour cela, ouvrez subsilver2/template/overall_header.html et cherchez ceci :
<div id="wrapheader">

Juste avant, ajoutez :
<div id="global_top"></div>
<div id="global">

Ouvrez ensuite subsilver2/template/overall_footer.html et cherchez ceci :
</body>
</html>

Juste avant, ajoutez ceci :
</div>
<div id="global_bottom"></div>

Passons maintenant au CSS !  Retournez à votre fichier subsilver2/theme/stylesheet.css et cherchez ceci :
#wrapheader {
   height: auto !important;
   padding: 0;
}

#wrapcentre {
   margin: 15px 25px 0 25px;
}

#wrapfooter {
   text-align: center;
   clear: both;
}

Remplacez par
#global_top {
      height:18px;
      width: 950px;
      margin: 0 auto;
      background: transparent url("images/top.png") no-repeat top center;
}
#global {
      width:950px;
      margin: 0 auto;
      background: transparent url("images/center.png") repeat-y top center;
}
#global_bottom {
      height:18px;
      width:950px;
      margin: 0 auto;
      background: transparent url("images/bottom.png") no-repeat bottom center;
}

#wrapheader {
   height: auto !important;
   padding: 5px 0 0;
}

#wrapcentre {
   margin: 15px 25px 0 25px;
}

#wrapfooter {
   text-align: center;
   clear: both;
   padding:0 0 5px;
}
Adaptez les valeurs en fonction de vos bordures.

Et voilà le résultat :

(testé avec la couleur #aaaaaf pour l'élément body)


Largeur fixe ou fluide, images opaques

Si au lieu d'utiliser un cadre en 3 morceaux, vous voulez en un en 8 morceaux qui peut s'utiliser sur une page à largeur fluide, cette partie est à suivre si vos images sont opaques.  Tout comme pour la partie pour les largeurs fixes avec images opaques, on va utiliser les imbrications de blocs, en utilisant deux <div> globaux imbriqués, et en imbriquant deux <div> à l'intérieur de #wrapheader et #wrapfooter, question d'optimiser le code.

Télécharger les images de démo

Commencez par ouvrir subsilver2/template/overall_header.html et cherchez ceci :
<div id="wrapheader">

Remplacez par :
<div id="global_right">
<div id="global_left">
<div id="wrapheader">
<div id="wrapheader_right">
<div id="wrapheader_left">

Cherchez ensuite :
   <div id="datebar">
       <table width="100%" cellspacing="0">
       <tr>
           <td class="gensmall"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ENDIF --></td>
           <td class="gensmall" align="{S_CONTENT_FLOW_END}">{CURRENT_TIME}<br /></td>
       </tr>
       </table>
   </div>

Juste après, ajoutez
</div>
</div>

Ouvrez ensuite subsilver2/template/overall_footer.html et cherchez ceci :
<div id="wrapfooter">
   <!-- IF U_ACP --><span class="gensmall">[ <a href="{U_ACP}">{L_ACP}</a> ]</span><br /><br /><!-- ENDIF -->
   <span class="copyright">Powered by <a href="http://www.phpbb.com/">phpBB</a> &copy; 2000, 2002, 2005, 2007 phpBB Group
   <!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
   <!-- IF DEBUG_OUTPUT --><br /><bdo dir="ltr">[ {DEBUG_OUTPUT} ]</bdo><!-- ENDIF --></span>
</div>

Remplacez par :
<div id="wrapfooter">
<div id="wrapfooter_right">
<div id="wrapfooter_left">
   <!-- IF U_ACP --><span class="gensmall">[ <a href="{U_ACP}">{L_ACP}</a> ]</span><br /><br /><!-- ENDIF -->
   <span class="copyright">Powered by <a href="http://www.phpbb.com/">phpBB</a> &copy; 2000, 2002, 2005, 2007 phpBB Group
   <!-- IF TRANSLATION_INFO --><br />{TRANSLATION_INFO}<!-- ENDIF -->
   <!-- IF DEBUG_OUTPUT --><br /><bdo dir="ltr">[ {DEBUG_OUTPUT} ]</bdo><!-- ENDIF --></span>
</div>
</div>
</div>

</div>
</div>

Passons maintenant au CSS !  Retournez à votre fichier subsilver2/theme/stylesheet.css et cherchez ceci :
#wrapheader {
   height: auto !important;
   padding: 0;
}

#wrapcentre {
   margin: 15px 25px 0 25px;
}

#wrapfooter {
   text-align: center;
   clear: both;
}


Remplacez par :
#global_right {
      width: 90%;
      min-width:700px; /*Doesn't work under IE6*/
      max-width:1100px; /*Doesn't work under IE6*/
   margin:0 auto;
      background:#ffffff url("images/cadre-mr.gif") repeat-y top right;
}
#global_left {
      background: transparent url("images/cadre-ml.gif") repeat-y top left;
}

#wrapheader {
  height: auto !important;
  padding:0;
      background: transparent url("images/cadre-tm.gif") repeat-x top center;
}
#wrapheader_right {
      background: transparent url("images/cadre-tr.gif") no-repeat top right;
}
#wrapheader_left {
      background: transparent url("images/cadre-tl.gif") no-repeat top left;
   padding:25px 0 0;
}

#wrapcentre {
  margin: 15px 25px 0 25px;
}

#wrapfooter {
  text-align: center;
  clear: both;
      background: transparent url("images/cadre-bm.gif") repeat-x bottom left;
}
#wrapfooter_right {
      background: transparent url("images/cadre-br.gif") no-repeat bottom right;
}
#wrapfooter_left {
      background: transparent url("images/cadre-bl.gif") no-repeat bottom left;
   padding:0 0 25px;
}
N'oubliez pas de définir la couleur de fond de l'élément body, soit #dddddf si vous utilisez le pack téléchargé, pour aller avec les bordures.
Adaptez les valeurs pour correspondre avec vos bordures et la largeur voulue.

Et voilà le résultat :



Largeur fixe ou fluides, images transparentes

Si votre bordure est transparente et coupée en 8 morceaux, suivez cette partie.  Dans ce cas, tout comme pour la variation fixe avec images transparentes, le chevauchement n'est pas possible.  Pour l'occasion, je vais me baser sur le tutoriel des cadres Aero, en l'adaptant pour les contours d'une page subsilver2.  En gros, on reprends ce schéma :


Télécharger les images de démo

Commencez par ouvrir subsilver2/template/overall_header.html et cherchez ceci :
<div id="wrapheader">

Juste avant, ajoutez :
<div id="global">
<div id="global_top">
   <div id="global_tl"></div>
   <div id="global_tr"></div>
   <div id="global_tm"></div>
</div>
<div id="global_right">
   <div id="global_left">
       <div id="global_middle">

Ouvrez ensuite subsilver2/template/overall_footer.html et cherchez ceci :
</body>
</html">

Juste avant, ajoutez ceci :
       </div>
   </div>
</div>
<div id="global_bottom">
   <div id="global_bl"></div>
   <div id="global_br"></div>
   <div id="global_bm"></div>
</div>
</div>

Passons maintenant au CSS !  Retournez à votre fichier subsilver2/theme/stylesheet.css et cherchez ceci :
#wrapheader {
   height: auto !important;
   padding: 0;
}

Juste avant, ajoutez :
#global {
      width:90%;
      min-width:700px; /*Doesn't work under IE6*/
      max-width:1100px; /*Doesn't work under IE6*/
   margin: 0 auto;
}
#global_top{
      margin: 0px;
      height: 18px;
      padding: 0px;
}
#global_tl{
      background: transparent url("images/tl.png") no-repeat top left;
      float: left;
      width: 18px;
      height: 18px;
      margin: 0px;
}
#global_tm{
      background: transparent url("images/tm.png") repeat-x top center;
      margin: 0px 18px;
      height: 18px;
}
#global_tr{
      background: transparent url("images/tr.png") no-repeat top right;
      float: right;
      width: 18px;
      height: 18px;
      margin: 0px;
}

#global_left{
      background: transparent url("images/ml.png") repeat-y top left;
      padding-left: 18px;
      margin: 0px;
}
#global_right{
      background: transparent url("images/mr.png") repeat-y top right;
      padding-right: 18px;
      margin: 0px;
}
#global_middle{
      margin: 0px;
      background-color:#ffffff;
}

#global_bl{
      background: transparent url("images/bl.png") no-repeat bottom left;
      float: left;
      width: 18px;
      height: 18px;
      margin: 0px;
}
#global_bm{
      background: transparent url("images/bm.png") repeat-x bottom center;
      margin: 0px 18px;
      height: 18px;
}
#global_br{
      background: transparent url("images/br.png") no-repeat bottom right;
      float: right;
      width: 18px;
      height: 18px;
      margin: 0px;
}

/*CSS Hacks for IE6*/
* html #global_tl{ margin: 0 -3px 0px -2px; }
* html #global_tm{ margin: 0px; }
* html #global_tr{ margin: 0 -4px 0px -3px; }

* html #global_left{ margin: 0 -2px 0 -2px; }
* html #global_middle{ margin: 0px; }
* html #global_right{ margin: 0 -1px 0px -3px; }

* html #global_bl{ margin: 0 -3px 0px -1px; }
* html #global_bm{ margin: 0px; }
* html #global_br{ margin: 0 -2px 0px -3px; }

Cherchez ensuite ceci :
#wrapcentre {
   margin: 15px 25px 0 25px;
}

Remplacez par
#wrapcentre {
   margin: 15px 5px 0 5px;
}

Cherchez :
#wrapfooter {
   text-align: center;
   clear: both;
}

Remplacez par
#wrapfooter {
   text-align: center;
   clear: both;
       padding:0 5px 5px;
}

Puis cherchez finalement :
#logodesc {
/*    background-color: #C1CAD2;
   background-image: url('./images/background.gif');
   background-repeat: repeat-x;
   background-position: center bottom;*/
   padding: 0 25px 15px 25px;
}

#menubar {
   margin: 0 25px;
}

#datebar {
   margin: 10px 25px 0 25px;
}

Remplacez par
#logodesc {
/*    background-color: #C1CAD2;
   background-image: url('./images/background.gif');
   background-repeat: repeat-x;
   background-position: center bottom;*/
   padding: 0 5px 15px 5px;
}

#menubar {
   margin: 0 5px;
}

#datebar {
   margin: 10px 5px 0 5px;
}

Ce qui donne comme résultat :

(testé avec un fond #aaaaaf pour l'élément body)


Voilà, le tutoriel est terminé !