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

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

Tableau de bord > Apparence du blog > Ajouter des thèmes.

Une fois un thème ajouté (téléchargé), vous le trouverez dans l'onglet "Thèmes installés". Cliquez dessus puis sur son bouton "Utilisez celui-ci" pour l'activer.

(Le thème actuel de notre blog est "Ductile".)

1.2. [Facultatif] Configurer le thème via le bouton "Personnaliser le thème".

Attention : les réglages de style (couleurs, taille de caractères, etc.) que vous faites ici sont prioritaires sur les feuilles de styles (ils s'insèrent dans l'en-tête de toutes les pages web de votre blog). N'utilisez pas ces réglages (pour le thème Ductile ils sont regroupés sous l'onglet "Présentation") si vous avez l'intention de les paramétrer dans la feuille de style.

Les autres réglages (pour le thème Ductile ils sont regroupés sous l'onglet "Contenu") ne posent pas de difficulté.

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

Ceci n'est nécessaire que si vous comptez partir du thème vierge "Custom_theme". En effet il vous faudra y introduire des éléments glanés dans d'autres thèmes. Si vous n'êtes pas concerné, passez à l'étape 3.

2.1. copiez la feuille de style par défaut (depuis le thème sélectionné, cliquez sur le lien "Feuille de style") ;

2.2. copiez les modifications éventuellement effectuées dans la configuration (à l'étape 1.2.) et que vous souhaitez reproduire :

pour les obtenir affichez la source de la page d'accueil de votre blog - raccourcis <Ctrl><U> dans Firefox - et copier le code CSS situé entre les balises <style> et </style> ;

2.3. copiez les éléments graphiques récupérés depuis le thème que vous avez sélectionné ou d'autres

Enregistrez les images spécifiques du thème (voir dans médiathèque le dossier créé éventuellement par le thème - exemple : "blowup-images").
Il s'agit par exemple 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 : /public/blowup-images/page-t.jpg).

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

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

Étape 3 : personnalisation de la feuille de style

Depuis le thème sélectionné, cliquez sur le lien "Modifier les fichiers du thème". Dans la colonne de droite, localisez le ou les fichiers CSS.

Commencez par faire une sauvegarde du contenu de chacun des fichiers css, afin de pouvoir revenir en arrière en cas d'erreur.

Le fichier principal est "style.css". Il peut faire appel à d'autres fichiers css, par exemple dans le thème "Ductile", on trouve les instructions suivantes au début du fichier style.css :

@import url(rebase.css);
@import url(mediaqueries.css);

N'oubliez pas, si plusieurs formatages sont définis successivement pour un élement donné, c'est celui défini en dernier qui s'applique.

3.1. Le cas échant, appliquez les modifications que vous aviez faites en configurant le thème de départ (à l'étape 1.2)

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

Ajoutez, au bas de la feuille de style principale, le bloc de code CSS recopié depuis la source de la page à l'étape 2.2.

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

3.2. Dans la feuille de style appliquez des modifications supplémentaires

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 § 3.3.)

Un outil très puissant

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 supplémentaires > Développement web).
En sélectionnant des éléments dans la page avec l'outil de sélection (à gauche) de l'inspecteur vous pouvez repérer les différentes divisions et autres éléments.
Avec l'éditeur de style modifiez les feuilles de style à la volée pour voir en direct l'effet produit (les modifications ne sont pas enregistrables).

La vue adaptative, également accessible par le menu Outils supplémentiares, permet de voir comment se comporte le blog lorsque la taille de l'écran est réduite.

3.3. Ajout d'une police de caractère

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

Choisir une police libre sur le site fontlibrary.org

Option 1 : police distante

Sur la page de la police choisie, copier le lien inclut dans le code destiné à être inséré dans l'en-tête <head> ou la feuille de style.
Exemple : https://fontlibrary.org/face/unique
En suivant 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 https://fontlibrary.org, 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;
}

