Blog

Jugando con los estilos

Jugando con los estilos 1En este artículo explicaré cómo, mediante CSS, podemos cambiar el aspecto de los botones.

Se trata de cambiar el aspecto de los botones incluidos en el siguiente formulario usando CSS:

Jugando con los estilos 2

Alineando el icono y el texto de cada botón a la izquierda y quitando el aspecto de botón:

Jugando con los estilos 3

Esto se consigue aplicando una hoja de estilo CSS a dichos botones.

Para aplicar una CSS a un objeto o a un sub-objeto usaremos el comando de instrucción de proceso de grupo de comandos de interfaz llamado Interfaz: Set hoja de estilo CSS.

En este caso, se consigue aplicando el estilo siguiente:

QPushButton {
text-align: center left;
border: 0px;
}

Al control de tipo botón se le aplica un alineamiento del texto horizontal izquierda y vertical centrado y se le quitan los bordes.

En el caso de que quisiésemos establecer un color de fondo cuando el botón sea pulsado usaríamos la propiedad QPushButton:pressed. Ejemplo:

QPushButton:pressed {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
}

En este caso estamos aplicando un fondo degradado.

Dado que en este caso queremos modificar solamente el aspecto de los botones de un formulario concreto, lo que vamos a hacer es crear un evento de interfaz en el formulario como el que sigue:

Jugando con los estilos 4

En el primer parámetro debemos seleccionar el objeto o sub-objeto al que le vamos a aplicar la CSS, en este caso lo aplicamos al formulario para que sea aplicado a todos los botones contenidos en el mismo.

En el segundo parámetro escribiremos el código fuente de la CSS a aplicar:

Jugando con los estilos 5

Dado que se trata de una fórmula y lo que debemos introducir es una cadena de texto literal, ésta debe ir entrecomillada.

Una vez creado el evento, sólo nos queda programar cuándo dispararlo. En este caso nos interesará que se dispare al abrir el formulario, para ello creamos en el formulario una conexión de evento como la que sigue:

Jugando con los estilos 6

Para obtener información sobre las CSS aplicables a Velneo V7 pulsa aquí.

3 thoughts on “Jugando con los estilos

Dejar un comentario