Effet de style (CSS) des boutons BBC

[0Connors]

Bonjour à tous,

Voilà mon problème je viens d'ajouter un bouton BBC pour une fonction de tableur excel, seulement lorsque se bouton apparaît dans la liste de mes boutons. Il n'est pas soumis au même CSS (?) lorsque je passe ma souris sur l'icône il n'y a aucun effet de surbrillance (Rouge sur mon forum) comme pour les autres, et le bouton n'as pas de bords arrondies.

Il y a t'il un moyen d'affecter le CSS des autres boutons à celui-ci ? (Voir fichier joint "boutons BBC").

Autre chose, j'ai un problème de couleur pour les listes déroulantes "Police du texte", "Taille du texte", "Changer la couleur" et "Icône du message. La couleur du texte est a peine visible sous chrome tandis que sous IE9 les couleurs sont "normales". Comment puis-je avoir le même effet visuel sous tous les navigateurs ? Quitte à changer la couleur par une classique écriture noire sur fond blanc. Je souhaite juste que ça sois lisible. (Voir fichier joint " listes déroulantes").

Dernière petite question : Est t'il possible d'être en affichage "éditeur de texte"() par défaut lorsqu'on écrit un message ?

[Zuki.]

bonjour,

Pour créer un bouton BBC, il faut suivre le principe et la taille de ceux existants : /forum/Themes/RedZone88_20/images/bbc/xxxx.gif

Le bouton ce décompose en trois parties :

1 - Fond (non-actif)  taille 23 X 22 px

2 - Fond (hover)  taille 23 X 22 px

