Structure d'un thème

Fichier design.css

Dernière mise à jour : 04/03/2016 à 18h43
Table des matières
  1. Fixe ou extensible ?
  2. Les éléments génériques
  3. L'en-tête et le sous en-tête
  4. Conteneurs
  5. Le contenu de la page
  6. Le pied de page
  7. Les éléments spécifiques
    1. Le compteur de visite
    2. Barre de lien rapide
Le fichier design.css définit en fait l'aspect général de votre thème. On y trouve les éléments importants comme la largeur de votre site, la couleur d'arrière plan, et l'organisation des zones tels que l'en-tête, le menu de gauche ou le pied de page.
Commençons par le commencement :

Fixe ou extensible ?



Le thème peut être fixe, ou extensible.

Mais qu'est ce que cela veut dire ?


C'est simplement la taille que va prendre votre site, un thème fixe a une taille défini cela veut dire qu'en fonction de la taille de la fenêtre du visiteur ou de sa résolution, le site ne s'y adaptera pas. Un thème extensible en revanche s'adapte a la résolution d'écran et la taille de la fenêtre du navigateur, donc il va s'étirer.

La partie concernée :


Code CSS : 
/* Conteneurs 
--------------------------------------*/
/* ##### Conteneur global du site ###### */
div#global {
width: 980px;
margin: 18px auto 0px auto;
padding-bottom: 42px; /* Taille du footer */
}

Le thème base est fixe mais cela peut vite se modifier en changeant simplement la taille ( width/largeur )
Il vous suffira donc de faire ça comme ceci :
Code CSS : 
/* Conteneurs 
--------------------------------------*/
/* ##### Conteneur global du site ###### */
div#global {
    width:auto;
    margin:auto;
    padding-bottom: 42px; /* Taille du footer */
}

Vous constaterez aussi le padding-bottom qui correspond à la taille du footer. Sans cette astuce, le footer ne reste pas en bas de page lorsque le contenu est petit (vide en fait).

L'arrière plan, la couleur, taille de la police :


Code CSS : 
body {
position: relative;
min-height: 100%;
height: auto;
background: #E8EDF3 url(images/body.png) repeat-x;
color: #555555;
font-size: 13px;
font-family: "Trebuchet MS", Verdana, 'Bitstream Vera Sans', Times, serif;
}

Le body est le premier élément du site. Tous les éléments ont donc une répercutions sur les classes suivantes.
La taille du texte ainsi que la police doivent être définit ici pour éviter les déclarations multiples.
Pour changer l'arrière plan ( background ) il vous suffira simplement de changer l'image global ainsi que la valeur de son code couleur :
Code CSS : 
background:#E9ECEF url(images/global.png)  repeat-x;
repeat-x veut dire que l'on va répéter l'image tout le long (à l'horizontal).
Pour répéter une image verticalement il vous suffira de mettre :
Code CSS : 
repeat-y

Et pour que l'image ne soit pas répétée mettre :
Code CSS : 
no-repeat

Bien sûr il existe encore de grandes possibilités à ce niveau.
Pour la police, c'est toujours quelque chose de très simple
Code CSS : 
color:#0E2A48;

Il vous suffira de changer le code couleur, pour la taille c'est à ce niveau que ça ce passe :
Code CSS : 
font-size:12px;

Les éléments génériques


Code CSS : 
html {
    font-size: 100%;
    font-size: 10px;
}
body {
    position: relative;
    height: auto;
    min-height: 100%;
    background-color: #E8EDF3;
    color: #555555;
    font-size: 1.3em;
    font-family: "Trebuchet MS", Verdana, 'Bitstream Vera Sans', Times, serif;
}
@media (max-width: 768px) {
    body {
        font-size: 1.4em;
    }
}

L’élément HTML englobe tout votre site. L'élément BODY va englober toute la partie visible. On retrouve déja dans ces quelques lignes le système de media-queries qui nous permet de gérer l'affichage en fonction de la taille de l'écran (ordinateur, tablette, smartphone).

L'en-tête et le sous en-tête


Code CSS : 
header#header {
    background-color: #366393;
}
/* --- Partie superieure du header --- */
div#top-header {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    margin: auto;
    min-height: 139px;
    max-width: 1024px;
}
div#top-header-content {
    flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
}
@media (max-width: 768px) {
    div#top-header {
        flex-direction: column;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
    }
 
    div#top-header-content {
        align-self: flex-end;
        -ms-align-self: flex-end;
        -webkit-align-self: flex-end;
    }
}
/* --- Partie inferieur du header --- */
div#sub-header {
    min-height: 35px;
    background-color: #353535;
    border-top: 1px solid #8B9193;
}
div#sub-header-content{
    margin: auto;
    max-width: 1024px;
}
/* --- Logo et Nom du site web --- */
div#site-infos {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    margin: 1.5em 0 0 1.5em;
    max-width: 940px;
    flex: 1 1 auto;
}
div#site-logo {
    margin: 0 1em 0 0;
    width: 60px;
    height: 60px;
    background-image: url('images/logo.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
}
div#site-name-container {
    margin: 0.4em 0 0 0;
}
a#site-name {
    color: #F9FCFF;
    font-size: 3em;
    font-weight: bold;
    line-height: 1em;
    letter-spacing: 0.02em;
    text-decoration: none;
    text-shadow: 0 0 0 rgb(0, 0, 0), 1px 0 0 rgb(0, 0, 0), 2px 0 0.1px rgba(0, 0, 0, 0.1), 2px 0 0.1px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, .1);
}
span#site-slogan {
    display: block;
    padding: 0.1em 0 0 0.1em;
    color: #FFFFFF;
    font-size: 1em;
    letter-spacing: 0.1em;
}
@media (min-width: 769px) {
    div#site-logo {
        width: 90px;
        height: 90px;
    }
    div#site-name-container {
        margin: 1em 0 0 0;
    }
    a#site-name {
        font-size: 4em;
    }
 
}

