É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

 

 

 

8 commentaires

#1 vendredi 15 décembre 2017 @ 10:16 set alarm to 3 a.m a dit :

Undeniably believe that that you said. Your favourite reason seemed to be at the internet the
simplest thing to consider of. I say to you, I certainly get irked at the same time as other
people think about concerns that they just do not recognise about.
You controlled to hit the nail upon the top and also defined out the whole thing without having side effect ,
people could take a signal. Will likely be back to get more.
Thank you

#2 vendredi 22 décembre 2017 @ 07:22 Jane a dit :

This is really fascinating, You're an excessively skilled blogger.
I've joined your rss feed and look ahead to looking for more of your wonderful post.
Also, I've shared your site in my social networks

#3 vendredi 22 décembre 2017 @ 18:55 set alarm fitbit hr a dit :

When some one searches for his vital thing, therefore
he/she wants to be available that in detail, so that thing is maintained over here.

#4 dimanche 24 décembre 2017 @ 09:38 http://wksyll.com/story3653908/alarm-no-further-a-mystery a dit :

It's an awesome article for all the online visitors; they will take benefit from it I am sure.

#5 mardi 26 décembre 2017 @ 18:21 set alarm clock 30 minutes a dit :

It's very easy to find out any topic on web as compared to textbooks, as I
found this article at this web page.

#6 mercredi 27 décembre 2017 @ 00:50 set alarm volume galaxy s8 a dit :

Definitely believe that which you stated. Your favorite justification seemed to be on the web
the simplest thing to be aware of. I say to you, I definitely get irked while people consider worries that they just do not know about.
You managed to hit the nail upon the top as well as defined
out the whole thing without having side effect ,
people could take a signal. Will probably be back to get more.
Thanks

#7 mercredi 27 décembre 2017 @ 18:41 set alarm htc one a dit :

Just want to say your article is as astounding. The clearness in your post is just spectacular and i could assume you're an expert on this subject.

Well with your permission allow me to grab your feed to
keep up to date with forthcoming post. Thanks a million and please
carry on the rewarding work.

#8 jeudi 28 décembre 2017 @ 14:50 online stopwatch egg timer a dit :

I go to see every day some web sites and information sites to read content, but this website
offers quality based content.

Écrire un commentaire

Quelle est la quatrième lettre du mot kogtl ? :