Modification affichage "Réponse Rapide"

par Ancients Mar 1 Mar 2016 - 22:26

Détails techniques

Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://nsp-d3.forumofficiel.com/

Description du problème

Bonjour,

J'aimerais modifier l'apparence de la "Réponse rapide".

J'ai déjà de modifier le css avec ceci :

Code:: a.sceditor-button-code, a.sceditor-button-date, a.sceditor-button-time, a.sceditor-button-source { display: none; } #quick_reply { opacity: 0.8; } #textarea_content { min-width: 702px; }

Mais je n'arrive pas à changé la couleur de fond avec cette commande

Code:: background-color: ;

Merci pour votre aide.

par ◦Jay◦ Mer 2 Mar 2016 - 7:34

Bonjour Ancients, pour changer la couleur de cette élément, rendez-vous dans votre P.A.>Affichage>Images et Couleurs>Couleurs>Couleur de fond de l'éditeur (Zone de saisie de texte):Mettez la couleur désirée.

Pour changer la couleur de la barre de menu : Couleur de fond de l'éditeur (Barre de menu)

Bien à vous.

par Ancients Mer 2 Mar 2016 - 8:31

Bonjour,

Merci pour votre réponse, j'ai pu modifier en partie cette section.

Il me manque néanmoins quelques points :

1. Comment changer la couleur de texte dans les zones telles que : Réponse Rapide, Editer ?

2. J'aimerai pouvoir modifier la couleur de fond de ces boutons ou les boutons eux-mêmes, quels options s'offrent à moi?

rapide - Modification affichage "Réponse Rapide" Screen13

rapide - Modification affichage "Réponse Rapide" Screen13

3. J'aimerai pouvoir modifier ces boutons en les remplaçant par une image

rapide - Modification affichage "Réponse Rapide" Screen14

4. J'ai un problème d'affichage avec ce style de texte sur le forum

rapide - Modification affichage "Réponse Rapide" Screen15

rapide - Modification affichage "Réponse Rapide" Pn_aff11

Au passage de ma souris, le texte devient foncé/noir.
J'aimerai changer le hover sur ces zones par la couleur de mon choix

5. Puis-je configurer une couleur de texte seulement pour les administrateurs par exemple?

Merci d'avance pour votre aide précieuse

par ◦Jay◦ Mer 2 Mar 2016 - 8:46

Re,

Pour les réponses à vos questions, ce tutoriel va vous aider.

Pour changer l'apparence des boutons pré-visualiser et envoyer, je vous renvoie à ce sujet fraîchement résolu.

Bien à vous.

par Ancients Mer 2 Mar 2016 - 10:56

Bonjour,

Merci Jay pour votre réponse et vos liens qui correspondent à mes attentes, mais en essayant votre code pour les boutons, rien ne se passe (cf. EDIT).

Il me reste encore quelques points à résoudre :

1. J'aimerai modifier de la même façon ces boutons la "Aller" :

rapide - Modification affichage "Réponse Rapide" Screen18

rapide - Modification affichage "Réponse Rapide" Screen18

2. Comment modifier la forme (texte, couleur fond/texte, etc) de cette section recherche?

rapide - Modification affichage "Réponse Rapide" Screen19

3. Puis-je configurer une couleur de texte seulement pour les administrateurs par exemple?

EDIT : pour modifier les boutons j'ai essayé votre code mais il ne marche pas sur mon forum, aucun changement n'est observable

