Ejemplos de CSS
En este capítulo vamos a explicar de forma práctica cómo personalizar la interfaz de nuestras aplicaciones usando hojas de estilo dinámicas (CSS).
Ejemplo documentado de personalización de objetos visuales y controles
En el ejemplo siguiente podemos ver documentados y personalizados los objetos visuales y controles de una aplicación Velneo. Esta CSS es un buen recurso formativo sobre la personalización de objetos y controles de aplicaciones Velneo.
Este y el resto de los ejemplos de este capítulo son aplicables a los comandos de instrucción de proceso interfaz: establecer hoja de estilo CSS, interfaz: establecer hoja de estilo CSS filescript y a la creación de CSS para aplicar a objetos en edición.
/* --------------------------------------------------------------------------------
INDICE
- QCalendarWidget CALENDARIO
- QCheckBox BOTON CHECK
- QComboBox COMBOBOX
- QDateEdit CAJA DE EDICIÓN DE CAMPO FECHA MODO DE EDICIÓN FECHA
- QDateTime CAJA DE VISUALIZACIÓN CAMPO FECHA Y HORA
- QDateTimeEdit CAJA DE EDICIÓN DE CAMPO FECHA Y HORA
- QDialog VENTANA EN CUADRO DE DIÁLOGO
- QDockWidget DOCK
- QDoubleSpinBox CAJA DE EDICIÓN DE CAMPO NUMÉRICO CON BOTONES ARRIBA Y ABAJO
- QFrame MARCO
- QGroupBox CAJA DE GRUPO
- QHeaderView CABECERA DE REJILLAS Y ÁRBOLES
- QLabel ETIQUETA DE TEXTO
- QLineEdit CAJA DE EDICIÓN DE TEXTO EN UNA LINEA
- QMainWindow VENTANA PRINCIPAL
- QMenu MENU CONTEXTUAL
- QMenuBar BARRA DE MENU (Solo afecta a Windows)
- QMessageBox VENTANA DE MENSAJE
- QNumberSpinBox CAJA DE EDICIÓN DE CAMPO NUMÉRICO CON BOTONES ARRIBA Y ABAJO
- QProgressBar BARRA DE PROGRESO
- QPushButton BOTÓN
- QRadioButton BOTÓN DE RADIO
- QScrollBar BARRA DE SCROLL VERTICAL Y HORIZONTAL
- QSlider DESLIZADOR
- QSpinBox CAJA DE EDICIÓN DE CAMPO NUMÉRICO CON UN BOTÓN
- QSplitter SPLITTER
- QStatusBar BARRA DE ESTADO
- QTabWidget SEPARADOR DE FORMULARIOS (PESTAÑAS)
- QTableView REJILLA
- QTextEdit CAJA DE EDICIÓN DE TEXTO MULTI-LINEA
- QTimeEdit CAJA DE EDICIÓN DE HORA
- QTitanGrid REJILLA AVANZADA
- QToolBar BARRA DE HERRAMIENTAS
- QTooltip TOOLTIP
- QTreeView QTREEVIEW - ARBOL VISOR Y MENU ARBOLADO
- QWidget#qt_calendar CALENDARIO
- VBoundFieldEdit CAJA DE EDICIÓN DE CAMPO PUNTERO A MAESTRO
- VDateLineEdit CAJA DE EDICIÓN DE CAMPO FECHA MODO DE EDICIÓN ALFANUMÉRICO
- VCFootView PIE DE REJILLA
- VListBox LISTBOX
- VCPVControlCasillero CASILLERO
- VCOverlayShadow OVERLAY
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
QCheckBox - BOTÓN CHECK
QRadioButton - BOTÓN DE RADIO
-------------------------------------------------------------------------------- */
QCheckBox, QRadioButton {
color: #212121; }
QCheckBox:hover, QRadioButton:hover {
color: #039BE5; }
QCheckBox:focus, QRadioButton:focus {
color: #039BE5; }
QCheckBox:disabled, QRadioButton:disabled {
color: #808080; }
/* --------------------------------------------------------------------------------
QComboBox - COMBOBOX
QDateEdit - CAJA DE EDICIÓN DE CAMPO FECHA MODO DE EDICIÓN FECHA
QDateTime - CAJA DE VISUALIZACIÓN CAMPO FECHA Y HORA
QDateTimeEdit - CAJA DE EDICIÓN DE CAMPO FECHA Y HORA
QDoubleSpinBox - CAJA DE EDICIÓN DE CAMPO NUMÉRICO CON BOTONES ARRIBA Y ABAJO
QNumberSpinBox - CAJA DE EDICIÓN DE CAMPO NUMÉRICO CON BOTONES ARRIBA Y ABAJO
QSpinBox - CAJA DE EDICIÓN DE CAMPO NUMÉRICO CON UN BOTÓN
QTimeEdit - CAJA DE EDICIÓN DE HORA
VBoundFieldEdit - CAJA DE EDICION DE CAMPO PUNTERO A MAESTRO
VDateLineEdit - CAJA DE EDICIÓN DE CAMPO FECHA MODO DE EDICIÓN ALFANUMÉRICO
VListBox - LISTBOX
-------------------------------------------------------------------------------- */
VDataCatcherEdit, QComboBox, QDateEdit, VDateLineEdit, QDateTime, QDateTimeEdit, QDoubleSpinBox, QNumberSpinBox, QSpinBox, QTimeEdit, VBoundFieldEdit, vBoundFieldEditBrowser, VDateLineEdit,VListBox {
background-color: #F1F3F2;
border: 0px solid #F1F3F2;
border-radius: 0px;
color: #212121;
height: 36px;
padding-left: 12px;
padding-right: 12px;
selection-background-color: #01579B;
selection-color: #FFFFFF; }
VDataCatcherEdit:hover, QComboBox:hover, QDateEdit:hover, VDateLineEdit:hover, QDateTime:hover, QDateTimeEdit:hover, QDoubleSpinBox:hover, QNumberSpinBox:hover, QSpinBox:hover, QTimeEdit:hover, VBoundFieldEditBrowser:hover,VBoundFieldEdit:hover, VListBox:hover {
background-color: #E0E0E0;
border: 0px 1px 0px 0px solid #01579B; }
VDataCatcherEdit:focus, QComboBox:focus, QDateEdit:focus, VDateLineEdit:focus, QDateTime:focus, QDateTimeEdit:focus, QDoubleSpinBox:focus, QNumberSpinBox:focus, QSpinBox:focus, QTimeEdit:focus, VBoundFieldEditBrowser:focus, VBoundFieldEdit:focus, VListBox:focus {
border-bottom: 1px solid #01579B; }
VDataCatcherEdit:disabled, QComboBox:disabled, QDateEdit:disabled, VDateLineEdit:disabled, QDateTime:disabled, QDateTimeEdit:disabled, QDoubleSpinBox:disabled, QNumberSpinBox:disabled, QSpinBox:disabled, QTimeEdit:disabled, VBoundFieldEditBrowser:disabled,VBoundFieldEdit:disabled, VListBox:disabled {
background-color: #FAFAFA;
color: #808080; }
QDateEdit::up-button, VDateLineEdit::up-button, QDateTime::up-button, QDateTimeEdit::up-button, QTimeEdit::up-button, VBoundFieldEditBrowser::up-button, VBoundFieldEdit::up-button {
border: none;
image: url(":/Resources/tg_moverarriba.png");
width: 16px; }
QDateEdit::down-button, VDateLineEdit::down-button, QDateTime::down-button, QDateTimeEdit::down-button, QTimeEdit::down-button, VBoundFieldEditBrowser::down-button, VBoundFieldEdit::down-button {
border: none;
image: url(":/Resources/tg_moverabajo.png");
width: 16px; }
VDataCatcherEdit::drop-down, QComboBox::drop-down, QDateEdit::drop-down, VDateLineEdit::drop-down, QDateTime::drop-down, QDateTimeEdit::drop-down, VBoundFieldEditBrowser::drop-down, VBoundFieldEdit::drop-down, QTimeEdit::drop-down {
border: none;
image: url(":/Resources/tg_moverabajo.png");
width: 16px; }
/* EN PRINCIPIO NO AFECTAN */
QNumberSpinBox:up-button, QDoubleSpinBox:up-button, QSpinBox:up-button {
border: none;
image: url(":/Resources/tg_moverarriba.png"); }
QNumberSpinBox:down-button, QDoubleSpinBox:down-button, QSpinBox:down-button {
border: none;
image: url(":/Resources/tg_moverabajo.png"); }
VBoundFieldEditBrowser QToolButton {
background-color: #F5F5F5; }
VBoundFieldEditBrowser QToolButton:hover {
background-color: #E0E0E0; }
/* --------------------------------------------------------------------------------
QDialog - Cuadro de diálogo
-------------------------------------------------------------------------------- */
QDialog QPushButton {
min-width: 120;
text-transform: none;
}
/* --------------------------------------------------------------------------------
QDockWidget - DOCK
-------------------------------------------------------------------------------- */
QDockWidget {
color: transparent;
font-size: 10px;
min-width:10px;
width: 210px; }
QDockWidget::title {
background: #FFFFFF;
color: #212121;
margin: 0px;
padding: 0px;
text-align: center; }
QDockWidget::close-button {
image: none;
position: absolute;
subcontrol-origin: margin;
subcontrol-position: top right;
top: 0px; left: 0px; bottom: 0px;
width: 0px; }
QDockWidget::float-button {
image: none;
position: absolute;
subcontrol-origin: margin;
subcontrol-position: top right;
top: 0px; left: 0px; bottom: 0px;
width: 0px; }
/* --------------------------------------------------------------------------------
QFrame - MARCO
-------------------------------------------------------------------------------- */
QFrame {
background: rgba(255, 255, 255, 100%);
border: 0px; }
/* --------------------------------------------------------------------------------
QGroupBox - CAJA DE GRUPO
-------------------------------------------------------------------------------- */
QGroupBox {
background: #FAFAFA;
border: 0px solid #212121;
border-radius: 5px;
font-size: 12px;
font-weight: bold;
margin-top: 20px;
padding: 5px; }
QGroupBox::title {
color: #212121;
padding-top: -5px;
padding-left: 5px;
subcontrol-origin: margin; }
/* --------------------------------------------------------------------------------
QHeaderView - CABECERA DE REJILLAS Y ARBOLES
-------------------------------------------------------------------------------- */
QHeaderView::section:horizontal {
background: #FFFFFF;
border: none;
border-bottom: 1px solid #E0E0E0;
border-right: 5px solid transparent;
color: #01579B;
font-weight: bold;
margin-top: 10px;
min-height: 20px; }
QHeaderView::section:vertical {
background: #FFFFFF;
border: none;
border-bottom: 1px solid #E0E0E0;
border-right: 5px solid transparent;
color: #01579B;
font-weight: bold;
margin-top: 10px;
min-height: 20px; }
/* --------------------------------------------------------------------------------
QLabel - ETIQUETA DE TEXTO
-------------------------------------------------------------------------------- */
QLabel {
background-color: transparent;
color: #808080;
font-size: 12px;
text-transform: uppercase; }
/* TITULOS DE LOS FORMULARIOS Y MENUS */
QLabel#TXT_TIT {
color: #01579B;
font-size: 32px;
text-transform: none; }
QLabel#TXT_SUB_TIT, QLabel#TXT_SUB_TIT_2 {
color: #01579B;
font-size: 16px;
text-transform: none; }
QLabel#TXT_CAS {
font-size: 10px;
text-transform: none; }
QLabel#EMP {
font-size: 16px; }
QLabel#USR {
font-size: 12px; }
/* MENSAJE ERROR */
QLabel#NAME_VAC, QLabel#EML_ERR {
alignement: right;
background: transparent;
color: #E27249;
font-size: 10px;
text-transform: uppercase;
padding-left: -1px;
padding-top: 1px; }
/* MENSAJE DUPLICADO*/
QLabel#NAME_DUP, QLabel#EML_DUP {
alignement: right;
background: transparent;
color: #6388C1;
font-size: 10px;
padding-top: 1px;
text-transform: uppercase; }
/* --------------------------------------------------------------------------------
QLineEdit - CAJA DE EDICIÓN DE TEXTO EN UNA LINEA
QTextEdit - CAJA DE EDICIÓN DE TEXTO MULTI-LINEA
-------------------------------------------------------------------------------- */
QLineEdit, QTextEdit {
background-color: #F1F3F2;
border: 0px solid #212121;
border-radius: 0px;
color: #212121;
height: 36px;
padding-left: 12px;
padding-right: 12px;
selection-background-color: #01579B;
selection-color: #FFFFFF; }
QLineEdit:hover, QTextEdit:hover {
background-color: #F1F3F2;
border: 0px solid #01579B; }
QLineEdit:focus, QTextEdit:focus {
background-color: #F1F3F2;
border-bottom: 1px solid #01579B; }
QLineEdit:disabled, QTextEdit:disabled {
background-color: #FAFAFA;
color: #808080; }
/* CONTROL DE EDICIÓN DE TEXTOS A BUSCAR EN MENUS */
QLineEdit#TXT_BUS {
qproperty-placeholderText: 'Texto a buscar'; }
/* FORMULARIO ALTA CONTACTO > TEXTO EDIT NOMBRE Y NOMBRE COMERCIAL */
QLineEdit#NAME_CON {
qproperty-placeholderText: 'Nombre contacto';
qproperty-text: 'Nombre contacto'; }
QLineEdit#NOM_COM {
margin-left: 10px; }
QTextEdit#MOTIVO {
height: 36px; }
/* --------------------------------------------------------------------------------
QMainWindow - VENTANA PRINCIPAL
-------------------------------------------------------------------------------- */
QMainWindow {
background: #FFFFFF;
border: 0px; }
QMainWindow::separator {
background: #FFF;
border-left: 1px solid #CECECE;
border-right: 1px solid #CECECE;
height: 5px;
width: 5px; }
QMainWindow::separator:hover {
background: #CECECE; }
/* --------------------------------------------------------------------------------
QMenu - MENU CONTEXTUAL
-------------------------------------------------------------------------------- */
QMenu {
background-color: #FFF;
border: 1px solid #CECECE;
color: #333333;
margin: 0px;
padding: 5px; }
QMenu::item {
border: 1px solid transparent;
margin: 1px;
padding: 5px 30px 5px 20px; }
QMenu::item:selected {
background-color: #E1F5FE;
color:#000; }
QMenu::separator {
background-color: #CECECE;
height: 1px;
margin: 0px; }
/* --------------------------------------------------------------------------------
QMenuBar - BARRA DE MENU (Solo afecta a Windows)
-------------------------------------------------------------------------------- */
QMenuBar {
background-color: #FFF;
border-bottom: 1px solid #CECECE;
min-height:20px; }
QMenuBar::item:selected {
background-color: #CECECE;
color: #000; }
QMenuBar::item:hover {
background: #333333;
color: #FFF; }
/* --------------------------------------------------------------------------------
QMessageBox - VENTANA DE MENSAJE
QDialog - VENTANA EN CUADRO DE DIÁLOGO
-------------------------------------------------------------------------------- */
QMessageBox, QDialog {
background-color: #FFF; }
QMessageBox QPushButton {
min-width: 120;
text-transform: none; }
/* --------------------------------------------------------------------------------
QProgressBar - BARRA DE PROGRESO
-------------------------------------------------------------------------------- */
QProgressBar {
background-color: #FFF;
border: 1px solid #E0E0E0;
border-radius: 2px;
color: #212121;
height: 30px;
text-align: center; }
QProgressBar::chunk {
background-color: #C5CAE9; }
/* --------------------------------------------------------------------------------
QPushButton - BOTÓN
-------------------------------------------------------------------------------- */
QPushButton {
background-color: #FFFFFF;
border: 1px solid #01579B;
border-radius: 3px ;
color: #01579B;
font-size: 14px;
font-weight: medium;
height: 36px;
text-align: center;
width: 120px;
qproperty-iconSize: 18px; }
QPushButton:hover {
background-color: #F5F5F5; }
QPushButton:focus {
background-color: #F5F5F5;
border: 2px solid #01579B; }
QPushButton:pressed {
background-color: #F5F5F5;
border: 2px solid #01579B; }
QPushButton:disabled {
background-color: #FFFFFF;
border: 0px solid #C1C1C1;
color: #C1C1C1; }
QPushButton::menu-indicator {
image: none;
width: 0px; }
/* BOTÓN ACEPTAR */
QPushButton#BTN_ACE, QPushButton#BTN_ALT_BUS {
background-color: #01579B;
color: #FFFFFF; }
QPushButton:hover#BTN_ACE, QPushButton:hover#BTN_ALT_BUS {
background-color: #01579B;
color: #E1F5FE; }
QPushButton:focus#BTN_ACE, QPushButton:focus#BTN_ALT_BUS {
border: 2px solid #212121; }
QPushButton:pressed#BTN_ACE, QPushButton:pressed#BTN_ALT_BUS {
border: 2px solid #212121; }
QPushButton:disabled#BTN_ACE, QPushButton:disabled#BTN_ALT_BUS {
background-color: #C1C1C1;
border: 0px;
color: #FFFFFF; }
/* BOTÓN BUSCAR */
QPushButton#BTN_ALT_BUS {
background-color: #01579B;
color: #FFFFFF;
radius: 3px; }
QPushButton#BTN_ALT_CHG_BUS {
background-color: #FFFFFF;
border: 1px solid #01579B;
color: #01579B;
font-size: 14px;
height: 36px;
radius: 3px;
width: 240px; }
QPushButton#BTN_CNC, QPushButton#BTN_CNC_2, QPushButton#BTN_DUP, QPushButton#BTN_SUP {
background-color: #FFFFFF;
border: 1px solid #01579B;
color: #01579B;
font-size: 18px;
height: 48px;
radius: 3px; }
QPushButton#BTN_BUS_MEN {
background-color: #FFFFFF;
border: 1px solid #01579B;
color: #01579B;
height: 36px;
radius: 3px; }
/* BOTÓN AMPLIAR, BOTÓN BUSCAR, BOTÓN MENU y BOTÓN REDUCIR */
QPushButton#BTN_AMP, QPushButton#BTN_AYU, QPushButton#BTN_BUS, QPushButton#BTN_MEN, QPushButton#BTN_RED {
border-radius: 0px;
qproperty-iconSize: 18px; }
/* --------------------------------------------------------------------------------
QScrollBar - BARRA DE SCROLL VERTICAL Y HORIZONTAL
-------------------------------------------------------------------------------- */
QScrollBar:vertical {
background: #FFFFFF;
border-radius: 6px;
padding-left: 2px;
padding-right: 2px;
width: 12px; }
QScrollBar:horizontal {
background: #FFFFFF;
border-radius: 6px;
padding-bottom: 2px;
padding-top: 2px;
height: 12px; }
QScrollBar:vertical:hover {
background: #F5F5F5; }
QScrollBar:horizontal:hover {
background: #F5F5F5; }
QScrollBar::handle:vertical {
background: #C1C1C1;
border: 2px solid transparent;
border-radius: 4px;
min-height: 90px; }
QScrollBar::handle:horizontal {
background: #C1C1C1;
border: 2px solid transparent;
border-radius: 4px;
min-width: 90px; }
QScrollBar::handle:hover {
background: #808080;
border: 2px solid transparent; }
QScrollBar::add-line:vertical {
background: none;
border: none; }
QScrollBar::sub-line:vertical {
background: none;
border: none; }
QScrollBar::add-line:horizontal {
background: none;
border: none; }
QScrollBar::sub-line:horizontal {
background: none;
border: none; }
/* --------------------------------------------------------------------------------
QScrollBar - Recuadro de intersección entre las scrollbar horizontal y vertical
-------------------------------------------------------------------------------- */
QAbstractScrollArea::corner {
background: transparent;
border: transparent; }
/* --------------------------------------------------------------------------------
QSlider - DESLIZADOR
-------------------------------------------------------------------------------- */
QSlider {
background: transparent; }
/* --------------------------------------------------------------------------------
QSplitter - SPLITTER
-------------------------------------------------------------------------------- */
QSplitter {
background: transparent; }
/* --------------------------------------------------------------------------------
QStatusBar - BARRA DE ESTADO
-------------------------------------------------------------------------------- */
QStatusBar {
background-color: #FFFFFF;
border-top: 1px solid #212121;
qproperty-visible: false; }
/* --------------------------------------------------------------------------------
QTabWidget - SEPARADOR DE FORMULARIOS (Pestañas)
-------------------------------------------------------------------------------- */