Plume Power !
Par fabien le dimanche 25 septembre 2005, 18:15 - code zone - Lien permanent
Ou l'on cause de CMS, CSS, d'Antoine, de choses et d'autres. Mais surtout de la maquette d'un site en cours de test. De couleurs. De fenouil, carottes, et autres aubergines.
:)
J'ai quasiment fini le site la structure et la virtualisation (!) du web d'Antoine. La maquette - si je peux m'exprimer ainsi - est en ligne, et j'ai même fait un petit screenshot:
Pour faire ce site, j'ai utilisé un CMS nommé Plume. Ce logiciel fournit une interface web pour l'utilisateur, qui sert à poster des articles ou des brèves, sans se préoccuper de l'aspect code du problème: l'utilisateur remplit des cases (titre, description de l'article, contenu, ...), choisit dans quelle catégorie sera publié l'article, et en quelques "clics" l'article se retrouve publié.
Mais ceci suppose d'avoir au préalable établi une structure pour le site, et des gabarits pour chaque type de ressource (une ressource peut être un article, une brève, une page à part). J'ai donc réalisé pour Antoine l'ensemble de ces templates (gabarits en langue locale) grâce à la documentation de Plume, et en allant pêcher quelques infos sur leur forum. Le tout est codé en PHP.
Et puis j'ai réalisé les feuilles de style CSS, avec une couleur princpale par page. Le principe est simple, il faut appeler une feuille spécifique (par exemple style-bleu.css) qui appelle une feuille principale, et puis qui définit les couleurs spécifiques des éléments. Hum, je suis pas hyper clair. Un peu de code ...
Supposons qu'on s'intéresse à l'élément #footer, et que cet élément doit avoir une bordure dont la couleur varie en fonction de la page. On définit dans la CSS principale le comportement de cet élément:
#footer{
width:100%;
clear:both;
text-align:center;
font-size:1.1em;
letter-spacing: 0.2em;
font-weight:bold;
word-spacing: 0.3em;
border-style:solid;
border-width: 5px 0 0 0;
}
Avec ça, on a la largeur, le type de bordure, et la police. Maintenant, en fonction de la page, on appelle la CSS spécifique:
@import "principal.css"; /*ici, on appelle l'ensemble des propriétés communes à toutes les pages*/
#footer {
border-color: #2828a0;
}
Et voilà. Y'a plus qu'à mettre au point un petit script PHP qui détermine quelle est la catégorie de la page actuelle, pour savoir quelle feuille de style il faut charger.
Bon, encore quelques peaufinages liés à la présence massivement dominante sur le web d'un pseudo-browser (dont le nom commence par I, finit par 6, et comporte un E) incapable de rendre correctement une page web, et puis ce sera bon. Yapuka attendre l'ouverture du resto d'Antoine ...
Commentaires
Merci pour les explications sur la recette PHP. J'y comprends pas grand chose (bon, un peu quand même) mais je me sens moins con!
denis
Ouaip, en fait c'est plus une explication sur une bidouille CSS : à l'interieur d'une page CSS secondaire, tu en appelles une autre (principale).
Pour résumer: t'as un script PHP, qui te détermine dans quelle catégorie tu es. Ce qui (par correspondance habilement choisie) te donne une couleur. On va dire rouge.
Donc dans les headers de ta page, tu vas appeller style-rouge.css
Dans ce fichier, tout au début, tu appelles style.css, puis tu rajoutes tes définitions de couleur.
Au final, tu te retrouves avec les style principal (décrit par style.css) surchargé par les définitions que tu as mis dans style-rouge.css ...
Easy !