Some doubts with materialize

Navigation
0

good at the end I could make my web responsive, I thought that those things were done manually, and it turns out that there were framework ufff, well anyway, I have some doubts that remained pending:

For example in my forms when I have text fields or other things, like "checkbox" when I press them they turn green, how can I change that?

Here is a picture so you can see what I'm talking about: 

<form method="POST" class="col s12 m12 l12 offset-l0 m0 s0 white blue-text" name="formulario"> <!-- Tamano del form responsive, color de texto y de fondo-->  
                <div class="row">
                    <div class="input-field col s12 m12 l12"> <!-- Tamano del input-field Titulo-->
                        <i class="material-icons prefix waves-effect waves-light-blue lighten-1">perm_identity</i>
                        <input id="icon_prefix" type="email" class="validate" name="txtCorreo">
                        <label for="icon_prefix">Correo</label>
                    </div>
                </div>
                            <div class="row">
                    <div class="input-field col s12 m12 l12"> <!-- Tamano del input-field Titulo-->
                        <i class="material-icons prefix">lock_outline</i>
                        <input id="icon_prefix" type="password" class="validate" name="txtPassword">
                        <label for="icon_prefix">Contraseña</label>
                    </div>
                </div>


             <div class="row">
               <div class="input-field col s12 m12 l12 center"> <!-- Tamano del boton enviar-->
                          <button class="btn waves-effect waves-light blue" type="submit" name="action" class="submit">Acceder
                          <i class="material-icons right">send</i></button>
                       </div>
                    </div>


            </form>
    
asked by Strelok 05.04.2017 в 00:48
source

4 answers

1

Let's say that your project is inside a System folder, and in it you created an html folder in which you placed your html, let's say it's called login .html . Then the file is in Sistema/html/login.html .

In the same file you have your inputs and others, for example: 

<html>
  <head> ... </head>
  <body>
    ...
      <div class="input-field col s12 m12 l12">
        <i class="material-icons prefix">perm_identity</i>
        <input id="icon_prefix" type="email" class="validate" name="txtCorreo">
        <label for="icon_prefix">Correo</label>
      </div>
    ...
  </body>
</html>

To change the colors you want, you can use the CSS that gives you directly Materialize - Section: Changing colors . You can do this by creating a new CSS file, called for example estilos.css and adding the following content: 

/* Este cambia el color del label del campo cuando no está seleccionado */
.input-field label {
  color: #000; /* Donde dice #000 pones el color que quieres */
}

/* Este es para cambiar el color del label cuando seleccionas el campo */
.input-field input[type=text]:focus + label {
  color: blue; /* Por ejemplo, acá saco el verde y pongo por azul */
}

/* Este es para cambiar el color de la línea del campo cuando lo seleccionas */
.input-field input[type=text]:focus {
  border-bottom: 1px solid #000; /* El #000 es el color de la línea */
  box-shadow: 0 1px 0 0 #000; /* Y acá, de la pequeña sombra que genera */
}

/* Si usas la propiedad validate, el color de la línea al validar, será este */
.input-field input[type=text].valid {
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 0 #000;
}

/* Y este será el color en el caso que se tome como inválido */
.input-field input[type=text].invalid {
  border-bottom: 1px solid black;
  box-shadow: 0 1px 0 0 black;
}

/* Pôr último, este cambia el color al ícono cuando entras a un campo */
.input-field .prefix.active {
  color: blue; /* También quieres cambiar esto a otro color, o no? */
}

Now, the only thing left for you to see the colors, is to tell your HTML file that you want to use a certain CSS file to give colors to your page. This is something that you already did when you added Materialize inside the head tag, now you have to do the same, but with your new file.

Let's say you created your styles.css file within Sistema/css/estilos.css What you should modify in your login.html file is to add a line inside the head: 

<html>
  <head>
    ...
    <link rel="stylesheet" type="text/css" href="../css/estilos.css">
    ...
  </head>
  <body> ... </body>
</html>

In case you use Sass and not CSS, you can achieve the same, as described a little in Materialize - Sass , doing: 

$secondary-color: color("A", "B") !default;

Being A a color, for example red and B one of the color variations, for example lighten-3 . The color palette and variations allowed are in Materialize - Colors . In the case you want to use one that is not in the list, you simply do $secondary-color: #4f2caa !default;

Note: To choose the pure color without any variation, in B you simply place base .

    
answered by 06.04.2017 / 13:56
source
0

To color the buttons or any type of materialize elements use one of their classes 

<a class="waves-effect waves-light btn">button</a>
<a class="waves-effect waves-light-blue lighten-1 btn">button</a>
<a class="waves-effect waves-light-green darken-4 btn">button</a>
<a class="waves-effect waves-light-orange lighten-3 btn">button</a>

The default color of btn is the green you are looking at now

More about classes and colors

    
answered by 05.04.2017 в 01:15
0

What you are looking for is to invalidate the behavior of a CSS class that you have (or is set by Javascript) in your html .

  • If you know what class it is, remove it from the layout and it will have no effect.
  • If you do not know, or you're not sure what kind it is, inspect the green elements with the browser (F12) and among the rules you have applied, you will see which one you are painting from that unwanted color.

The best thing to do would be to reproduce a brief example by reissuing your question where the behavior you are commenting would be seen and if so, we could tell you exactly what rule it is and how to solve it.

    
answered by 06.04.2017 в 10:02
0

I have taken from each answer a little and it has helped me to find the punctual. My solution was to do this in a new .css file

colores.css 

.input-field .prefix.active {
  color: #64b5f6;
}

input:not([type]):focus:not([readonly]) + label,
input[type=text]:not(.browser-default):focus:not([readonly]) + label,
input[type=password]:not(.browser-default):focus:not([readonly]) + label,
input[type=email]:not(.browser-default):focus:not([readonly]) + label,
input[type=url]:not(.browser-default):focus:not([readonly]) + label,
input[type=time]:not(.browser-default):focus:not([readonly]) + label,
input[type=date]:not(.browser-default):focus:not([readonly]) + label,
input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
input[type=number]:not(.browser-default):focus:not([readonly]) + label,
input[type=search]:not(.browser-default):focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
  color: #64b5f6;}

input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
  border-bottom: 1px solid #64b5f6;
  -webkit-box-shadow: 0 1px 0 0 #64b5f6;
          box-shadow: 0 1px 0 0 #64b5f6;
}

I hope I have helped:)

    
answered by 15.11.2017 в 08:06
Hover product woocommerce I need a closed condition in the last element of the array