3 - La miniature taille 23 X 22 px (la transparence n'apparait pas puisque nous avons un fond ! )

La miniature à un fond transparent et l'image n'occupe pas toute la surface. taille totale 23 X 22 px
taille miniature 14 X 12 px

Référence pris sur ce forum http://media.simplemachinesweb.com/smf/default/images/bbc/...

1 - bbc_bg.gif
2 - bbc_hoverbg.gif
3 - img.gif

Pour la miniature voir fichiers joints (capture écran) - Miniature choisie pour exemple : BBC image.



Pour la fonction "Changer d'affichage" => le réglage s'effectue dans le profil de chacun : Profil/Modifier le profil/Affichage et disposition

Ligne : Afficher l'éditeur WYSIWYG sur la page d'écriture par défaut.



Pour la dernière partie pas simple avec les différents navigateurs !

Je passe la main pour l'instant ! 

Sinon voir dans la feuille de style.

[0Connors]

Merci pour les réponses aux deux premières questions, c'est exactement ce que je recherchais. J'attend une réponse pour la dernière !

[maximus23]

Bonjour,

Pour l'éditeur de texte par défaut tu sais régler celà dans ton profil. Sinon si tu veux le mettre pour tout le monde c'est dans thèmes courant/options de thème par défaut.

[Zuki.]

Bien nous revoilà pour la dernière partie !

C'est dans index.css du thème que tu peux modifier la police et le background

Attention au background : ça modifie tous les fonds de la page de message, à tester.

Color : modifie la couleur de la police.

J'ai juste testé sur la page, à voir s'il n'y a pas d'influence ailleurs.

/* We can style the different types of input buttons to be uniform throughout different browsers and their color themes.
   .button_submit - covers input[type=submit], input[type=button], button[type=submit] and button[type=button] in all browsers
   .button_reset  - covers input[type=reset] and button[type=reset] throughout all browsers
   .input_check   - covers input[type=checkbox] throughout all browsers
   .input_radio   - covers input[type=radio] throughout all browsers
   .input_text    - covers input[type=text] throughout all browsers
   .input_file    - covers input[type=file] throughout all browsers
*/

input, button, select, textarea
{
   font: 95%/115% verdana, Helvetica, sans-serif;
   color: #000;
   background: #fff;
   border: 1px solid #7f9db9;
   padding: 2px;
}

[0Connors]

Salut Zuki,

Tout d'abord merci pour ton aide, ensuite j'ai essayé ton code mais seul le "textarea" du titre du poste change de couleur. 

Je ne trouve toujours pas où se trouve la partie des listes déroulantes

[Zuki.]

Bonjour,

On est bien d'accord, tu as modifié "color" dans index.css de ton thème .../forum/Themes/RedZone88_20/css/index.css

Je pense que tu n'as pas choisi la bonne "class" => Line 91: input, button, select, textarea

/* We can style the different types of input buttons to be uniform throughout different browsers and their color themes.
   .button_submit - covers input[type=submit], input[type=button], button[type=submit] and button[type=button] in all browsers
   .button_reset  - covers input[type=reset] and button[type=reset] throughout all browsers
   .input_check   - covers input[type=checkbox] throughout all browsers
   .input_radio   - covers input[type=radio] throughout all browsers
   .input_text    - covers input[type=text] throughout all browsers
   .input_file    - covers input[type=file] throughout all browsers
*/

input, button, select, textarea
{
   font: 95%/100% verdana, Helvetica, sans-serif;
   color: #e3e3e3;
   background-color: #383838;
   border: 1px solid #5d5d5d;
   padding: 2px;
   background-image: url(../images/theme/bg_input.gif);
   background-repeat: repeat-x;
   background-position: left top;
}

[Zuki.]

Complément :  les couleurs correspondent bien à ton image !

color: #e3e3e3;   police de listes déroulantes

background-color: #383838;  fond de listes déroulantes

Chrome prend bien la couleur police mais ne tient pas compte du background.

Pour tester - essaye de rajouter ou modifier background-color en background  (simplement).

input, button, select, textarea
{
   font: 95%/100% verdana, Helvetica, sans-serif;
   color: #e3e3e3;
   background-color: #383838;
   background: #383838;                    <=  à rajouter pour tester
   border: 1px solid #5d5d5d;
   padding: 2px;
   background-image: url(../images/theme/bg_input.gif);
   background-repeat: repeat-x;
   background-position: left top;
}

[0Connors]

Re,

Ca marche j'essaie ça et je te donne des nouvelles. 

[0Connors]

Re,

C'est bizarre es-tu sur que c'est ici que ça se trouve ?

Après test voici ce que j'obtiens :

Code Select Expand

input, button, select, textarea
{
   font: 95%/100% verdana, Helvetica, sans-serif;
   color: #e3e3e3;                       <= Modifie la couleur d'ecriture dans le titre uniquement.
   background-color: #383838;   <= Change une partie de l'affichage de fond du titre.
   background: #383838;            <= Ne change rien.
   border: 1px solid #5d5d5d;
   padding: 2px;
   background-image: url(../images/theme/bg_input.gif);
   background-repeat: repeat-x;
   background-position: left top;
}

En te remerciant ! 

[Zuki.]

En tout cas ça fonctionne pour le thème "default" et quelques autres thèmes SMF.

Ensuite il y a les modifs spécifiques, ce qui doit être le cas sur ton thème.

Plus d'idée pour l'instant !

[0Connors]

C'est pas grave, je te remercie en tous les cas. 

[Zuki.]

J'ai la réponse, en tout cas ça marche sur mon forum test !

1 - Je confirme le problème de la fenêtre avec Chrome. La fenêtre reste blanche ?! Pas la liste déroulante elle prend la couleur demandée.

2 - Le problème doit être lié au script qui conditionne le fonctionnement des listes déroulantes un bug avec Chrome ?! (Le problème existe peut-être avec d'autre thème SMF utilisant les fond sombre et une police claire ?!)

3 - La solution (à quand même)

"color" pour la couleur police

"background-color" pour la couleur de la liste déroulante

La "class" : select   dans index.css du thème RedZone88

/* Select elements look horrible with the extra padding, so leave them unpadded. */
select
{
   padding: 0;
   color: #e3e3e3;
   background-color: #383838;
   border: 1px solid #5d5d5d;
   background-image: url(../images/theme/images/bg_input.gif);
   background-repeat: repeat-x;
   background-position: top left;
}

Là ça doit marcher !!!      Voilà M'sieur 



Edit:

Capture thème RedZone88 problème de fond de fenêtre, pas sur la liste déroulante.

Capture thème Dark Don aucun problème.

Apparemment les problèmes ne sont que sur le thème  RedZone88

[Zuki.]

Bonjour,

Une alternative pour faire apparaitre le texte dans la fenêtre à fond blanc de Chrome : text-shadow

Deux options :

Entouré d'une ombre le texte (comme un trait) : [voir image CAS 1 ]

text-shadow: -1px 0 #383838, 0 1px #383838, 1px 0 #383838, 0 -1px #383838;

{
   padding: 0px;
   color: #e3e3e3;
   background-color: #383838;
   border: 1px solid #5d5d5d;
   background-image: url(../images/theme/images/bg_input.gif);
   background-repeat: repeat-x;
   background-position: top left;
   text-shadow: -1px 0 #383838, 0 1px #383838, 1px 0 #383838, 0 -1px #383838;        <= à rajouter à la suite
}

Ou bien augmenter l'effet d'ombre sous le texte :  [voir image CAS 2 ]

text-shadow: 0 0 10px #383838, 0 0 10px #383838, 0 0 10px #383838, 0 0 10px #383838;

{
   padding: 0px;
   color: #e3e3e3;
   background-color: #383838;
   border: 1px solid #5d5d5d;
   background-image: url(../images/theme/images/bg_input.gif);
   background-repeat: repeat-x;
   background-position: top left;
   text-shadow: 0 0 10px #383838, 0 0 10px #383838, 0 0 10px #383838, 0 0 10px #383838;        <= à rajouter à la suite
}

Ce n'est pas la perfection, mais je n'ai pas mieux.

La couleur utilisée correspond au besoin de 0Connors

[0Connors]

Niquel, superbe idée j'ai mis ça en place ça marche à la perfection !!!

Je te remercie pour ton temps et ton aide, c'est vraiment sympa ! 

[Zuki.]

Si ça te convient, alors parfait ! 

Il ne reste plus qu'à trouver d'où vient le problème de ce thème ?!