Structure d'un thème

Fichier design.css

Cet article a été mis à jour, vous consultez ici une archive de cet article!
Dernière mise à jour : 04/07/2014 à 19h37
Table des matières
  1. Fixe ou extensible ?
  2. L'arrière plan, la couleur, taille de la police
  3. L'en-tête et le sous en-tête
  4. Le compteur de visite
  5. Les menus
  6. Le contenu de la page
  7. La barre de lien rapide
  8. Les emplacements au dessus et en dessous des pages
  9. Le footer ( ou pied de page )
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;


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


Code CSS : 
header#header {
    height: 174px;
    width: 980px;
    margin: auto;    
}
 
div#top-header { 
    height: 139px;
    display: flex;
}
div#sub-header { min-height: 35px;}

Les classes "top-header" et "sub-header" définissent la hauteurs de l'en-tête. La fonction display:flex; a été utilisé afin de garantir l'utilisation de toute la zone du header si disponible.

Code CSS : 
div#site-infos {
    display: flex;
    max-width: 940px;
    margin: 20px 20px 0px 20px;
}
 
div#site-logo {
    margin-right: 20px;
    background: url('images/logo.png') no-repeat;
    width: 90px;
}
 
div#site-name-container {
    margin-top: 10px;
    flex: 1;
    height: 108px;
    overflow: hidden;
}
 
a#site-name {
    color: #F9FCFF;
    font-size: 50px;
    font-weight: bold;
    line-height: 1em;
    text-shadow: 0px 0px 0 rgb(0,0,0), 1px 0px 0 rgb(-255,-255,-255), 2px 0px 1px rgba(0,0,0,0.1), 2px 0px 1px rgba(0,0,0,0.2), 0px 0px 1px rgba(0,0,0,.1);
    letter-spacing: 1.1pt;
    text-decoration: none;
    white-space: nowrap;
}
 
span#site-slogan {
    display: block;
    color: #FFFFFF;
    font-size: 12px;
    padding-left: 4px;
    letter-spacing: 1.5pt;
}

Les classes ci-dessous permettent de définir la position du logo et du nom du site.

Le compteur de visite


Code CSS : 
div#compteur {
    color: #E9ECD9;
    position: absolute;
    top: 50px;
    right: 0px;
    font-size: 11px;
    margin-right: 15px;
    text-align: right;
}

  • 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.

Les menus


Code CSS : 
/* Menu gauche */
aside#menu-left {
    float: left;
    width: 200px;
    margin-right: 5px;
}
 
/* Menu droit */
aside#menu-right {
    float: right;
    width: 200px;
    margin-left: 5px;
}
 
/* Taille du conteneur de page en fonction des menus droite et gauche */
aside#menu-left + div#main { float:left; width:775px; }
aside#menu-right + div#main { float:left; width:775px; }
aside#menu-left + aside#menu-right + div#main { float:left; width:570px; }

  • Float définit l'emplacement du menu,
  • left ( donc left pour celui de gauche et right pour celui de droite ),
  • width définit la largeur du menu,
  • margin-right ou left l'espace entre le menu central et le menu en question.


Le contenu de la page


Code CSS : 
/* Contenu de la page */
div#main { width:auto; }
 
/* Contenu central */
div#main-content {
    padding: 20px 10px;
    border-spacing: 1px;
    border: 1px #BEBEBE solid;
    background: #FFFFFF;
}


La barre de lien rapide


Code CSS : 
/* Barre d'outils */
#actions-links-menu { float:right; margin: 0 5px 5px 5px; }
 
/* Barre de lien rapide */
nav#breadcrumb { text-indent: 10px; margin: 0px 0px 20px 10px; }
nav#breadcrumb ol { list-style: none; margin: 0; }
nav#breadcrumb ol li { display: inline; }
nav#breadcrumb ol li:not(.current):after { content: '/'; color: #616161; } /* Séparateur de lien */


La barre de lien rapide est en fait le fil d'Ariane, le menu au dessus du contenu indiquant l'arborescence jusqu'à la page actuelle (Accueil > Wiki ).

Les emplacements au dessus et en dessous des pages


Code CSS : 
/* Emplacement au dessus et en dessous du contenu de la page */
div#top-content { margin: 0px auto; }
div#bottom-content { margin: 8px 0; }
 
/* Bloc au dessus du pied de page */
div#top-footer { clear: both; padding: 5px 0px; }


Le footer ( ou pied de page )


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