Les classes ci-dessous permettent de définir le header et le sub-header du site ainsi que la position du logo et du nom du site.

Conteneurs


Code CSS : 
div#global {
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: column;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    margin: 1.5em auto 0 auto;
    padding: 0 10px;
    max-width: 1024px;
}
div#main {
    padding: 0 0 10px 0;
    max-width: 100%;
    order : 1;
    -ms-flex-order: 1;
    -webkit-flex-order: 1;
}
aside#menu-left,
aside#menu-right {
    width: 100%;
}
aside#menu-left  {
    order : 2;
    -ms-flex-order: 2;
    -webkit-flex-order: 2;
}
aside#menu-right {
    order : 3;
    -ms-flex-order: 3;
    -webkit-flex-order: 3;
}
@media (min-width: 769px) {
    div#global {
        min-height: 100vh;
        flex-direction: row;
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
    }
    div#main {
        padding: 0 10px;
        order : 2;
        -ms-flex-order: 2;
        -webkit-flex-order: 2;
        flex: 1 0 auto;
        -ms-flex: 1 0 auto;
    }
    aside#menu-left,
    aside#menu-right {
        width: 200px;
    }
    aside#menu-left  { 
        order : 1;
        -ms-flex-order: 1;
        -webkit-flex-order: 1;
    }
    aside#menu-right { 
        order : 3;
        -ms-flex-order: 3;
        -webkit-flex-order: 3;
    }
 
    .main-with-left,
    .main-with-right {
        width: calc(100% - 200px);
    }
 
    .main-with-left.main-with-right {
        width: calc(100% - 400px);
    }
}
div#top-footer {
    padding: 2% 0;
}

En dessous du header, on retrouve le corps de la page avec le conteneur principal "main" qui sera entourée de colonne "left" et "right".

Le contenu de la page


Code CSS : 
div#main-content {
    padding: 1.5em 0.8em;
    border: 1px #BEBEBE solid;
    background-color: #FFFFFF;
}
div.block-container {
    margin-top: 15px;
}
/* --- Emplacement au dessus et en dessous du contenu de la page --- */
div#top-content {
    margin: 0 0 2% 0;
    padding: 0.1em 0.8em;
    background-color: #FFFFFF;
    border: 1px solid #BEBEBE;
}
/* --- Emplacement au dessus du pied de page --- */
div#bottom-content {
    margin: 2% 0 0 0;
    padding: 0.1em 0.8em;
    background-color: #FFFFFF;
    border: 1px solid #BEBEBE;
}

Le contenu de la page est aussi intégré un élément #main-content. On retrouve en plus un élément au dessus #top-content, et un élément en dessous #bottom-content. Tous ces éléments peuvent intégré des modules via l'administration.

Le pied de page


Code CSS : 
footer#footer {
    width: 100%;
    background-color: #212121;
    border-top: #336397 2px solid;
    clear: both;
}
 
footer#footer .footer-content {
    margin: 0 auto 0 auto;
    padding: 1.5em 0;
    max-width: 1024px;
    border-bottom: 2px groove #444444;
}
 
footer#footer .footer-infos {
    padding-top: 10px;
    min-height: 40px;
    text-align: center;
}
 
footer#footer .footer-infos span {
    color: #FFFFFF;
    font-size: 0.8em;
}

Le bas du site est géré par les classe footer. La zone supérieur ".footer-content" est personnalisable avec des modules alors que la zone inférieure ".footer-infos" est reversé aux informations du site tel que le nom du thème, ou le copyright.

Les éléments spécifiques



Le compteur de visite


Code CSS : 
div#compteur {
    position: absolute;
    right: 0;
    margin-right: 15px;
    font-size: 0.9em;
    color: #E9ECD9;
    text-align: right;
}
 
@media (min-width: 769px) {
    div#compteur {
        top: 100px;
    }
}

  • Color définit la couleur de la police,
  • font-size la taille,
  • text-align l'alignement du texte ( center pour centrer, left pour aligner à gauche et right pour aligner à droite ).

Pour définir l'espace entre le site et le compteur ont fait toujours appelle au margin, ici on choisit un margin-right:15px, se qui veut dire qu'on aura un décalement de 15 pixels par la gauche.

Barre de lien rapide


Code CSS : 
nav#breadcrumb {
    margin: 0 0 20px 10px;
    text-indent: 10px;
}
 
nav#breadcrumb ol {
    margin: 0;
    list-style: none;
}
 
nav#breadcrumb ol li {
    display: inline;
}
 
nav#breadcrumb ol li:not(.current):after {
    content: '/';
    color: #616161;
}

Afin de toujours savoir ou nous sommes et pouvoir revenir en arrière une navigation rapide est présente sur l'ensemble du site. Elle est facilement personnalisabile avec la classe unique "#breadcrumb".
Cette page a été vue 10507 fois