[ModernBB] Gérer l'apparence de la Barre de menu du fond de l'éditeur

[Maldan]

Détails techniques

Version du forum : ModernBB
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
Problème apparu depuis : 15/10/2017
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour à tous !

Le problème que je rencontre aujourd'hui est le suivant ;

J'aimerais en fait modifier la couleur de survol de "Icône du sujet" et de "Titre du sujet" dans le menu pour poster un nouveau sujet. La couleur par défaut est le noir et le souci c'est que la couleur du fond de la page de mon forum est très foncé et donc ça ne colle pas vraiment car ils deviennent illisibles quand on passe la souris dessus.

Dans le même temps, j'aimerais également créer un encadrement pour les boutons "Spoilers" "Gras" "Italique" etc... dans le menu, comme sur le forum de forumactif même ou bien comme sur ce screen :

En vous remerciant d'avance,

Maldan

[◦Jay◦]

Re Maldan, pour la couleur au survol des deux premiers éléments :

Code:

.fields1 label:hover{color:#ececec;}

Si vous souhaitez changer la couleur "en mode normal" (sans le passage de la souris) :

Code:

.fields1 label{color:#ececec;}

---

Pour les boutons :

Code:

.sceditor-group{
background-color: #B6F101 !important;
border-radius:5px !important;
}

Le border-radius de 5px correspond aux coins arrondis.

Bien à vous.

[Maldan]

Super merci, la couleur change effectivement lorsqu'on survole les deux premiers éléments mais deviennent noirs lorsqu'on survole la barre de texte pour le titre ou les autres boutons pour "Résolu" etc...

Aussi, est-ce qu'il y a un moyen de créer un encadrement pour la zone de saisie ainsi que sa barre de menu ?

Encore merci pour l'aide que tu m'apportes Jay, c'est très sympa !

[◦Jay◦]

Hello, pour la couleur des éléments au survol des icônes ou de la barre de texte :

Code:

fieldset dl:hover dt label{color:#ececec;}

Pour votre deuxième question, je ne suis pas certain d'avoir tout compris, voila pour ce que j'ai compris, si ça n'est pas cela, n'hésitez pas à me faire un screen.

Code:

#postingbox.panel fieldset{background-color:#ececec;
padding:0px 0px 10px 10px;
border-radius:5px;}

Je ne pense pas que ce soit la peine de vous l'expliquer mais bon, background-color:#ececec=couleur de fond, padding:0px 0px 10px 10px=marge intérieur, border-radius:5px=bords arrondis.

Bien à vous.

[Maldan]

Pour les éléments en survol, le souci est réglé mais pas l'encadrement ! Voici en image mon interface actuel et ce que je souhaiterais modifier :




Exemple type :

[◦Jay◦]

Pour l'encadrement :

Code:

#message-box textarea{border:1px solid #ff0000;}

Pour les smileys, il faudra un JS, il faudrait ouvrir un nouveau sujet.

Cordialement.

[Maldan]

La couleur du trait du dessus ne change pas mais sinon c'est exactement ce que je recherche.



Pour le deuxième point, je vais en ce cas créer un nouveau sujet. Encore merci !

[◦Jay◦]

Voici pour la barre de menu :

Code:

.sceditor-toolbar{border-top:1px solid #ff0000 !important;
border-left:1px solid #ff0000 !important;
border-right:1px solid #ff0000 !important;}

Bien à vous.

[Maldan]

Rebonjour !

Petits soucis, l'encadrage ne s'apparente pas sur la gauche du menu de l'édition et la couleur du trait qui sépare le menu et la zone de texte ne change pas.

Voici le menu actuel :



Cordialement,

Maldan

[◦Jay◦]

Avez-vous bien recopié le code ? Auriez-vous un compte test que je puisse me rendre compte plus rapidement ?

[Maldan]

Oui, j'ai bien recopié le code dans le CSS, aucun doute là dessus ! Un compte test ? C'est à dire ?

[◦Jay◦]

Héhé, votre code est erroné...

Il est actuellement comme ceci :

Code:

.sceditor-toolbar {
    border-left: 1px solid #fE8A11E!important;
    border-right: 1px solid #E8A11E!important;
    border-top: 1px solid #E8A11E!important;
}

La couleur #fE8A11E n'existe pas.

Donc, mettez-le comme ceci (retrait de la couleur que vous souhaitiez en prime).

Code:

.sceditor-toolbar {
    border-left: 1px solid #E8A11E!important;
    border-right: 1px solid #E8A11E!important;
    border-top: 1px solid #E8A11E!important;
    border-bottom:none !important;}

Bien à vous.

[Maldan]

Ah mince !

Eh bien problème résolu, grand merci à toi !

[◦Jay◦]

Avec plaisir.

[Maldan]

Ah mince, je viens de me rendre compte que pour l'apparence de la zone de texte pour les Réponses rapides n'a pas changée cependant.

Preuve en image :



D'ailleurs, la couleur des messages dans cette zone est noire et non pas claire comme dans l'autre. Zut ^^'

[◦Jay◦]

Bonjour Maldan, désolé pour le retard, j'étais absent hier... alors, pour la réponse rapide :

Code:

.sceditor-container{
    border: 2px solid #E8A11E !important;
}
.sceditor-container .sceditor-toolbar{
    border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom:2px solid #E8A11E !important;
}

Pour la couleur du texte :

Code:

.sceditor-container textarea{color:#fff;}

Mais cela va poser un problème en mode Wysiwyg, il va falloir mettre un script, donc dans votre PA>Modules>Javascript, vous créez un nouveau JS, cochez sur les sujets et ajoutez :

Code:

$(function(){ $(function() {
          $('.sceditor-container iframe').contents().find('head').append('<style type="text/css">
body, p {
   
    color:#fff; 
}
</style>')
        })});

Par-contre, ces nouveaux codes vont rentrer en conflit avec ceux de l'éditeur de nouveaux sujets, il faudra donc retirer les anciens codes pour les remplacer par celui-ci :

Code:

#message-box .sceditor-container {
  border:2px solid #E8A11E !important;}

Cette fois, tout devrait être ok.

[Maldan]

Bonjour ! La couleur du texte dans les messages rapides n'a pas été modifiée. Peut-être une erreur de ma part encore une fois mais je pense avoir tout suivi sans fautes, voici mon css concernant ces codes :

Code:

/*Menu zone de texte pour nouveau sujet*/
.fields1 label:hover{color:#B6F101;}
.fields1 label{color:#ececec;}

.sceditor-group{
background-color: #BDB5A6 !important;
border-radius:5px !important;
}

fieldset dl:hover dt label{color:#B6F101;}


/*TEST*/
.sceditor-container{
    border: 2px solid #E8A11E !important;
}
.sceditor-container .sceditor-toolbar{
    border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom:2px solid #E8A11E !important;
}
.sceditor-container textarea{color:#BDB5A6;}

#message-box .sceditor-container {
  border:2px solid #E8A11E !important;}

Merci à toi !

[◦Jay◦]

La couleur correspond à ce code :

Code:

.sceditor-container textarea{color:#BDB5A6;}

Si cela ne fonctionne pas, écrivez-le comme ceci :

Code:

.sceditor-container textarea{color:#BDB5A6 !important;}

[Maldan]

Ça fonctionne, c'est parfait !

Merci pour ton temps et ton efficacité, Jay !

Je marque ce sujet comme résolu !