Changer couleur bouton "choisir un fichier"

[blackswars]

Salut !

Je suis en train de modifier le thème classic, et je suis confronté à un problème :

Je n'arrive pas à modifier la couleur du bouton "choisir un fichier" dans la page "Contactez-nous"

J'ai pourtant tout essayé dans le custom.css de mon thème enfant :

 /* ----- BOUTONS ------ */
 
 
 .btn-primary{ /*boutons */
	 
	 background-color:#000; 
 }
 
 .btn-primary:hover{
	 
	 background-color:#b790e3;
 }
 
  .btn{ /*Bouton classic*/
	
	background-color : #000;	
}
 
 .btn:hover{ /*Bouton classic*/
	
	background-color : #b790e3;	
}

.btn-default{
	
	background-color : #b790e3;
}

.icon-span-filestyle{ /* Bouton "Choisir un fichier" */

	background-color:#b790e3;
}

.glyphicon{ /* Bouton "Choisir un fichier" */

	background-color:#b790e3;
}

.glyphicon-folder-open{ /* Bouton "Choisir un fichier" */

	background-color:#b790e3;
}

.group-span-filestyle{ /* Bouton "Choisir un fichier" */

	background-color:#b790e3;
}

.input-group-btn{ /* Bouton "Choisir un fichier" */

	background-color:#b790e3;
}

.bootstrap-filestyle{ /* Bouton "Choisir un fichier" */

	background-color:#b790e3;
}

.filestyle{ /* Bouton "Choisir un fichier" */

	background-color:#b790e3;
}

#filestyle-0{ /* Bouton "Choisir un fichier" */

	background-color:#b790e3;
}

Mais rien à y faire, le bouton reste de la couleur d'origine (hormis le contour)
A noter que pour tous les autres boutons, ça marche très bien

Pourriez-vous m'aider SVP ?

Merci d'avance

[Mediacom87]

Bonjour,

dans custom.css de votre template ajoutez ceci en choisissant la couleur que vous souhaitez :

.bootstrap-touchspin .group-span-filestyle .btn-touchspin,
.group-span-filestyle .bootstrap-touchspin .btn-touchspin,
.group-span-filestyle .btn-default {
    background-color: fuchsia
}

[blackswars]

Bonjour,

Merci beaucoup Mediacom87, ça marche super bien !

Au cas où d'autres personnes sont confrontés au problème et tombent sur ce topic, on peut rajouter group-span-filestyle en plus pour avoir un bouton parfaitement ajusté au formulaire : 

.bootstrap-touchspin .group-span-filestyle .btn-touchspin,
.group-span-filestyle .bootstrap-touchspin .btn-touchspin,
.group-span-filestyle .btn-default,
.group-span-filestyle {
    background-color: #000;
}

Ce code a lui seul suffit pour modifier la couleur du bouton "Choisir un fichier", j'ai donc pu supprimer tout le reste commenté par /* Bouton "Choisir un fichier" */

Je ne voudrais pas abuser de votre temps Mediacom87, mais serait-il possible d'expliquer un peu le code s'il vous plait ? Pour comprendre et essayer de réussir tout seul la prochaine fois

J'ai l'impression qu'il faut définir les paramètres css au "groupe" de class identifiant les objets plutôt que de modifier chaque class indépendamment ?

Aussi, comment avez vous trouver ces class ? Je n'ai pas trouvé cela en utilisant l'outil "Inspecter" de mon navigateur...

Encore merci beaucoup pour votre rapidité !

 

EDIT : Je crois avoir trouvé, il faut regarder la partie "style" associé à l'élément inspecté, c'est ça ?

EDIT 2 : Ah d'accord, en plus de ça je fait une recherche dans le theme.css pour chercher les éléments qui me manque et je me débrouille plutôt bien

Bc,
Alexandre

Edited April 14, 2020 by blackswars (see edit history)