Vous n'êtes pas identifié(e).
13 février 2024 Sortie de Dotclear 2.29
Bonjour,
J'utilise le thème Foliage (2.3.1). Je voudrais dans un premier temps agrandir la case des commentaires et la taille de la police. Et je ne sais pas du tout comment faire cela ni où cette manip se passe.
Attention, je suis assez nulle en technique, je nécessite du B.A-BA.
Merci à qui pourra m'aider ou me renvoyer vers une doc.
Hors ligne
Bonjour,
1- Tu te connecte à l'administration du site.
2- Tu vas dans le menu apparence du blog
3- vérifie que ton thème soit sélectionné puis clique sur éditeur de thème
4- repère dans la colonne de droite Fichiers CSS
5- tu clique sur style.css
Après il faut trouver ce qu'il faut modifier.
Essaie de modifier la taille de la police dans ce fichier style.css sachant que :
Les symboles
/*
sont des commentaires.
/* commentaire pour distinguer à quelle partie du blog les règles s'appliquent */
Les règles de taille de police ressemble à ça :
font: 62.5%/1.5em Arial,sans-serif;
ou encore
font-size: 12px;
Si tu change le chiffre associé à l'unité % ou em ou px.
Voila pour le B.A.BA. Tu peux faire quelques tests en enregistrant bien les modifications et en rechargeant ta page pour tester.
Ensuite il faut apprendre les règles de base du css
Attention car il se peut qu'une seul taille de police soit utilisé pour tout ton site. Dans ce cas, il faut créer une nouvelle règle css pour des parties bien spécifiques de ton blog.
Voila pour le principe.
A+
Hors ligne
la case des commentaires
Est-ce les cases de saisi du formulaire afin de laisser un commentaire ?
Hors ligne
Bonjour linxxe
... je pense que tu parles du thème ReFoliage ?
Pour agrandir la taille de la police, tu vas, comme te l'a indiqué pressecologie, dans le fichier style.css, et là ça se passe tout au début (ou presque), tu vas voir :
body {
background: #333 url('img/banner_green.jpg') top left no-repeat;
font: 0.7em Arial,sans-serif;
color: #DDD;
}
Tu dois donc modifier la valeur du paramètre font : par défaut, tu vois que c'est 0.7em
Alors là, pour comprendre un petit peu, je te renvoie par exemple au Site du Zéro dans lequel on trouve cette explication :
... On doit indiquer la taille du texte par rapport à la taille normale de la police. Je m'explique : "1em" signifie "Taille normale". Si vous mettez un nombre supérieur (généralement un nombre décimal) comme "1.3em", le texte aura une taille 1,3 fois plus grande. De même pour réduire : "0.8em" et votre texte aura une taille 0,8 fois plus petite.
... donc, si tu veux agrandir la taille, il faudra donner une valeur supérieure à 0.7em ;-)
Pour les commentaires... ça se situe un peu plus bas dans le "chapitre" /* Forms----- */... mais là, mes compétences ne sont pas "au top" ; de toutes façons, tu verras que la zone de saisie des commentaires peut être agrandie "à la main" (dans le coin en bas à droite)... peut-être que ça te suffit ?
Bon courage !
Hors ligne
lynxxe, si tu ne veux changer la taille que pour les commentaires et la pré-visu :
- ouvre style.css comme dit plus haut,
- cherche dans le texte la zone commençant par
/* Commentaires
-------------------------------------------------------- */
- descends un peu pour aller sur la ligne
#comments dd *, #pings dd *, dd.comment-preview * { padding: 5px 0; font-size: 1em; }
- et remplace le 1em par 1.3em ou toute autre valeur à ta convenance mais > 1em
Le B.A.BA : https://abc.dotaddict.org
La doc DC2 : https://fr.dotclear.org/documentation/2.0
Mes extensions : https://www.mirovinben.fr/blog/index.ph … pluginsDC2
Mes marqueurs de template : https://www.mirovinben.fr/blog/index.php?post/id3553
Hors ligne
Mmm j'ai l'impression que lynxxe parle du formulaire des commentaire, zone de saisie : dimension de la zone elle-même et taille des caractères dans cette zone...
La documentation : http://doc.dotclear.net/2.0/fulltoc
Le module de recherche du forum : http://www.dotclear.net/forum/search.php ?
Hors ligne
Merci de vos réponses, je vais tester cela demain à tête reposée ! ;-))
C'est bien le thème Refoliage.
Il s'agit bien de ce que Kozlika a compris = agrandir la zone où l'on saisit les commentaires (qui ressemble aujourd'hui à un timbre poste) et la police qui va dedans. Que ce soit effectif aux 3 niveaux = écriture, prévisualisation, lecture.
Partout ailleurs la taille de police est OK.
Je suis rassurée de pouvoir noter mes modifs et tester. Et de ne pas avoir à utiliser le bidule FTP.
Je vous tiens au courant de l'avancée.
Hors ligne
On pourra mieux t'aider si tu nous donnes l'adresse du blog :-)
La documentation : http://doc.dotclear.net/2.0/fulltoc
Le module de recherche du forum : http://www.dotclear.net/forum/search.php ?
Hors ligne
Kozlika, bien sûr, j'aurais dû y penser, voici l'adresse : http://ledesor.net
Hors ligne
Pour régler la taille des caractères dans l'affichage des commentaires et de la prévisualisation, mon message en #5 reste bon.
Pour la taille dans les zones de saisie, c'est un peu plus bas, après
/* Forms
-------------------------------------------------------- */
...là :
#comment-form input, #comment-form textarea {
font: 1em Arial,sans-serif;
background: #333;
border: 1px solid #666;
padding: 5px;
width: 60%;
color: #FFF;
}
Remplace le 1em par 1.3em ou toute autre valeur à ta convenance...
Le B.A.BA : https://abc.dotaddict.org
La doc DC2 : https://fr.dotclear.org/documentation/2.0
Mes extensions : https://www.mirovinben.fr/blog/index.ph … pluginsDC2
Mes marqueurs de template : https://www.mirovinben.fr/blog/index.php?post/id3553
Hors ligne
C'est fait ! J'ai à peine agrandi la police, pour rester en cohérence avec celle des billets, mais c'est plus lisible.
Reste la dimension de la case de saisie des commentaires qui est vraiment petite, mais c'est juste un détail.
Je suis super contente d'être arrivée à le faire et vous remercie.
Du coup, je m'en vais relire les parties CSS sur l'ABC Dotclear car évidemment ça me plairait beaucoup
de mieux comprendre toute cette partie style.css et faire un peu de retouches esthétiques !
Je récapitule la démarche si cela peut servir à quelqu'un d'autre.
1- Se connecter à l'administration du site
2- Aller dans le menu apparence du blog
3- Vérifier que son thème soit sélectionné puis cliquer sur éditeur de thème
4- Repérer dans la colonne de droite Fichiers CSS
5- Cliquer sur style.css
Pour régler la taille de caractères des commentaires = affichage et prévisualisation :
1- Chercher dans le texte la zone commençant par
/* Commentaires
-------------------------------------------------------- */
2- Descendre un peu pour aller sur la ligne
#comments dd *, #pings dd *, dd.comment-preview * {
padding: 5px 0; font-size: 1em; }
3- Et remplacer le 1em par 1.3em ou toute autre valeur à convenance mais > 1em
Pour régler la taille de caractères des commentaires = saisie :
1- Aller à
/* Forms
-------------------------------------------------------- */
2- Jusqu'à
#comment-form input, #comment-form textarea {
font: 1em Arial,sans-serif;
background: #333;
border: 1px solid #666;
padding: 5px;
width: 60%;
color: #FFF;
}
3- Remplace le 1em par 1.3em ou toute autre valeur à convenance...
Enregistrer les modifs
Et Actualiser pour voir les modifs sur son blog.
Hors ligne
Pour la largeur de la zone de saisie du texte, il faut regarder du côte de textarea :
#comment-form input, #comment-form textarea {
font: 1.1em Arial,sans-serif;
background: #333;
border: 1px solid #666;
padding: 5px;
width: 60%;
color: #FFF;
}
Le délicat c'est qu'on est en % de largeur et pas en pixels.
Essaye d'ajouter ça juste après le paquet cité :
#comment-form textarea {
width: 80%;
}
Peut-être que 80% est un peu beaucoup. Je n'ai pas firebug pour Firefox sous la main.
Le B.A.BA : https://abc.dotaddict.org
La doc DC2 : https://fr.dotclear.org/documentation/2.0
Mes extensions : https://www.mirovinben.fr/blog/index.ph … pluginsDC2
Mes marqueurs de template : https://www.mirovinben.fr/blog/index.php?post/id3553
Hors ligne
Mirovinben, super ! J'ai en prime gagné un fond de couleur blanche pour la saisie, que je trouve plus agréable que le gris compte tenu d'un espace qui reste restreint.
J'ai même mis width: 90%; (mais à vrai dire, je ne vois pas la différence versus 80%).
Alors évidemment, les icônes sont mal alignées au-dessus de la case... mais je ne voudrais pas abuser. ;-) (d'autant qu'elles ont toujours été mal alignées).
C'est drôlement agréable de pouvoir/savoir modifier la présentation d'un blog.
Merci, merci.
Hors ligne
Lynxxe, il me semble qu'avec ce que je t'ai proposé (ajouter les 3 lignes juste après et non modifier le bloc "#comment-form input, #comment-form textarea") seule la zone texte aurait dû changer de largeur.
Explication : une intervention sur le bloc commençant par "#comment-form input, #comment-form textarea" impacte à la fois les saisies sur une ligne (#comment-form input) et la saisie du commentaire (#comment-form textarea).
Quant aux 90% ou 80%, avec la marge à gauche, les "boîtes" ne peuvent pas sortir du formulaire (je dis ça de mémoire). Il est donc probable que même un 70% convienne.
Sinon, personnellement, le fond blanc me dérange. J'aimais mieux avant. (l'âge, les yeux... toussa).
Le B.A.BA : https://abc.dotaddict.org
La doc DC2 : https://fr.dotclear.org/documentation/2.0
Mes extensions : https://www.mirovinben.fr/blog/index.ph … pluginsDC2
Mes marqueurs de template : https://www.mirovinben.fr/blog/index.php?post/id3553
Hors ligne
Mirovinben, voici mes manips, pas sûre d'avoir bien compris en fait...
Récap des manips
à l'origine, ça se présente comme ça
#comment-form input, #comment-form textarea {
font: 1.1em Arial,sans-serif;
background: #333;
border: 1px solid #666;
padding: 5px;
width: 60%;
color: #FFF;
..............................................................................................................................
1/ j'ai modifié de cette façon = case agrandie mais fond blanc (au lieu de gris)
#comment-form input, #comment-form textarea {
[color=#FF0000]width: 80%;[/color]
}
font: 1.1em Arial,sans-serif;
background: #333;
border: 1px solid #666;
padding: 5px;
width: 60%;
color: #FFF;
...................................................................................................................................
2/ nouvel essai à l'instant = case agrandie et fond gris récupéré, je pense que c'est bien (mais est-ce ce qu'il fallait faire ?)
#comment-form input, #comment-form textarea {
font: 1.1em Arial,sans-serif;
background: #333;
border: 1px solid #666;
padding: 5px;
[color=#FF0000]width: 80%;[/color]
color: #FFF;
}
Bonne fin de journée et merci.
Hors ligne
Bonjour,
Il y a un soucis, ce bout de code n'est pas valide.
1/ j'ai modifié de cette façon = case agrandie mais fond blanc (au lieu de gris)
#comment-form input, #comment-form textarea { [color=#FF0000]width: 80%;[/color] } font: 1.1em Arial,sans-serif; background: #333; border: 1px solid #666; padding: 5px; width: 60%; color: #FFF;
N'est-ce pas plutôt :
#comment-form input, #comment-form textarea {
width: 80%;
font: 1.1em Arial,sans-serif;
background: #333;
border: 1px solid #666;
padding: 5px;
width: 60%;
color: #FFF;
}
Hors ligne
Je proposais ça pour ne toucher qu'à la zone "commentaire" :
#comment-form input, #comment-form textarea {
font: 1.1em Arial,sans-serif;
background: #333;
border: 1px solid #666;
padding: 5px;
width: 60%;
color: #FFF;
}
#comment-form textarea {
width: 80%;
}
Sinon, pour confirmer ce qu'a écrit Jean-Michel la présence de
[color=#FF0000]width: 80%;[/color]
dans ton récapitulatif vient d'un copier/coller trop efficace de ma proposition faite sur le forum avec une insertion intempestive de codes qui n'ont rien à voir avec la syntaxe du langage CSS (c'était pour mettre en rouge le paramètre à modifier)
Le B.A.BA : https://abc.dotaddict.org
La doc DC2 : https://fr.dotclear.org/documentation/2.0
Mes extensions : https://www.mirovinben.fr/blog/index.ph … pluginsDC2
Mes marqueurs de template : https://www.mirovinben.fr/blog/index.php?post/id3553
Hors ligne
J'avais compris.
Le résultat de tes bidouilles est réussi. Ça me plaît beaucoup.
Le B.A.BA : https://abc.dotaddict.org
La doc DC2 : https://fr.dotclear.org/documentation/2.0
Mes extensions : https://www.mirovinben.fr/blog/index.ph … pluginsDC2
Mes marqueurs de template : https://www.mirovinben.fr/blog/index.php?post/id3553
Hors ligne
Yess ! Ca y est !
Mirovinben, ta proposition 19 fonctionne parfaitement (c'est celle que tu m'as indiquée au départ d'ailleurs mais je n'avais pas compris où placer le bidule). Là c'est fait. Ma case commentaires est agrandie au mieux (j'ai opté pour 90%), le fond reste gris, et les cases d'identification du commentateur ont retrouvé leur format d'origine. Super !
Merci.
Hors ligne
Vous n'êtes pas identifié(e).