Feuilles de style

Nous décrivons ici comment les feuilles de style sont utilisées avec les gabarits par défaut de CMS Made Simple. Pour découvrir comment modifier certaines propriétés dans les feuilles de style, lisez Personnaliser les feuilles de style.

Comme indiqué dans je suis designer, c'est dans les feuilles de style que vous définissez les styles et les formats de votre site, et ce au moyen d'un langage de description nommé CSS. C'est pourquoi, si vous souhaitez comprendre ce que vous faites, il n'est pas inutile de commencer par apprendre les bases de CSS. Cependant, nous vous donnerons quelques idées sur la manière de modifier quelques choses simples telles que la couleur ou le logo.

Les feuilles de style sont attachées au gabarit dans lequel les styles qu'elles contiennent doivent être utilisés. Si cela vous chante, vous pouvez attacher une seule feuille de style à un gabarit. Toutefois, la méthode que nous avons retenue pour les gabarits par défaut consiste à diviser les CSS en plusieurs feuilles de style, en procédant à des regroupements de caractéristiques similaires. Cela rend plus facile la localisation et la modification d'une famille donnée de styles.

Feuilles de styles utilisées avec les gabarits de CMS Made Simple

Cinq feuilles de style sont attachées à chaque gabarit par défaut de CMSMS, et ce sont les cinq mêmes pour tous les gabarits. En complément, il y a une feuille de style spécifique à chaque gabarit, ainsi qu'une ou deux feuilles de style selon le type de menu que le gabarit utilise.

Voici les feuilles de style utilisées par les gabaris par défaut de CMSMS :

Les feuilles de style sont attachées aux gabarits par défaut

• Layout (mise en page) -- On y définit les éléments généraux de mise en page, identiques pour tous les gabarits par défaut. Pour chaque projet sur lequel vous travaillez, cette feuille de style doit être personnalisée.
• Typography (typographie) -- C'est ici que l'on définit les styles relatifs aux polices de caractères, liens, titres, images, listes, etc.
• Colours (couleurs) -- Toutes les couleurs sont regroupées dans cette feuille de style. Les seules propriétés qu'on y trouve sont color, background et border-color. N'ajoutez pas d'autres propriétés ici, car cela risque d'avoir un effet sur la mise en page de l'ensemble de votre site! A noter que les couleurs des menus sont dans les feuilles de style spécifiques aux menus.
• Forms (formulaires) -- Afin que les formulaires soient plus facilement semblables d'un navigateur à l'autre, la definition des styles des formulaires est effectuée dans une feuille de style à part. Vous n'aurez pas à modifier celle-ci fréquemment.
• Tools (outils) -- Cette feuille de style est attachée à tous les gabarits pour gérer les comportements multi-navigateurs. Vous n'avez pas besoin d'y toucher.

Feuilles de style de navigation

• Nav-Horizontal / Nav-Vertical (navigation horizontale/verticale) -- Selon la mise en page de votre gabarit, il faut y attacher l'une et/ou l'autre de ces feuilles de style. Vous n'avez que peu de choses à changer dans ces feuilles de style, afin de donner au menu l'apparence qui vous convient.
• Default CSSMenu Horizontal / Default CSSMenu Vertical (menu CSS horizontal/vertical par défaut) -- Si vous préférez opter pour un menu CSS déroulant, utilisez l'une ou l'autre de ces feuilles de style.

Feuilles de style spécifiques à un gabarit

• Layout-XXX (mise en page XXX) -- Il y a une feuille de style spécifique à chaque gabarit. C'est là que vous effectuez la mise en page (et peut-être aussi la définition de certains styles) qui s'applique uniquement à ce gabarit. Par exemple, en changeant seulement cette feuille de style, vous pouvez faire en sorte que le menu apparaisse en haut, ou sur le côté gauche ou droit.

• • NOTA : la balise {cms_stylesheet} introduite ne version 1.8, permet d'utiliser des variables Smarty comme $red pour indiquer une couleur, et le changement se fera via votre mise en page. Cette nouvelle balise exige que le chemin des images soit root_url/dossier_images (exemple root_url/uploads/ngrey/body.png), car les feuilles de style seront mis en cache.

Pour une introduction sur la manière de modifier les sélecteurs et leurs propriétés dans ces feuilles de style, continuez vers Personnaliser les feuilles de style.

Personnaliser des feuilles de styles

Vous trouverez sur internet plein de sites parlant du css. Pour commencer:
[Documentation de référence]
[La traduction en francais (non officielle)]

Vous pourrez également trouver des sites pour apprendre plus en douceur:
[Tutoriels pour débutant]
This page in: English - Deutsch - Español - Français - Italiano - Lietuvių - Nederlands - Norsk - Polski - Česky - Русский - Svenska - Tiếng Việt - عربي - 日本語 简体中文

This page in: English - Deutsch - Español - Français - Italiano - Lietuvių - Nederlands - Norsk - Polski - Česky - Русский - Svenska - Tiếng Việt - عربي - 日本語 简体中文

User Handbook/Getting Started/Designer/Stylesheets/fr

From CMSMS