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 :
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.
Cherchez ce bout de code :
- Code: Tout sélectionner
<div class="forabg">
Juste après, vous trouverez cette ligne
- Code: Tout sélectionner
<div class="inner"><span class="corners-top"><span></span></span>
que vous devrez remplacer par
- Code: Tout sélectionner
<div class="top">
<div class="tl"> </div>
<div class="tr"> </div>
<div class="tm"> </div>
</div>
<div class="ml">
<div class="mr">
<div class="mm">
Ensuite, cherchez ce bout de code :
- Code: Tout sélectionner
<!-- IF forumrow.S_LAST_ROW -->
</ul>
Juste après, vous trouver cette ligne
- Code: Tout sélectionner
<span class="corners-bottom"><span></span></span></div>
que vous devrez remplacer par
- Code: Tout sélectionner
</div>
</div>
</div>
<div class="bottom">
<div class="bl"> </div>
<div class="br"> </div>
<div class="bm"> </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 :
- Code: Tout sélectionner
.forabg {
background-color: #0076b1;
background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}
Mettez-le entre commentaires, comme ceci :
- Code: Tout sélectionner
/*
.forabg {
background-color: #0076b1;
background-image: url("{T_THEME_PATH}/images/bg_list.gif");
}
*/
Ensuite, cherchez
- Code: Tout sélectionner
.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
- Code: Tout sélectionner
/*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/content.css puis placez ce code au tout début, juste après le premier commentaire :
- Code: Tout sélectionner
/**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
).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
- Code: Tout sélectionner
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
- Code: Tout sélectionner
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 :
- Code: Tout sélectionner
.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 :
- Code: Tout sélectionner
.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>
- Code: Tout sélectionner
<!--[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 :
- Code: Tout sélectionner
* 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.
Flux RSS
