Explication des feuilles de styles standards de c5

Nous prendrons comme exemple le thème par défaut de concrete5 que vous trouverez dans le dossier /concrete/themes/default.

Comme vous pouvez le remarquer il y a deux feuilles de styles principales. main.css et typography.css

Le but de cet article n'est pas de vous donner un cours sur les feuilles de styles (Cascading Style Sheet) mais de vous expliquer brièvement les différents styles standards utilisé par C5.

La feuille typography.css

Cette feuille de style est la feuille gérant le texte des contenus. Si vous voulez agrémenter les classes et styles disponibles pour l'éditeur TinyMCE, c'est ici que vous devez les ajouter.

Voici comment celle-ci se présente:

body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; color: #777; } /* définition générale des images (balise img) */ img { border: 0px; } /* définition générale des liens de contenus */ a,a:visited,a:active { color: #66aa33; } a:hover { color: #66CC00; } /* définition des balises h1 à 5 */ h1,h2,h3,h4,h5 { color: #444; margin: 0px 0px 4px 0px; padding: 4px 0px; margin-top: 8px; } h1 { font-size: 21px; line-height: 28px; } h2 { font-size: 18px; line-height: 24px; } h3 { font-size: 16px; line-height: 21px; } h4 { font-size: 14px; line-height: 18px; } h5 { font-size: 13px; line-height: 16px; } /* définition de la balise p */ p { padding: 0px 0px 0px 0px; } 

La feuille main.css :

C'est la feuille de style qui contrôle l'affichage général de votre site concrete5. En effet vous trouverez ici les définitions des emplacements, types d'affichages, marges, comportements graphiques divers des liens et autres.

Voici comment elle se compose:

