Dotclear

Vous n'êtes pas identifié(e).

Annonce

#1 2011-08-04 21:07:55

lynxxe
Membre
Lieu : Normandie
Inscription : 2011-06-17
Site Web

comment modifier la présentation des commentaires ?

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

#2 2011-08-05 06:43:41

pressecologie
Membre
Lieu : île de la Réunion
Inscription : 2011-02-21
Site Web

Re : comment modifier la présentation des commentaires ?

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

#3 2011-08-05 06:47:54

pressecologie
Membre
Lieu : île de la Réunion
Inscription : 2011-02-21
Site Web

Re : comment modifier la présentation des commentaires ?

lynxxe a écrit :

la case des commentaires

Est-ce les cases de saisi du formulaire afin de laisser un commentaire ?

Hors ligne

#4 2011-08-05 07:58:21

wonder
Membre
Inscription : 2007-08-04

Re : comment modifier la présentation des commentaires ?

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

#5 2011-08-05 08:53:31

Mirovinben
M comme Mathusalem
Lieu : Dole (Jura)
Inscription : 2007-02-06
Site Web

Re : comment modifier la présentation des commentaires ?

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

Hors ligne

#6 2011-08-05 09:09:49

Kozlika
Modo dcTeam
Inscription : 2004-05-08
Site Web

Re : comment modifier la présentation des commentaires ?

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

#7 2011-08-05 14:50:30

lynxxe
Membre
Lieu : Normandie
Inscription : 2011-06-17
Site Web

Re : comment modifier la présentation des commentaires ?

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

#8 2011-08-05 15:34:02

Kozlika
Modo dcTeam
Inscription : 2004-05-08
Site Web

Re : comment modifier la présentation des commentaires ?

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

#9 2011-08-05 16:23:46

lynxxe
Membre
Lieu : Normandie
Inscription : 2011-06-17
Site Web

Re : comment modifier la présentation des commentaires ?

Kozlika, bien sûr, j'aurais dû y penser, voici l'adresse : http://ledesor.net

Hors ligne

#10 2011-08-06 07:32:27

Mirovinben
M comme Mathusalem
Lieu : Dole (Jura)
Inscription : 2007-02-06
Site Web

Re : comment modifier la présentation des commentaires ?

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

Hors ligne

#11 2011-08-06 11:05:44

lynxxe
Membre
Lieu : Normandie
Inscription : 2011-06-17
Site Web

Re : comment modifier la présentation des commentaires ?

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

#12 2011-08-06 12:16:27

Mirovinben
M comme Mathusalem
Lieu : Dole (Jura)
Inscription : 2007-02-06
Site Web

Re : comment modifier la présentation des commentaires ?

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.

Hors ligne

#13 2011-08-06 12:42:38

lynxxe
Membre
Lieu : Normandie
Inscription : 2011-06-17
Site Web

Re : comment modifier la présentation des commentaires ?

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

#14 2011-08-06 12:57:48

pierrevg
Membre
Inscription : 2005-04-13
Site Web

Re : comment modifier la présentation des commentaires ?

Bonjour,

Ça serait plus pratique pour nous que tu renseignes ton profil en y casant l'url de ton blog, plutôt que de l'indiquer dans une hypothétique réponse...

D'avance, merci.

En ligne

#15 2011-08-06 15:12:42

lynxxe
Membre
Lieu : Normandie
Inscription : 2011-06-17
Site Web

Re : comment modifier la présentation des commentaires ?

Bonjour pierrevg
Voilà, c'est fait.
(et, contente de te lire) ;-)

Hors ligne

#16 2011-08-06 16:25:19

Mirovinben
M comme Mathusalem
Lieu : Dole (Jura)
Inscription : 2007-02-06
Site Web

Re : comment modifier la présentation des commentaires ?

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

Hors ligne

#17 2011-08-07 14:53:42

lynxxe
Membre
Lieu : Normandie
Inscription : 2011-06-17
Site Web

Re : comment modifier la présentation des commentaires ?

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

#18 2011-08-07 15:02:52

Jean-Michel
Modérateur à ailes d'ange
Lieu : Paris
Inscription : 2006-08-22
Site Web

Re : comment modifier la présentation des commentaires ?

Bonjour,

Il y a un soucis, ce bout de code n'est pas valide.

lynxxe a écrit :

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

#19 2011-08-07 15:31:14

Mirovinben
M comme Mathusalem
Lieu : Dole (Jura)
Inscription : 2007-02-06
Site Web

Re : comment modifier la présentation des commentaires ?

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)

Hors ligne

#20 2011-08-07 15:43:15

lynxxe
Membre
Lieu : Normandie
Inscription : 2011-06-17
Site Web

Re : comment modifier la présentation des commentaires ?

Oups, je n'ai pas mis le  dans mon code (mais ça aurait pu !)  ;-))

Hors ligne

#21 2011-08-07 15:44:45

lynxxe
Membre
Lieu : Normandie
Inscription : 2011-06-17
Site Web

Re : comment modifier la présentation des commentaires ?

ah zut, je ne maitrise pas les balises, je voulais juste dire que je n'ai pas mis dans mon code les balises de couleur.

Hors ligne

#22 2011-08-07 15:51:26

Mirovinben
M comme Mathusalem
Lieu : Dole (Jura)
Inscription : 2007-02-06
Site Web

Re : comment modifier la présentation des commentaires ?

J'avais compris.

Le résultat de tes bidouilles est réussi. Ça me plaît beaucoup.

Hors ligne

#23 2011-08-07 15:58:02

lynxxe
Membre
Lieu : Normandie
Inscription : 2011-06-17
Site Web

Re : comment modifier la présentation des commentaires ?

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

Pied de page des forums

Sites map