Personnaliser les citations

La feuille de style du mode Expert ne contient qu'une partie seulement des styles éditables. Avec les outils adéquats, vous pouvez facilement récupérer les noms, classes et id de chaque élément du site et les personnaliser à votre sauce.

Si vous utilisez Firefox, vous pouvez installer le module complémentaire web developer qui vous permettra de récupérer facilement les noms et caractéristiques de chaque élément de la page.

Personnaliser les citations

Les citations sont un de ces éléments dont le style n'apparait pas par défaut dans la feuille de style.

Ceci est une citation normale, sans intervention de notre part.

Elles utilisent la balise “blockquote”. Ils suffit donc d'ajouter une ligne dans la feuille de style pour décrire la façon dont blockquote (et dans notre cas, le paragraphe contenu dans blockquote) doit apparaitre:

blockquote p {
   background-color:#EFF1F8;
   border:1px solid #94A3CE; 
   color:#6C7EB3;
   -moz-border-radius: 10px;
   padding:5px;
   font-style: normal;
   width:400px;
}

Produira une citation qui ressemble à ceci:

Ceci est la citation produite.

Vous pouvez également créer vos propres classes et id que vous utiliserez dans vos pages quand bon vous semble. Ou créer des styles à la volée, dans les pages même, avec la syntaxe html habituelle.

Autre exemple de personnalisation possible:

blockquote {
   background-image:url(http://.../monimage.png);
   background-repeat: no-repeat;
   padding-left:75px;
   min-height:110px;
   font-style:normal;
   font-family: Verdana, "Bitstream Vera Sans", "Lucida Grande", sans-serif;
   font-size:1em;
}

Notez que vous pouvez créer un div avec une classe particulière1, pour vous réserver cette décoration. N'importe qui qui utilise la syntaxe de webcomics.fr peut faire une citation, mais seul vous pourrez la décorer :)

Revenir à la page d'aide sur la personnalisation des webcomics.

  1. Les styles "font-*" sont alors inutiles.