/* HTML Tag Redefinition */ /* définition du body html standard */ html, body { height: 100%; } body { background: #fff; text-align: center; padding: 0px; margin: 0px; } /* définition générale sur les images (balise img) */ img { border: 0px } /* définition générale sur les liens (balise a href) */ a { cursor: pointer } /* classes des textes d'erreur fournis en option par le thème */ div.ccm-error-response { color: #f00; margin-bottom: 12px } /* Page Structure / Navigation */ /* Définition générale de la page */ #page { width: 800px; margin: auto; text-align: left } /* espace libre en haut de page */ #page #headerSpacer { height: 64px } /* container du header (autonav, bannière, titre et séparateurs haut et bas) */ #page #header { position: relative; } /* logo du header (le texte) */ #page #header #logo { color: #999; font-size: 32px; font-family: Arial, Helvetica, sans-serif; line-height: auto; margin-bottom: 0px; padding: 0px; margin-top: 8px; cursor: pointer; left: 0px; z-index: 10; width: auto; float: left; position: relative } /* style du lien du texte du logo (nom du site) */ #page #header #logo a { color: #999; text-decoration: none; } /* style de l'auto nav */ #page #header #headerNav { position: absolute; top: 14px; right: 0px; z-index: 2; width: 100%; overflow: visible; } /* définition de la balise ul de l'autonav */ #page #header ul.nav-header { list-style: none; margin: 0px; padding: 0px; width: auto; z-index: 2; overflow: visible; float: right } /* style de la balise li de l'auto nav */ #page #header ul.nav-header li { float: left; padding: 2px 0px; margin-left: 16px; margin-bottom: 0px; color: #999; font-size: 13px; margin-top: 0px } /* style de la balise li hover (lorsque la souris est sur le lien) de l'auto nav*/ #page #header ul.nav-header li a,#page #header ul.nav-header li a:hover { text-decoration: none; color: #999999 } /* style de la balise li selected (lorsque la page est affichée) de l'auto nav*/ #page #header ul.nav-header li.nav-selected { border: 1px solid #bbb; padding: 2px 8px; } /* container de la bannière et deus deux séparateurs */ #page #header #header-area { margin-top: 10px; margin-bottom: 10px } /* style de la zone de contenu nommée header */ #page #header #header-area #header-area-inside { margin-bottom: 12px; } /* style de l'image de la bannière */ #page #header #header-area img { display: block } /* définition des séparateurs horizontaux */ #page .divider { padding-top: 12px; background: url(images/nav_horizontal_divider.gif) no-repeat top; overflow: hidden; height: 1px; clear: both; width: 100%; } /* définition générale de la page entre le header et le footer */ #page #central { background: url(images/nav_sidebar_right_bg.gif) repeat-y center; clear: both; } /* définition de la page sans colonne */ #page .no-sidebar { background-image: none !important } /* définition de la page avec colonne gauche */ #page #central.central-left { background: url(images/nav_sidebar_left_bg.gif) repeat-y center !important; } /* définition du contenu de la colonne de gauche */ #page #central.central-left div#sidebar { float: left !important; } /* définition de la zone de contenu principal si colonne il y a */ #page #central.central-left #body { padding-left: 72px !important; padding-right: 0px !important; float: right } /* définition du corp de ala zone principale si colonne il y a */ #page #central #body { float: left; width: 67%; padding-right: 28px; overflow: hidden; padding-left: 0px !important; padding-right: 0px !important } /* définition de la balise p des contenus de la zone principale */ #page #central #body p { text-align: justify; } /* définition de la zone de contenu principale sans colonne */ #page .no-sidebar #body { float: none !important; width: auto !important; overflow: hidden } /* définition pour la colonne de droite */ #page #central #sidebar { float: right; width: 24%; overflow: hidden } /* définition de la balise p pour les colonnes */ #page #central #sidebar p { line-height: 24px } /* définition de la balise ul pour les colonnes */ #page #central #sidebar ul.nav { list-style: none; margin-left: 0px; padding: 0px; padding-left: 24px; font-size: 11px; } /* définition de la balise li pour les liens des colonnes */ #page #central #sidebar ul.nav li { margin-bottom: 16px; } /* définition de la balise a pour les liens des colonnes */ #page #central #sidebar ul.nav a { text-decoration: none; color: #333 } /* définition de la balise a pour les liens des colonnes lorsque la page correspondante est affichée */ #page #central #sidebar ul.nav a.nav-selected { font-weight: bold } /* définition de la balise a pour les liens des colonnes lorsque le lien est pointé par la souris */ #page #central #sidebar ul.nav a:hover { text-decoration: underline } /* définition générale de la balise ul des colonnes */ #page #central #sidebar ul.nav ul { list-style: none; margin-left: 0px; padding: 0px; padding-left: 16px; margin-top: 16px; } /* définition générale de la balise li des colonnes */ #page #central #sidebar ul.nav ul li { margin-bottom: 16px; } /* image de séparation de la colonne de gauche */ #page #central.navLeft { background: url(images/nav_sidebar_left_bg.gif) repeat-y center; } /* alignement central si colonne */ #page #central.navLeft #sidebar { float: left } /* corp de la navigation sur page centrale */ #page #central.navLeft #body { float: right; padding-right: 0px; width: 68%; } #page #central.noSideNav { background: none; } #page #central.noSideNav #sidebar { display: none; } #page #central.noSideNav #body { float: none; padding-left: 0px; padding-right: 0px; width: 100%; } /* définition du container du footer */ #page #footer { padding-top: 24px; clear: both; padding-bottom: 16px; color: #999; font-size: 10px; } /* définition de la balise a du footer */ #page #footer a { text-decoration: none; } /* définition de style du texte sign in to edit */ #page #footer span.sign-in { margin-left: 20px; } /* Eléments de la page */ /* marge de la navigation */ .pagingNav { margin: 16px 0px 8px 0px; } /* pagination générale */ .pagination { text-align: center; color: #bbb; padding-top: 4px; } /* pagination colonne droite */ .pagination .pageRight { width: 20%; float: right; text-align: right; } /* pagination colonne gauche */ .pagination .pageLeft { width: 20%; float: left; text-align: left; } /* styles divers & racourcis */ div.code { border: 1px solid #ddd; background: #eee; padding: 10px; } /* séparateur horizontal de 1px */ div.spacer,div.ccm-spacer { clear: both; font-size: 1px; line-height: 1px; } /* classe sans espace vertical */ .noTopSpace { margin-top: 0px; padding-top: 0px; } 

Cet article est bien plus pour vous orienter que de vous expliquer en détail chaque style. Si vous avez des questions, les forums sont à votre disposition.

Ajouter des feuilles de styles personnelles :

Dans le cadre de création et/ou adaptation de thème, il peut être intéressant de séparer les feuilles de styles personnalisées de celles incluses par défaut.

Si vous créez une feuille intitulée mon_style.css, et que vous téléversez celle-ci dans le dossier de votre thème, il vous faut modifier le fichier /mon_theme/elements/header.php comme suit:

ajoutez:

<style type="text/css">@import "<?php echo $this->getThemePath()?>/mon_style.css";</style> 

et à la ligne suivante, ajoutez:

<!-- Site Header Content //--> 

Ainsi le moteur de concrete5 chargera les styles que vous avez ajoutés.