Code:: input.liteoption { background-image: url('http://image.noelshack.com/fichiers/2016/09/1456834048-envoyer.png'); height:31px; width:106px; color:#000; border:none; } input.mainoption { background-image: url('http://image.noelshack.com/fichiers/2016/09/1456834048-envoyer.png'); height:31px; width:106px; color:#000; border:none; }

Merci d'avance pour votre aide précieuse et rapide.

par ◦Jay◦ Mer 2 Mar 2016 - 11:14

Re, le bouton "aller" devrait prendre le même design que les boutons envoyer et prévisualiser.

Pour cette pop-up :

Code:: .overview.row3{background-color:#fff}

Changera la couleur de fond.

Code:: .overview.row3,.overview.row3 a,label{color:#fff}

Changera la couleur de texte, si vous souhaitez modifier la police d'écriture, il vous faudra agir comme tel :

-Allez sur http://www.google.com/webfonts/
-Choisissez la police que vous souhaitez
-Cliquez sur Quick-use
-Copiez le code donné à Add this code to your website
-Collez le dans votre template Overall_header après la balise <head> puis validez
-Copiez le css donné à Integrate the fonts into your CSS et ajoutez le à .overview.row3,.overview.row3 a,label dans votre feuille de style CSS.

Pour votre dernière question, je ne saurai vous répondre, peut-être avec un script.

Bien à vous.

par Ancients Mer 2 Mar 2016 - 11:33

Bonjour Jay (encore une fois ne va pas tuer personne Smile

),

Je suis confronté au même soucis pour l'histoire des boutons "Prévisualiser" "Envoyer" "Aller".

J'ai copié collé vos codes dans mon CSS pour observer un simple changement mais les boutons ne semblent pas être affectés.

Pour ce qui est de la police, j'avais déja fait des recherches et trouvé pour Webfonts mais ce n'est pas ma question, j'ai du mal m'exprimer, pardonnez-moi.

Je recherche en ce qui concerne la police à en utiliser une provenant d'un autre site (il n'y a pas celle que je recherche sur Webfonts).

Merci d'avance Jay.

par ◦Jay◦ Mer 2 Mar 2016 - 14:42

Pour vos boutons, essayez comme ceci :

Code:: input.button2{ background-image: url('http://image.noelshack.com/fichiers/2016/09/1456834048-envoyer.png'); height:31px; width:106px!important; color:#000!important; border:none; font-size:10px; }

Mais ce code est adapté à l'image que le membre précédent désirait, si vous n'arrivez pas à modifier le code, donnez moi votre image.

Au sujet de la police d'écriture, il faudrait ouvrir un autre sujet car si ce n'est pas une police d'écriture "classique", je ne pourrai vous aider plus.

Bien à vous.

par Ancients Mer 2 Mar 2016 - 15:06

Votre nouveau code marche très bien à l'exception de l'espace "Editer" je ne sais pas pourquoi, voici les captures d'écrans :

rapide - Modification affichage "Réponse Rapide" Screen21

rapide - Modification affichage "Réponse Rapide" Screen21

Voici le problème sur l'édition de post :

rapide - Modification affichage "Réponse Rapide" Screen22

Le bouton envoyer ne veut pas prendre allez savoir pourquoi.

Merci d'avance, votre aide m'est très précieuse.

par ◦Jay◦ Mer 2 Mar 2016 - 15:13

Pour ce bouton, ce sera :

Code:: input.button1{ background-image: url('http://image.noelshack.com/fichiers/2016/09/1456834048-envoyer.png'); height:31px; width:106px!important; color:#000!important; border:none; font-size:10px; }

Vous pouvez raccourcir le code en le mettant comme ceci pour les deux :

Code:: input.button2,input.button1{ background-image: url('http://image.noelshack.com/fichiers/2016/09/1456834048-envoyer.png'); height:31px; width:106px!important; color:#000!important; border:none; font-size:10px; }

par Ancients Mer 2 Mar 2016 - 15:43

C'est parfait Jay, merci beaucoup!

Un problème de résolu en entraine un autre à résoudre hélas pour moi, avez vous une piste/code pour :

Configurer une couleur de texte seulement pour les administrateurs ou modérateurs par exemple?

J'ai bien lu pour créer un nouveau topic en ce qui concerne la police de texte.

Merci Jay!

par ◦Jay◦ Mer 2 Mar 2016 - 16:04

Pour la police d'écriture, vous pourriez le faire je pense en adaptant ce tutoriel.

par Ancients Mer 2 Mar 2016 - 17:13

Pour qu'un rang ait une couleur d'écriture attribuée lorsqu'il écrit (par exemple que les messages écrient par les administrateurs soient en rouge par défaut), je ne vois pas quoi faire d'autre à part insérer :

Code:: color: #XXXXXX !important;

dans

Code:: div .AdministrateurDegrade { background-image: url("lien_du_degradé"); background-position: bottom right; }

Je pense que ça doit se passer dans le javascript mais c'est au dessus de mes maigres (très maigres) capacités en codage.

par ◦Jay◦ Mer 2 Mar 2016 - 17:16

C'est un code CSS, mais cela devrait être ça. Very Happy

par Ancients Mer 2 Mar 2016 - 17:21

Ne me faites pas passer pour ce que je ne suis pas Smile

Je vous faisais part de ma tentative misérable à court d'idées dans le CSS mais qui est un échec.

Je pense que la solution doit se passer dans le javascript ci-dessous! Smile

Code:: $(function() { $('.Administrateur').parent().parent().parent().parent().parent().addClass('AdministrateurDegrade'); });

par ◦Jay◦ Mer 2 Mar 2016 - 17:23

Le script n'est pas en place ?

par Ancients Mer 2 Mar 2016 - 17:29

Tout est en place : le script, le CSS et le nom du rang. J'ai suivit bêtement les instructions du tuto que vous m'avez conseillé.

Mais comme je vous ai dit, à part ajouter :

Code:: color: #XXXXXX !important;

dans le CSS, sans résultat, je ne sais pas quoi faire d'autre. Le javascript est trop complexe pour moi.

par ◦Jay◦ Mer 2 Mar 2016 - 17:56

En effet, cela ne fonctionne pas, vous pouvez tout au plus changer la couleur de fond, je ne saurai vous aider plus, il vous faudrait un script mais je ne saurai le faire.

Vous devriez ouvrir un nouveau sujet pour ce problème la.

Bien cordialement.

par Ancients Mer 2 Mar 2016 - 18:12

D'accord, merci beaucoup de m'avoir permis d'avancer grace à votre aide.

A très vite sur d'autres sujets Smile

Résolu, merci Jay

Modification affichage "Réponse Rapide"