Nous avons vu que nous pouvons obtenir un nouveau template en lui attribuant une feuille de style personnelle mais la politique actuelle est à l'économie d'énergie. Lol !
Et si nous regroupions les informations d'affichage dans la feuille de style principale ?
Nous n'aurions plus que header.php et static.php à dupliquer puisque grâce aux "classes de styles" en .css nous pouvons obtenir à peu prés tout ce que nous voulons.
A ce propos, je sais que "le débutant" peut être un peu perdu avec ces histoires de feuilles de styles, classes et autres mises en forme et je lui recommande chaudement d'en apprendre un petit peu parce que cela va lui être bien utile.
Je viens de me procurer un bouquin écrit par un aficionado de Pluxml (un dénommé Francis) et c’est cette nuit que j'ai appris la manip pour arriver au résultat que je vais vous décrire dans cet article. Allez voir là. ;)
Pour en revenir à nos moutons, sachons que le style de notre template est appelé dans header.php par un truc comme cela.
<header role="banner">
<div class="content">
<div id="header-title">
<?php $plxShow->mainTitle('link'); ?>
</div>
<p>
<?php $plxShow->subTitle(); ?>
</p>
</div>
... où <div id="header-title"> est le nom du <div> et <div class="content"> la classe qui gère les affichages concernant ce <div> particulier.
Et si nous intégrions dans notre feuille de style une classe supplémentaire que nous appliquerions à nos propres templates ?.
Comme un exemple est la meilleure pédagogie, nous allons aller voir ou revoir les explication pour avoir un look différent et où il vous était recommandé, pour faire un autre template, de dupliquer les fichiers originaux ce qui n’est pas une mauvaise méthode mais il y a mieux. ;)
Disons-le tout de suite, ces enseignements sont facilement accessibles aux débutants mais il y a bien mieux et sans doute plus simple.<div class="content-modele">
<link rel="stylesheet" href="https://tuto-pluxml.reseauk.info/<?php $plxShow->template(); ?>/style-modele.css" media="screen"/>
...et les lignes....
header .content {
background: url('img/header.jpg') no-repeat top left;
background-position: 25px 0;
height:170px;
}
Juste en dessous, renseignons la même chose mais avec le nom de notre nouvelle image d'en-tête.
header .content {
background: url('img/mon-image.jpg') no-repeat top left;
background-position: 25px 0;
height:170px;
}
Il ne reste plus qu'à aller dans static-modele.php changer l'appel au header.php par celui créé pour la circonstance.
<?php include(dirname(__FILE__) . '/header-modele.php'); ?>
Hé bien, il ne nous reste plus qu'à aller faire une nouvelle page, lui donner static-modele.php comme template et admirer notre oeuvre mais ça, si vous avez suivi les différents tuto de ce site, vous savez déjà faire. ;)
