33-12-CambiarAspectFormStdForm

33.12 Cambiando el aspecto de Formularios StandardForm

Hay ciertas formas de cambiar el aspecto en cuanto a colores y estilos en formularios de este tipo. Esto lo hacemos para adaptar mejor estos formularios a nuestra aplicación. Estos cambios deben ser realizados en public/css/style.css o en cualquier css que sea importado antes de renderizar (visualizar) la aplicación.

Cambiar estilo de los botones como Adicionar, Aceptar, etc:

Se puede definir un estilo general para las etiquetas input, select, textarea, etc ó definir la clase css .controlButton que es más especifica para estos botones, así:

Ejemplo

  1. input, select {
  2. font-family: Verdana;
  3. font-size: 14px;
  4. }
  5.  
  6. .controlButton {
  7. color: red;
  8. background: white;
  9. border: 1px solid green;
  10. }

Cambiar estilo de las cajas de texto y componentes:

Se puede definir un estilo general para las etiquetas input, select, textarea, etc ó definir la clase css con un selector para el id del objeto que es más especifica para estos componentes, así:

  1. input, select {
  2. font-family: Verdana;
  3. font-size: 14px;
  4. }
  5.  
  6. #flid_nombre, #flid_ciudad_id {
  7. color: red;
  8. background: white;
  9. border: 1px solid green;
  10. }

Cambiar los colores de la vista visualizar:

Cambiamos los colores intercalados usando las siguientes clases donde primary se refiere a uno de esos colores y a secundary al otro. La clase terminada en active es la utilizada cuando el usuario coloca el mouse encima de alguna fila.

  1. .browse_primary {
  2. background: #AEB9FF;
  3. }
  4.  
  5. .browse_primary_active {
  6. background: #AEB9FF;
  7. }
  8.  
  9. .browse_secondary {
  10. background: #FFFFFF;
  11. }
  12.  
  13. .browse_secondary_active {
  14. background: #F2F2F2;
  15. }

Cambiar los valores para un formulario en especial:

Para esto antepondremos el nombre del controlador como clase antes de la clase o del selector en cuestion asi:

  1. .productos input, select {
  2. font-family: Verdana;
  3. font-size: 14px;
  4. }
  5.  
  6. .productos #flid_nombre, #flid_ciudad_id {
  7. color: red;
  8. background: white;
  9. border: 1px solid green;
  10. }



Regresar al indice