CSS - Conseils pour modifier une présentation CSS

La modification des CSS demande généralement des compétences avancées dans ce domaine. Toutefois, il est possible d'intervenir sur le code CSS sans être forcément un webmaster chevronné.

Voici quelques astuces pour vous aider à personnaliser vos présentations CSS :
 
 1) Méthodologie

Allez dans le menu [Site\Présentation] et cliquez sur [Gérer les présentation personnalisées].
Nous vous conseillons de sauvegarder régulièrement des copies de votre travail en cliquant sur [Visualiser les Propriétés] puis sur [Dupliquer] pour générer une copie de la présentation. En effet, la modification des présentations CSS peut s'avérer quelquefois assez délicate et la simple suppression d'une ligne ou la modification d'un paramètre mal choisi peut complètement perturber l'affichage de votre site avec cette présentation.
 
 2) Outils

Nous vous recommandons d'utiliser le navigateur Mozilla Firefox et d'y ajouter le module complémentaire Firebug. Firebug permet de visualiser le code source et la classe CSS associés à chaque zone d'une page HTML et de faire des essais de modifications directement dans le navigateur.

En pressant la touche F12 du clavier, vous pourrez "Inspecter" les zones d'une page web et découvrir quelles classes du CSS y sont rattachées.

Astuce : Le CSS est basé sur une arborescence de classes et sous-classes qui se transmettent certains paramètres de manière héréditaire. Dans certains cas, afin d'identifier la classe "mère", il peut être utile de cliquer dans le code HTML qui s'affiche dans la zone de gauche de Firebug pour sélectionner une des balises <div> située légèrement en amont dans le code.

Une fois que vous avez correctement identifié la classe concernée à l'aide de Firebug, et effectué vos essais de modification avec succès, vous pouvez la retrouver facilement dans la zone déroulante "Contenu du CSS".

Dans votre site d'administration Oxatis :

Allez dans le menu [Site\Présentation].
Cliquez sur [Gérer les présentation personnalisées].
Visualisez la ligne de la présentation CSS à modifier, et cliquez sur l'icône [Éditer les propriétés].

En tapant "Ctrl + F" (ou "Cmd + F" sur Mac) et en renseignant le nom de la classe dans la zone de saisie qui s'affiche dans le navigateur, vous accéderez directement à cette classe.

Attention : vous devez vider le cache de votre navigateur pour que les changements soient visibles sur votre site. Avec le navigateur Firefox, il suffit d'appuyer sur la touche [F5].
 
 3) Conseils aux experts

Si vous effectuez des transformations importantes dans le contenu de votre CSS, pensez à valider régulièrement votre travail en prévisualisant le résultat sur différents navigateurs.

Internet Explorer et Firefox ont une interprétation radicalement différente des paramètres margin et padding (les marges) de toutes les balises de type "bloc" (<ul>,<p>, etc) et notamment de leurs valeurs par défaut. Les paramètres "z-index" sont également gérés de manière sensiblement différentes par Internet Explorer.

Une présentation, affichant un rendu parfait sous Firefox, peut donc être complètement altérée sous Internet Explorer et inversement...

Il n'y a pas de procédure idéale. Il est nécessaire d'effectuer des tests en corrigeant ou en attribuant, si besoin, des valeurs de padding et margin pour les classes concernées et se montrer "prudent" en cas de manipulation des z-index.

Pour information, Internet Explorer 8 et Google Chrome proposent, chacun, une fonctionnalité similaire à Firebug.
  • Dans Internet Explorer 8, cette fonctionnalité est nommée "Outils de développement". Vous pouvez l'exécuter via le menu [Outils] ou en pressant sur la touche F12.

  • Dans Google Chrome, cet outil est accessible en cliquant sur [Contrôler la page actuelle/Options pour les développeurs/Console Javascript] ou en pressant sur les touches "CTRL + Maj + J"
 
 4) Documentation CSS Oxatis

Cette documentation s’adresse aussi bien à des graphistes ou des webmasters confirmés ayant déjà de bonnes notions en CSS qu’à des débutants désireux de se pencher sur la technologie CSS. Les utilisateurs chevronnés pourront ainsi disposer d’un aperçu, le plus complet possible, des classes utilisables pour personnaliser les sites Oxatis et cela permettra aux débutant de comprendre les mécanismes des feuilles de style Oxatis .

Téléchargez la documentation CSS au format PDF (3 Mo).
 

Ajouter aux favoris : http://www.oxatis.com/Help/HelpCenterContent.asp?ActionID=1024&TID=55154&MID=16001&LangID=0
© 2001-2014 Oxatis. Tous droits réservés.