Option 2 : police locale

Téléchargez le fichier .ttf depuis le site fontfamily.org et téléversez-le dans votre médiathèque.

Insérer le code suivant - adapté du code récupéré sur le site, voir option 1 - dans votre feuille de style :

@font-face {
    font-family: 'UniqueRegular';
    src: url('/public/Unique.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Avantage de la police distante : si elle est mise à jour sur le site d'origine, vous bénéficiez automatiquement de celle-ci. Inconvénient : le chargement de votre page web est sensiblement ralenti, et si le site distant n'est pas accessible elle ne sera pas chargée. C'est pourquoi nous recommandons l'option police locale.

Usage de la police

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

#top h1 {font-family:UniqueRegular;}

Étape 4 : ajustement complémentaires, si besoin

Concerne le cas où vous utiliseriez le thème "Custom_theme". Nous prenons l'exemple où vous insérez dedans des éléments provenant du thème "Blowup".

4.1. modification des images

Dans le thème "Blowup" certaines images servent à obtenir des coins arrondis ou des bulles pour les commentaires. Elles se raccordent aux éléments voisins (rectangulaires).

Si vous changez 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 de la médiathèque (par exemple dans /blowup-images/).

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

4.3. 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 une des feuilles de style du thème Ductile.

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 la médiathèque. Elles sont appelées par le code CSS.

La feuille de style personnalisée 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>

}

Étape 5 : [facultatif] modification des fichiers html

Vous pouvez trouver utile d'apporter des modifications au squelette du blog.

Depuis le thème sélectionné, cliquez sur le lien "Modifier les fichiers du thème". Dans la colonne de droite, localisez les fichiers HTML à modifier.

ATTENTION : si vous modifiez l'un des fichiers HTML vous ne pourrez plus effectuer la mise à jour de Dotclear en un clic, il vous faudra télécharger et copier les mises à jour manuellement. Puis ré-insérer vos modifications dans les nouveaux fichiers du squelette.

Exemple 1 : vous souhaitez utiliser l'extension "postCount" (compteur de lectures de billets) - en conjonction avec l'extension "dcStats" (Statistiques)

Il vous faut insérer le code du compteur dans le squelette des billets (et des pages) :

<hr />
{{tpl:postCountIncrement}}
<small>{{tpl:postCountGet}} depuis le [date d'initialisation des compteurs].</small>

Pour le thème "Custom_theme", ajoutez le dans le fichier post.html :
sous {{tpl:include src="_simple-entry.html"}}
ainsi que dans le fichier page.html :
sous <p class="page-info">{{tpl:lang Published on}} {{tpl:EntryDate}} {{tpl:lang by}} {{tpl:EntryAuthorLink}}</p>

Pour le thème "Ductile", ajoutez le dans le fichier _simple-entry.html :
sous <div class="post-content">{{tpl:EntryContent}}</div>

et pour simplement visualiser le compteur, dans le fichier _entry-title.html ajoutez :

<small>{{tpl:postCountGet}} depuis le [date d'initialisation des compteurs]</small>

sous la ligne 37 : <a href="{{tpl:EntryURL}}#attachments" class="attach_count">{{tpl:EntryAttachmentCount}}</a></tpl:EntryIf>

Exemple 2 : vous souhaitez modifier le pied de page pour y ajouter une mention de droit d'auteur (elle n'est pas présente dans le thème Ductile)

Dans le fichier _footer.html ajoutez ainsi la notice de droit d'auteur (copyright) :

<p>{{tpl:BlogCopyrightNotice}} - {{tpl:SysPoweredBy}}</p>

Exemple 3 : vous voulez supprimer l'image en exergue que le thème Ductile ajoute aux billets réduits

Dans le fichier _entry-short.html, supprimez la ligne 36 :
{{tpl:EntryFirstImage size="t" class="post-icon"}}
et la ligne 47 :
{{tpl:EntryFirstImage size="t" class="post-icon"}}