Tutoriel - personnalisation CSS d'un blog Dotclear - Émancipation informatique pour tous LIBÈRE TON ORDI !

Accès aux thème et à leur configuration :
Tableau de bord > Apparence du blog > choisir un thème > Configuration / feuille de style

Étape 1 : choisir un thème et le configurer

Choisir le thème le plus proche possible de ce que vous souhaitez obtenir.

Configurer ce thème autant que possible. Actuellement le seul thème configurable est "Blowup".

Étape 2 : enregistrer les éléments du thème choisi

- la feuille de style par défaut

- les modifications éventuellement effectuées dans la configuration et que vous souhaitez reproduire.

Pour les obtenir affichez la source de la page web et copier le code CSS situé entre les balises <style>.

- les images spécifiques du thème (voir dans le gestionnaire de médias, le dossier créé par le thème ex : "blowup-images")
il s'agit de l'image d'en-tête, d'images de fond et d'images permettant d'avoir des coins arrondis et formes de bulles pour les commentaires.

Elles sont accessibles à l'URL http://[adressedublog]/public/[nomdutheme]-images/[nomdufichierimage]
(ex : http://blog.liberetonordi.com/public/blowup-images/page-t.png)

Vous pouvez aussi essayer de récupérer des images d'autres thèmes (telles que tags, éléments décoratifs, etc.)

Les images par défaut du thème sont à l'URL http://[adressedublog]/themes/default/img/[nomdufichierimage]
(ex : http://blog.liberetonordi.com/themes/default/img/feed.png)

Étape 3 : choisir le thème "Custom theme"

3.1. Dans la feuille de style - initialement vide - copier-coller la feuille de style par défaut du thème de départ.

Vous devriez obtenir l'apparence par défaut du thème de départ, à l'exception des images.

3.2. Dans la feuille de style remplacer les url relatives url(img/...) par les chemins complets
(ex : url(http://blog.liberetonordi.com/public/blowup-images/page-t.png) )

Vous devriez obtenir l'apparence par défaut du thème de départ, avec les images.

Étape 4 : personnalisation de la feuille de style

4.1. Dans la feuille de style appliquer les modifications que vous aviez faites en configurant le thème de départ

(Couleurs de certains blocs, couleurs des liens, du texte et des titres principaux, police de caractères, taille de police, etc.)

Ajouter à la feuille de style le bloc de code CSS recopié depuis la source de la page.

Vous devriez obtenir l'apparence du thème de départ tel que l'aviez configuré à l'étape 1.

4.2. Dans la feuille de style appliquer les modifications que vous ne pouviez pas faire en configurant le thème de départ

Par exemple :

taille et couleur des titres de différents niveaux ;
hauteur et largeur des différents éléments ;
couleur de fond du contenu principal (#main) et de la barre latérale (#wrapper, plutôt que #sidebar pour assurer la continuité vers le bas) ;
ajout de polices de caractères distantes (voir § 4.3.)

Pour retrouver dans la feuille de style les éléments correspondant, vous pouvez vous aider des outils de développement fourni par le navigateur web Firefox (Menu Outils > Développement web). Notamment l'inspecteur et l'éditeur de style (choisir la feuille nommée "custom_style.css"). En sélectionnant des éléments dans la page vous pouvez repérer les différentes divisions et autres éléments. En modifiant la feuille de style vous pouvez voir en direct l'effet produit (les modifications ne sont pas enregistrables). La vue adaptative permet de voir comment se comporte le blog lorsque la taille de l'écran est réduite.

4.3. Ajout d'une police de caractère distante

À éviter : les polices fournies "gratuitement" par Google : elles permettent de pister les internautes.

Choisir une police libre sur le site https://fontlibrary.org

Sur sa page, copier le lien inclut dans le code destiné à être inséré dans l'en-tête <head> (auquel nous n'avons pas accès).
Exemple : https://fontlibrary.org/face/unique
Suivre ce lien : on accède au code à insérer dans une feuille CSS :

@font-face {
font-family: 'UniqueRegular';
src: url('/assets/fonts/unique/1539764ecc445a7321c68badd777ccaa/9ff4cf64c0c38390221799ac7cd72081/UniqueRegular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Il faut encore ajouter l'adresse de base du site, ce qui donne finalement :

@font-face {
font-family: 'UniqueRegular';
src: url('https://fontlibrary.org/assets/fonts/unique/1539764ecc445a7321c68badd777ccaa/9ff4cf64c0c38390221799ac7cd72081/UniqueRegular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

Ensuite il suffit d'ajouter la propriété font-family aux éléments voulus dans la feuille de style. Fait ici pour le titre du blog :

#top h1 {font-family:UniqueRegular;}

Étape 5 : modification des images

Certaines images servent à obtenir des coins arrondis ou des bulles pour les commentaires. Elles se raccordent aux éléments voisins (rectangulaires).

Si vous changer la couleur ou la taille de ces éléments voisins (#main affecte les commentaires, #wrapper affecte l'en-tête et le pied de page), vous devez éditer manuellement les images de façon à y changer aussi la taille et la couleur, pour assurer le raccord.

Vous pouvez également modifier les images de fond body-bg.png et page-bg.png

Pensez à sauvegarder les images originales. Nommez différemment vos versions modifiées et placez-les dans l'un des dossiers du gestionnaire de médias (par exemple dans /blowup-images/).

Étape 6 : style pour l'impression

A ce stade, la mise en forme pour l'impression est différente de celle obtenue avec le thème de départ et elle est non satisfaisante (marge droite trop importante, pied de blog s'insérant au milieu du texte).

Il faut encore configurer la feuille de style personnalisée pour y inclure les instructions de mise en forme pour l'impression.

Ajouter le code CSS pour l'impression issu du fichier print.css à l'intérieur d'une balise @media print{ }. Tout ce qui précède doit être inclut à l’intérieur d'une balise @media screen{ }

Le fichier print.css se trouve à l'URL http://[adressedublog]/themes/default/print.css

On peut apporter des modifications au code CSS, notamment passer la taille des caractères de 10 à 12pt.

Étape 7 : adaptation dynamique aux écrans de faible taille

Réarranger les divisions lorsque la largeur est inférieure à la largeur du contenu (800 pixels pour le thème BlowUp).

Ajouter le code CSS à l'intérieur d'une balise @media screen and (max-width:800px) { }

Voir un exemple dans l'annexe.

Récapitulatif

Les images par défaut du thème de départ ont été si besoin modifiées, renommées et chargées dans le gestionnaires de médias. Elles sont appelées par le code CSS.

La feuille de style personnalisée custom_style.css contient :

@media screen{

<mises en forme CSS par défaut du thème de départ = contenu de la feuille de style du thème + liens absolus pour les images>

<mises en forme CSS ajoutée par la configuration assistée, copiées depuis la source de la page affichée>

<mises en forme CSS additionnelles à ajouter manuellement>

}

@media screen and (max-width:800px) {

<mises en forme CSS pour écran étroit>

}

@media print{

<mises en forme CSS par défaut pour l'impression, éventuellement modifiées>

}

Cf. exemple en annexe.

mise à jour : 15 août 2016.

Émancipation informatique pour tous LIBÈRE TON ORDI !