Modification affichage "Réponse Rapide"

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Modification affichage "Réponse Rapide"

Message par Ancients le 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.


Dernière édition par Ancients le Mer 2 Mar 2016 - 18:19, édité 1 fois

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification affichage "Réponse Rapide"

Message par ◦Jay◦ le 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.



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2505
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification affichage "Réponse Rapide"

Message par Ancients le 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?



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



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




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

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification affichage "Réponse Rapide"

Message par ◦Jay◦ le 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.



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2505
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification affichage "Réponse Rapide"

Message par Ancients le 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" :



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



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.

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification affichage "Réponse Rapide"

Message par ◦Jay◦ le 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.



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2505
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification affichage "Réponse Rapide"

Message par Ancients le 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.

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification affichage "Réponse Rapide"

Message par ◦Jay◦ le 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.



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2505
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification affichage "Réponse Rapide"

Message par Ancients le 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 :



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



Le bouton envoyer ne veut pas prendre allez savoir pourquoi.

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

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification affichage "Réponse Rapide"

Message par ◦Jay◦ le 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;
}



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2505
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification affichage "Réponse Rapide"

Message par Ancients le 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!

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification affichage "Réponse Rapide"

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

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




◦Jay◦
Créactif
Créactif

Masculin
Messages : 2505
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification affichage "Réponse Rapide"

Message par Ancients le 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.

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification affichage "Réponse Rapide"

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

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



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2505
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification affichage "Réponse Rapide"

Message par Ancients le 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');
});

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification affichage "Réponse Rapide"

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

Le script n'est pas en place ?



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2505
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification affichage "Réponse Rapide"

Message par Ancients le 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.

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification affichage "Réponse Rapide"

Message par ◦Jay◦ le 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.



◦Jay◦
Créactif
Créactif

Masculin
Messages : 2505
Inscrit(e) le : 24/12/2014

http://www.forum-can-am.com/forum
◦Jay◦ a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modification affichage "Réponse Rapide"

Message par Ancients le 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

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum