Bonjour, j'ai un soucis avec un bouton qui ne veut pas changer de couleur. J'utilise w3.css avec des fonctions déja faite mais modifiable mais je ne trouve pas comment changer la couleur

<!--Panneau du Sommaire-->
           <tbody>

                 <div class="w3-sidebar w3-bar-block w3-card w3-black w3-animate-left" style="display:none" id="leftMenu">
                   <button onclick="closeLeftMenu()" class="w3-bar-item w3-button w3-large">Sommaire &times;</button>
                   <a href="#" class="w3-bar-item w3-button">Link 1</a>
                   <a href="#" class="w3-bar-item w3-button">Link 2</a>

                   <!--debut option se connecter-->
                   <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">se connecter</button>
                    <div id="id01" class="w3-modal">
                       <div class="w3-modal-content w3-card-4 w3-animate-zoom" style="max-width:500px">
                          <div class="w3-center"><br>
                            <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-xlarge w3-hover-red w3-display-topright" title="Close Modal">&times;</span>
                             <img src="img/logoavatar.png" alt="logoavatar" style="width:30%" class="w3-circle w3-margin-top">
                              </div>

      <form class="w3-container" action="/action_page.php">
        <div class="w3-section">
          <label><font color="black"><b>Identifiant</b></font></label>
          <input class="w3-input w3-border w3-margin-bottom" type="text" placeholder="Entrer votre identifiant" name="usrname" required>
          <label><font color="black"><b>Mot de passe</b></font></label>
          <input class="w3-input w3-border" type="password" placeholder="Entrer votre mot de passe" name="psw" required>
          <button class="w3-button w3-block w3-green w3-section w3-padding" type="submit">se connecter</button>
          <input class="w3-check w3-margin-top" type="checkbox" checked="checked"><font color="black"> Remember me</font>
        </div>
      </form>

      <div class="w3-container w3-border-top w3-padding-16 w3-light-grey">
        <button onclick="document.getElementById('id01').style.display='none'" type="button" class="w3-button w3-red">Cancel</button>
        <span class="w3-right w3-padding w3-hide-small"><a href="#">Forgot password?</a></span>
      </div>

    </div>
  </div>
    </div>
      </div>
                 <!--fin option se connecter-->


                <!--Panneau Actualités-->
                 <div class="w3-sidebar w3-bar-block w3-card w3-black w3-animate-right" style="display:none;right:0;" id="rightMenu">
                   <button onclick="closeRightMenu()" class="w3-bar-item w3-button w3-xlarge">Actualités &times;</button>
                   <a href="#" class="w3-bar-item w3-button">Link 1</a>
                   <a href="#" class="w3-bar-item w3-button">Link 2</a>
                   <a href="#" class="w3-bar-item w3-button">Link 3</a>
                 </div>

                 <div class="w3-teal">
                   <button class="w3-button w3-teal w3-xlarge w3-left" onclick="openLeftMenu()">&#9776;</button>
                   <button class="w3-button w3-teal w3-xlarge w3-right" onclick="openRightMenu()">&#9776;</button>


                 <script>
                 function openLeftMenu() {
                     document.getElementById("leftMenu").style.display = "block";
                 }
                 function closeLeftMenu() {
                     document.getElementById("leftMenu").style.display = "none";
                 }

                 function openRightMenu() {
                     document.getElementById("rightMenu").style.display = "block";
                 }
                 function closeRightMenu() {
                     document.getElementById("rightMenu").style.display = "none";
                 }
                 </script>
               </div>

           </tbody>

-
Edité par SoufianeHafy 22 mai 2018 à 13:12:28

Petite question pourquoi tu as fait une balise class et un balise style ? , alors que tu aurait pu tous mettre dans la balise class et le code css peu être si c'est dans la balise class

Bonjour,

Merci d'utiliser la mise en forme de code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour celà, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: c;">Votre code ici</pre>.

KillianMG a écrit:

Petite question pourquoi tu as fait une balise class et un balise style ? , alors que tu aurait pu tous mettre dans la balise class et le code css peu être si c'est dans la balise class

Etant donné que je ne suis vraiment performant en html/css, j'utilise des balises déjà créés avec https://www.w3schools.com/w3css/default.asp. Le soucis est résolu il était pas compliqué w3-teal était se qui donnait cette couleur et fallait la changer dans la feuille de style.

<div class="w3-teal">
                   <button class="w3-button w3-teal w3-xlarge w3-left" onclick="openLeftMenu()">&#9776;</button>
                   <button class="w3-button w3-teal w3-xlarge w3-right" onclick="openRightMenu()">&#9776;</button>

Nan mais faut pas changer la feuille de style du framework o.o

"teal" c'est "turquoise". Si la couleur ne te plaît pas tu mets une autre classe (qu'elle vienne du framework ou qu'elle soit perso), mais pas plus.

Lamecarlate a écrit:

Nan mais faut pas changer la feuille de style du framework o.o

"teal" c'est "turquoise". Si la couleur ne te plaît pas tu mets une autre classe (qu'elle vienne du framework ou qu'elle soit perso), mais pas plus.

AH oui effectivement j'avais pas capter que teal c'était une couleur merci bien