Pour donner une belle apparence à votre sidebar, il convient d’apporter quelques informations dans la feuille de style.
Feuille de style CSS et sidebar
Voici un exemple de personnalisation de barre latérale dont nous allons définir les codes.
.sidebar ul{
color:#fff;
list-style-type: none;
margin: 0;
padding: 5px 10px 20px 5px;
}
.sidebar {
float: left;
width: 20%;
padding: 10px 10px 10px 20px;
}
.sidebar h2 {
font-size: 1.2em;
padding: 10px 10px 10px 20px;
border-radius : 8px;
background-image: -moz-linear-gradient(top, #000, #444);
background-image: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000,endColorstr=#444);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#000,endColorstr=#444)”;
}
Ici le modèle présente une sidebar avec un contour arrondi et un background dégradé de couleur noire. Nous avons imposé une marge interne (padding) pour aérer la présentation. Il s’agit d’un code très basique auquel vous pourrez apporter votre touche personnelle!
Quelles styles apporter à la sidebar?
Il y a une mode aussi, en web design : les dégradés présents sur la toile depuis quelques mois ne sont pas les même qu’il y a deux ans. Pour avoir une barre latérale “tendance” étudiez celles des sites qui vous plaisent et tâchez de reproduire l’effet : parfois les dégradés sont produits à partir d’image, parfois simplement à partir du code CSS. Les couleurs aussi évoluent selon un effet de mode : soyez observateur pour choisir les vôtres!
Vous avez la possibilité de changer l’apparence du titre des éléments de la sidebar : h2 désigne le titre. Il vous suffit d’introduire le code à l’intérieur de cet attribut (image, background, taille, police..)
Inspirez-vous d’autres thèmes pour améliorez votre customisation
Chaque thème est organisé différemment. Les débutants en création de site ont parfois du mal à se repérer dans une feuille de style : les fonctionnalités sont tellement larges qu’on peut vite s’y perdre. Si nous vous avons proposé un modèle dans le quel le style est attribué élément par élément (body, puis header etc.) d’autres sont structurés par balises : une première partie permet de régler les dimensions de chaque élément, une seconde les polices de chaque élément…
Nous expliquons ces principes dans d’autres articles de la catégorie “création de site” pour vos permettre d’acquérir des techniques plus poussées qui faciliteront la gestion de la feuille de style et la synthétiseront au maximum.
