✎ 24 août 2023 / J’ai choisi de modifier la mise en page des articles, et surtout celle des images pour éviter de devoir trop scroller pour suivre le texte (ancienne présentation > texte, grande image, texte, grande image, texte, grande image et texte final). J’ai préféré rassembler les images en liens cliquables. J’ai ainsi trois zones qui se suivent, marquées par un séparateur avec une petite icône: le texte, les images puis les commentaires. C’est suite à l’installation de l’extension wpDiscuz (dont j’ai été séduit par la présentation des messages) qui m’a confronté à ce problème. Après son activation, je me retrouvais avec un déséquilibre entre le rapport scrolling/quantité d’informations. Du coup, les “groupes” sont mieux représentés et la consultation en est améliorée. Du moins selon mon avis.
Le “thème” des images est rappelé dans la zone de titre qui procure l’ambiance visuelle de l’article. Le fond de remplissage précédemment programmé n’est donc plus nécessaire.
✎ 22 août 2023 / Une mise-à-jour de WordPress à provoqué un tsunami dans ma stabilité blogique nouvellement acquise.
Joie ou horreur ? – Je pencherai plutôt pour JOIE mais je prendrai le temps de développer ça dans les prochains jours.
✎ 23 mai 2023 / Dans mon second article je souhaitais y ajouter des photos. Je veux éviter de publier des mises en page complexes avec des textes habillant les images, des colonnes, etc… Je préfère une lecture de haut en bas avec les éléments les uns après les autres. Et ça permet aussi de garantir un affichage sans risque de déplacements inopinés. Avec ce choix, les images en portrait sont beaucoup trop grandes, je suis alors obligé de les réduire mais ça provoque deux grands espaces blanc à gauche et à droite et c’est pas très joli car ça casse le parallélisme des zones du site.
Il fallait donc les remplir avec un arrière-plan décoratif pas trop “agressif” pour laisser la focalisation sur la photo et ne pas alourdir le contenu. Après avoir trouvé un fond qui me plaisait, j’ai réussi à obtenir ce que je voulais en modifiant les paramètres que j’avais trouvés grâce à l’inspecteur d’élément mais je n’ai pas trouvé comment appliquer ces modifications en réel avec les ajouts de CSS additionnel dans mon thème. J’ai presque obtenu le résultat en bidouillant un bloc dans un bloc mais je n’arrivais pas à personnaliser les marges: j’avais des espaces en dessus et en dessous de l’image avec le fond et je voulais qu’il prolonge uniquement ma photo sur les côtés (tout en s’adaptant à la largeur des blocs de texte précédent et suivant) sans qu’il l’encercle!
La solution je l’ai trouvée en installant l’extension pour WordPress: Spectra. Grâce à elle, j’ai eu accès à des paramètres bien plus complets que ceux de base et j’ai pu, après deux jours de recherche, obtenir la présentation que je souhaitais en à peine 10 minutes.
✎ 16 mai 2023 / Mise en place du “Pied de page” et indication des droits de propriété.
Installation de l’extension Like Button Rating de Likebtn. Ce plugin est très pratique et ses possibilités de personnalisation sont étendues. Il permet également de configurer un widget avec les articles et les commentaires les plus aimés par les visiteurs.
✎ 15 mai 2023 / Malgré la définition du paramètre de la couleur des liens généraux du site (vert pomme), les liens du calendrier des publications restaient noirs. Je n’ai pas trouvé la solution dans la modification du thème. Tout heureux d’avoir découvert l’inspecteur d’élément dans mon navigateur, j’y ai trouvé le sélecteur en faisant un clic-droit sur mon lien et copié le code dans mon CSS personnalisé avec la bonne couleur hexadécimale:
/*modification de la couleur du lien du widget calendrier*/
.widget a{
color: #81d742;
}
.widget a:hover{
color: #81d742;
text-decoration: underline;
}
✎ 15 mai 2023 / Création de la catégorie “Les p’tits souvenirs du dimanche soir” en lien avec les publications du blog de C’est pas moi je l’jure.
✎ 12 mai 2023 / Écriture de mon premier code CSS personnalisé.
Je voulais modifier le fond du bloc de texte qui accompagne l’image dans mes listes d’archives. En changeant la valeur dans la personnalisation de mon thème (sous “Contenu”) cela changeait le fond de TOUS mes blocs. Après pas mal de tentatives et d’essais j’ai eu l’idée d’y indiquer une couleur moche inutilisée sur mon site: ainsi tous mes blocs sont devenus orange. J’ai chargé mon site dans Safari, affiché les “ressources de la page” du menu “développement” et sous l’onglet “Sources” j’ai fait une recherche du code hexadécimal moche #dd9933 pour trouver les sélecteurs qu’il définit. La couleur était présente dans le fichier user.css, elle donnait la valeur d’un grand groupe de sélecteur:
.layout-full #content, .layout-full_fixed #content, .layout-full_padding #content, .layout-parted .content-box, .layout-parted #secondary, .default404 .page-background, body.password-protected .page-background, .posts-list.search-no-results .layout-full #content, .posts-list.search-no-results .layout-full_fixed #content, .posts-list.search-no-results .layout-full_padding #content, .posts-list.search-no-results .layout-parted .content-box, .posts-list .layout-full #secondary, .posts-list .layout-full_fixed #secondary, .posts-list .layout-full_padding #secondary, .bricks-frame .formatter, .posts_horizontal .archive-item, .variant-under .caption, .albums-list-page .pre-content-box, .works-list-page .pre-content-box, .single-album .album-content, .single-album .formatter {
background-color:#dd9933
}
L’avantage de cette démarche est qu’on peut modifier en temps réel le code et voir sa page s’adapter en fonction sans risquer de bousiller son fichier original. J’ai donc effacé et remis chaque sélecteur (entre les virgules) afin de trouver celui qui modifiait le fond du bloc qui m’intéressait. Et bim ! .bricks-frame .formatter, .posts_horizontal .archive-item,.
Dans WordPress, j’ai alors reporté ces deux sélecteurs dans le code CSS personnalisé de mon thème en y définissant la couleur hexadécimale voulue (#f7f7f7) et en y ajoutant un petit commentaire en haut pour m’y retrouver plus tard:
/* fond des listes d'archives */
.bricks-frame .formatter,
.posts_horizontal .archive-item {
background-color: #f7f7f7
}
Ainsi, le navigateur charge le fichier user.css (original sans modification, donc en sécurité) en premier et termine par le code additionnel en appliquant les changements. Il me restait plus qu’à rétablir le fond normal de mes autres blocs en supprimant ma couleur orange moche dans “Contenu”.
Fier de moi!
Reste à voir si, dans la suite du développement du blog, cette modification n’agit pas sur d’autres éléments non voulus. Dans ce cas, je chercherai autre chose.
✎ 11 mai 2023 / Création de la page “Carnet de bord”.