En mâchant du template : Home

Vous êtes passés en configuration avancée ? Vous allez manger du template et de la feuille de style. Quelques modifications anecdotiques pour commencer.

J'ai préparé un document à télécharger qui contient le contenu initial du template "page d'accueil" et une forme de visualisation de la structure de la page d'accueil. On voit nettement deux éléments pour la bannière supérieure, un bloc pour chaque colonne et un bloc pour la partie centrale.

Je ne rentrerai pas maintenant dans le détail de chacun des éléments. Pour l'instant, appréciez (si vous le pouvez) l'imbrication de chacun des éléments, et le soin que vous devrez apporter à vos interventions.

Vous constaterez qu'il y en a déjà eu sur ce blog.

Dans le template, modifier le favicon.

La procédure est très bien expliquée sur le Blog Haut&Fort dans cette note que je vous incite à lire. Une fois l'icône préparée, l'intervention dans le template est mineure.

À la quatrième ligne, il faut remplacer ce qui est surligné <link rel="icon" href="{$platform.url}graphics/favicon.ico" type="image/x-icon" />,  par l'adresse de l'image que vous aurez téléchargée via Tableau de bord / Fichiers / Images. En l'occurence, la ligne est devenue <link rel="icon" href="http://geemee.hautetfort.com/images/favicon1.ico" type="image/x-icon" />. Et un jour j'en mettrai une jolie.

Dans la feuille de styles, modifier la police principale

C'est une intervention mineure dans la feuille de style avec de grandes conséquences pour le blog.

Je n'ai rien contre la police Arial, précisément parce qu'on en dit rien, aussi lui préféré-je Verdana. Normalement, on peut personnaliser son modèle standard et changer l'ordre des familles de polices, mais avec moi, cela ne voulait pas fonctionner. Une fois en configuration avancée, il "suffit" de modifier la feuille de style.

Dans la classe "body", la première, j'ai modifié l'ordre des polices utilisées pour que Verdana passe en premier
body {
margin: 0px 0px 20px 0px;
padding: 0px;
background-color: #aaaaaa;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
word-spacing: normal;
text-align: center;
}

L'un des principes des CSS, c'est la mise en cascade, la hiérarchie descendante des intructions. Modifier "Body" c'est modifier tout le blog, sauf instruction contraire. Comme le passage en Verdana modifiait la description du blog "Modeste contribution à l'émancipation technique du mardi et du vendredi à 12h30" en provoquant un retour à la ligne, j'ai modifié le style concerné.

Je suis donc intervenu sur la classe suivante en ajoutant l'instruction surlignée qui remet la police Arial en première position.
#banner h2 {
font-family: Arial, Verdana, Helvetica, sans-serif;
padding: 10px 25px 0px 25px;
}

En analysant le document à télécharger, vous comprendrez plus vite que c'est bien sur cette classe qu'il fallait intervenir.

Ces quelques interventions illustrent juste le principe, je vous proposerai bientôt des modifications plus ciblées et détaillées. D'ailleurs, avez-vous des priorités ?