Artiphp - CMS open source et gratuit

Les feuilles de style (css)

14/11/2009 - Lu 3075 fois
  • Note moyenne : 2.23/5
  • 1
  • 2
  • 3
  • 4
  • 5

Note moyenne : 2.2/5 (39 notes)

Les feuilles de style vont vous permettre de mettre en forme vos pages. Couleur, choix et taille des polices de caractère, emplacement de tel ou tel élément, etc...

Si vous connaissez un traitement de texte, vous savez ce qu'est une feuille de style. Le principe est simple : plutôt que d'appliquer un style (police, couleur, taille,...) à chaque phrase, à chaque mot que l'on saisit ou récupère de la base de données, on définit des styles génériques pour tout le document et l'on applique ces styles aux parties du document visées.

Les avantages des feuilles de style

Lisibilité du paramétrage se trouve rassemblé au même endroit

Evolutivité (on change un style, la modification s'applique alors à tous les contenus auxquels il est rattaché). On modifie facilement les styles par défaut proposés par Artiphp. D'autre part, les feuilles de style permettent de positionner, très précisément, un élément au pixel près dans une page.

Les feuilles de style par défaut d'Artiphp

special_skin.css : c'est la feuille de style de votre design général. Elle est spécifique à chaque template. Elle place les éléments qui se retrouvent sur toutes les pages. Cette feuille de style est une pure création de votre part.

general.css : c'est la feuille de style du système. Elle gére les éléments dynamiques "fabriqués" par Artiphp qui se trouvent sur toutes les pages et la page d'accueil. (ex.: les x derniers dossiers, les x dernières news, le formulaire de zone d'administration, le copyright...).

Les css spécifiques de chaque module installé : A chaque installation d'un module, une feuille de style lui est associé. Cela vous permet de modifier et personnaliser l'aspect graphique de chaque module. Cette feuille de style ne s'affichera que pour le module dont elle dépend.

Arborescence des feuilles de style

La lecture des feuilles de style, par votre navigateur Internet ce fait dans l'ordre suivant :

» special_skin.css
» general.css
» css du module.

Si un élément de vos feuilles de style se retrouve dans les trois feuilles de style, l'affichage de cet élément se fera en fonction de la dernière feuille de style.

Noms des classes et id

Chaque module a un "id" principal qui entoure tous les autres styles. Le nom de cet id est composé de la manière suivante : mod_(nom_du_module).

Les noms des classes sont conçues de façon descriptive et systématique : "titre" concerne la mise en page de la partie titre d'un module, "commentaires" le block commentaire, etc... Cela permet d'avoir d'emblée une idée sur l'endroit où il faut chercher quand on veut trouver la classe d'un élément.

De plus, pour faciliter la production de vos feuilles de style, la plupart des modules utilisent les même classes.

Les feuilles de style ont été commenté, afin que vous puissiez rapidement retrouver quelles styles pour quelles pages du module.

Créer et/ou modifier les feuilles de style avec Firefox et Webdevelopper

Modifier les feuilles de style d'Artiphp avec l'extension web developper de Firefox.
Cette barre d'outil conjuguée à ce navigateur va vous permettre de :

- visualiser et éditer directement les css de vos pages,
- visualiser les feuilles de style et les lignes de code concernées lorsque vous pointez ou surlignez une partie de la page que vous voulez analyser.

Pour personnaliser vos feuilles de style, vous avez deux possibilités si vous n'êtes pas totalement à l'aise avec les css de base

- vous repartez des feuilles de base et vous modifiez en fonction de ce que vous voulez obtenir ;
- sinon vous repartez "de zéro" c'est à dire que vous recréez des feuilles de style selon vos besoins. Si ceux-ci sont très basiques ce peut être une très bonne solution car vous maîtriserez votre code et le simplifirez.
C'est aussi beaucoup une affaire de préférence, cependant, modifier l'existant est peut-être le plus simple si vous débutez totalement.

Commençons par ouvrir la page que nous voulons modifier. (ici, la page catégorie du module dossier).

Affichage des class et id

Pour repérer les css, affichez tout d'abord les informations d'ID et de class, via la barre d'outils, menu Information.




Firefox réaffiche aussitôt votre page avec des petits boites de dialogue vertes (pour les id) et rouges (pour les class) avec le nom de chaque élément de votre feuille de style.

Editez votre feuille de styles

Maintenant que nous connaissons les noms et emplacements des variables de css, nous allons pouvoir les éditer en ligne.
Sélectionner l'onglet "CSS" et cliquez sur "Editer les css".



Vous optiendrez alors les contenus des feuilles de styles utilisées sur la page. Comme nous travaillons sur le module dossier, sélectionner l'onglet dossier.css.

Vous allez alors pouvoir modifier les styles et les changements effectués seront automatiquement répercutés sur la page.
N'ayez aucune crainte, ces modifications n'existent pas réellement, et vos visiteurs ne verront rien de vos essais.

Exemple de changement de css

Modification de la couleur du texte descriptif des catégories (module dossiers).
On repère le nom de la class du texte à la fois dans la page et dans l'editeur (dans l'exemple :  .catphp_texte),



On modifie la couleur dans l'editeur (ici on ajoute l'attribut couleur), et automatiquement, la couleur change dans la page.


 

Enregistrez les modifications

Une fois que vous avez obtenu le résultat voulu, nous allons les enregistrer. Deux solutions sont possibles :

1 - Copier/coller
Sélectionnez et copier les styles se trouvant dans l'editeur css
Ouvrez avec le bloc notes la véritable css de votre site qui se trouve dans le répertoire templates/temp/nom_de_votre_css.css
Et collez le nouveau contenu.

2 - Enregistrement
L'éditeur css de web developper vous permet d'enregistrer directement votre feuille de style.
Cliquez sur le bouton Sauver, puis allez dans le répertoire où se trouve vos css : templates/temp/ puis remplacez en n'écrasant votre ancienne feuille de styles.

Les Commentaires

Aucun commentaire
Partager cet article wikio : Partager cet article | digg : Partager cet article | del.icio.us : Partager cet article | facebook : Partager cet article | scoopeo : Partager cet article | blogmarks : Partager cet article | addicious : Partager cet article |
Partager les derniers articles Netvibes : Partager les derniers articles | iGoogle : Partager les derniers articles | My Yahoo : Partager les derniers articles | wikio : Partager les derniers articles | RSS : Partager les derniers articles |
Article précédent : Les fichiers htmlArticle suivant : Gestion des modules
Saisissez votre recherche
Centre de documentation et d'apprentissage
zone membres
Les sites sous Artiphp