Économiser les feuilles de style

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. ;)

Nous allons intégrer dans notre feuille de style principale les différentes informations dont nous aurons besoin pour afficher nos variantes que nous appellerons  en fonction de notre besoin.
 
Disons-le tout de suite, ces enseignements sont facilement accessibles aux débutants mais il y a bien mieux et sans doute plus simple.
Ces tutoriels n'ont d'autre but que de vous familiariser avec tout ça et vous apprendre au passage ce que vous ne savez pas. 
 
N'oubliez jamais que c’est, comme vous, un Nul qui vous parle. ;)
 
Pour commencer, nous allons, afin de ne pas bousiller notre feuille de style principale, travailler sur une copie en dupliquant style.php et en nommant cette copie  style-modele.php.
 
Commençons par mettre dans notre répertoire theme/defaut/img l'image qui s'affichera sur notre page spéciale. Par commodité, nous l’appellerons ici mon-image.jpg
 
Sachant que nous aurons besoin d'un header particulier pour ce nouveau modèle, dupliquons aussi header.php et nommons-le header-modele.php.
Idem pour une static et nous aurons static-modele.php.
 
Maintenant, ouvrons header-modele.php  modifions la classe en....
<div class="content-modele">
Et l'appel à la feuille de style en...
<link rel="stylesheet" href="<?php $plxShow->template(); ?>/style-modele.css" media="screen"/>
Ouvrons static-modele.css, repérons la rubrique...
 
/* ---------- HEADER ---------- */

...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. ;)

Ce qui est nouveau, c'est que plutôt que fabriquer une feuille de style par template, nous renseignons toutes nos infos dans la même.

Je vous recommande de n'utiliser style-modele.css que pour les templates "maison" et de réserver l'original (style.css) pour les pages que vous ne désirez pas modifier.
 
Toutes les autres "tranformations" se feront avec ce principe et cela est valable pour les pages du blog qui fonctionnent elles avec article.php.
 
Nous utiliserons cette technique pour avoir différentes sidebar ou autres pieds de pages spécifiques aux pages que vous voulez afficher.

Retour tutoriel Pluxml

 

 

 

Écrire un commentaire

Quelle est la première lettre du mot lzkm ? :