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
- VSwith CONTROL SWITCH
-------------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------------
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; }
/* --------------------------------------------------------------------------------
La clase siguiente hace que no se destaquen las cabeceras horizontal y vertical al ganar el foco
-------------------------------------------------------------------------------- */
QHeaderView{
qproperty-highlightSections: false;
}
/* --------------------------------------------------------------------------------
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)
-------------------------------------------------------------------------------- */
QTabWidget::pane {
border-top: 1px solid #E0E0E0;
margin:0px;
top: 10px; }
QTabWidget::tab-bar {
left: 10px;
min-width: 10px;
right: 10px;
top: 10px; }
QTabBar::tab {
background-color: #FFFFFF;
color: #212121;
font-weight: normal;
margin-left: 5px;
margin-right: 10px;
padding-bottom: 3px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px; }
QTabBar::tab:hover {
border-top: 1px solid #E1F5FE; }
QTabBar::tab:focus {
background-color: #01579B;
color: #FFFFFF; }
QTabBar::tab:selected {
border-bottom: 2px solid #039BE5; }
QTabBar::close-button {
image: url(":/Resources/td_borrartodospuntos.png");
width: 32px;
height: 32px;
margin: 3px; }
QTabBar::scroller {
padding-top: 10px;
width: 64px;}
QTabBar QToolButton::left-arrow {
image: url(":/Resources/tg_buscar_ant.png");
width: 32px;}
QTabBar QToolButton::right-arrow {
image: url(":/Resources/tg_buscar_sig.png");
width: 32px;}
/* --------------------------------------------------------------------------------
QTableView - REJILLA
VCFootView - PIE DE REJILLA
-------------------------------------------------------------------------------- */
QTableView {
alternate-background-color: transparent;
background-color: white;
border: none;
border-radius: 5px;
color: #212121;
font-weight: normal;
gridline-color: transparent;
min-height: 30px;
selection-background-color: #E1F5FE;
selection-color: #01579B;
qproperty-showGrid: false; }
QTableView QTableCornerButton::section {
background-color: transparent;
border: 0px; }
QTableView::item:hover {
background-color: #E1F5FE; }
QTableView::item:focus {
border: 1px solid #F5F5F5;
selection-background-color: #E1F5FE;
selection-color: #01579B; }
/* PIE DE REJILLA */
VCFootView {
background: transparent;
border: none;
border-right: 5px solid transparent;
color: #212121;
min-height: 30px; }
VCFootView::section:active {
background: transparent;
border: none;
border-right: 5px solid transparent; }
VCFootView::section:!active {
background: transparent;
border: none;
border-right: 5px solid transparent; }
/* --------------------------------------------------------------------------------
QTitanGrid - REJILLA AVANZADA
-------------------------------------------------------------------------------- */
/* MARCO DE LA REJILLA */
Qtitan--Grid {
padding: 1px;
margin: 1px;
border: 1px solid #FFFFFF;
border-style: none;
gridline-color: #F5F5F5;
/* COLOR DE FONDO Y FONDO PAR DE FILAS */
background-color: #FFFFFF; /* Fondo de la rejilla */
alternate-background-color: #FFFFFF; /* Color de las líneas impares */
/* COLOR DE LA FILA SELECCIONADA */
selection-color: #212121; /* Color del texto del registro seleccionado */
selection-background-color: #F5F5F5; /* Background del registro seleccionado */
/* AERA DE LOS AGRUPAMIENTOS */
qproperty-headerHeight: 30; /* Altura de la cabecera de agrupación */
qproperty-headerTextColor: #212121; /* Texto informativo de la cabecera de agrupamiento */
qproperty-headerBrush: #FFFFFF; /* Color de la franja de agrupamiento */
qproperty-headerBorderColor: #FFFFFF ; /* Color del borde */
qproperty-headerBorderSize: 0; /* Tamaño del borde */
qproperty-headerBorderStyle: dot-dash;
/* La fuente se puede establecer de dos formas. Con headerTextFont que requiere un formato concreto
o indicando la familia y el tamaño en dos propiedades*/
/*qproperty-headerTextFont: "Verdana,-1,20,5,0,0,0,0,0,0";*/
qproperty-headerTextFontSize: 12; /* Tamaño de la fuente */
qproperty-headerTextFontFamily: "Verdana";
/* AGRUPAMIENTOS */
qproperty-groupColorLevel0: #E1F5FE; /* Color de fondo según el nivel de agrupamiento */
qproperty-groupColorLevel1: #FFFFFF;
qproperty-groupColorLevel2: #F5F5F5;
qproperty-groupColorLevel3: #E0E0E0;
qproperty-groupColorLevel4: magenta;
qproperty-groupColorLevel5: white;
qproperty-groupColorLevel6: white;
qproperty-groupColorLevel7: white;
/* NIVEL DE DESPLIEGUE DE AGRUPAMIENTOS */
qproperty-keepGroupLevelExpanded: 3;
/* PIES DE GRUPO */
qproperty-summaryGroupItemTextColor: red; /* No está operativo en la versión 26 */
qproperty-summaryGroupItemBackgroundColor: #FFFFFF;
qproperty-summaryGroupItemHeight: 30;
qproperty-summaryGroupItemBorderColor: #E0E0E0;
qproperty-summaryGroupItemBorderSize: 1;
qproperty-summaryGroupItemBorderStyle: native;
/* PIES DE REJILLA */
qproperty-summaryItemTextColor: blue; /* No está operativo en la versión 26 */
qproperty-summaryItemBackgroundColor: #FFFFFF;
qproperty-summaryItemHeight: 30;
qproperty-summaryItemBorderColor: #FFFFFF;
qproperty-summaryItemBorderSize: 1;
qproperty-summaryItemBorderStyle: native;
/* ICONOS */
qproperty-sortAscendingIcon: url(":/Resources/tg_moverarriba.png");
qproperty-sortDescendingIcon: url(":/Resources/tg_moverabajo.png");
qproperty-focusRowIndicatorIcon: url(":/Resources/tg_buscar_sig.png");
qproperty-columnFilterToolIcon: url(":/Resources/mo_tuboficha.png");
qproperty-columnFilterToolBoldIcon: url(":/Resources/mo_tubolista.png");
qproperty-filterCheckBoxOnIcon: url(":/Resources/tg_moverarriba.png");
qproperty-filterCheckBoxOffIcon: url(":/Resources/tg_moverarriba.png");
qproperty-editorPopupOkIcon: url(":/Resources/tg_moverarriba.png");
qproperty-editorPopupCancelIcon: url(":/Resources/td_borrartodospuntos.png");
qproperty-editorPopupCrossIcon: url(":/Resources/tg_moverarriba.png");
/* LÍNEA DE COLUMNAS INMOVILIZADAS */
qproperty-fixedSeparatorWidth: 3;
qproperty-fixedSeparatorColor: #FFFFFF;
qproperty-fixedSeparatorStyle: dot-dash; }
/* CABECERA Y BANDA */
Qtitan--Grid::section {
color: #01579B;
font-weight: bold;
border: none;
background-color: #FFFFFF; }
/* CABECERA CON FOCO */
Qtitan--Grid::section:focus {
background-color: #FFFFFF;
border: 1px solid #FFFFFF; }
/* CELDAS */
Qtitan--Grid::item {
/*background-color: red;*/ /*Se aplica sobre los posibles colores asignados genéricamente en la rejilla al fondo o fondo par*/
}
/* CELDA CON FOCO */
Qtitan--Grid::item:focus {
background-color: #F5F5F5; /*Se aplica sobre los posibles colores asignados genéricamente en la rejilla al fondo o fondo par*/
border: 1px solid #FFFFFF; }
/* MARCO DEL FOCO Y CABECERA SELECCIONADA DE AGRUPACIÓN */
Qtitan--Grid:focus {
outline: 1px dotted #FFFFFF; }
/* FILTRO RÁPIDO */
Qtitan--Grid > Qtitan--GridColumnFilterPopup, Qtitan--Grid > Qtitan--GridColumnFilterPopup *
{
background-color: #FFFFFF;
color: #01579B ;
font: 12pt "Verdana"; }
/* SELECCIÓN DE CAMPOS */
Qtitan--Grid > Qtitan--GridColumnsQuickCustomization, Qtitan--Grid > Qtitan--GridColumnsQuickCustomization *
{
background-color: #FFFFFF;
color: #01579B;
font: 12pt "Verdana"; }
/* --------------------------------------------------------------------------------
QToolBar - BARRA DE HERRAMIENTAS
-------------------------------------------------------------------------------- */
QToolBar {
background-color: transparent;
border: 0px;
padding: 3px;
spacing: 10px;
qproperty-iconSize: 18px; }
QToolButton {
background-color: transparent;
border: 0px solid #212121;
border-radius: 5px;
color: #808080;
font-size: 14px;
margin-right: 0px;
min-height: 32px;
min-width: 32px;
padding: 3px;
qproperty-iconSize: 18px; }
QToolButton:hover {
background-color: transparent;
border: 0px solid #01579B; }
QToolButton:focus {
border: 0px solid #039BE5; }
QToolButton:pressed {
border: 0px solid #039BE5; }
QToolButton:disabled {
background-color: #FFFFFF;
border: 0px solid #F5F5F5;
color: #F5F5F5; }
QToolButton::menu-indicator {
background-color: transparent;
color: transparent; }
QToolBar#TOOL_PRINCIPAL {
background-color: #F1F3F2;
border: 0px;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
spacing: 10px;
qproperty-iconSize: 32px; }
QToolBar#TOOL_PRINCIPAL QToolButton {
background-color: #F1F3F2;
border: 0px solid #212121;
border-radius: 5px;
color: #808080;
font-size: 14px;
margin-right: 0px;
min-height: 48px;
min-width: 48px;
padding: 12px;
qproperty-iconSize: 32px; }
/* --------------------------------------------------------------------------------
QTooltip - TOOLTIP
-------------------------------------------------------------------------------- */
QToolTip {
align: center;
background-color: #F5F5F5;
border: 1px solid #212121;
border-radius: 5px;
color: #212121;
vertical-align:center; }
/* --------------------------------------------------------------------------------
QTreeView - ARBOL VISOR Y MENU ARBOLADO
-------------------------------------------------------------------------------- */
QTreeView {
outline: 0;
background-color: #FFFFFF;
selection-background-color: transparent;
selection-color: #FFFFFF;
show-decoration-selected: 1; }
QTreeView::item {
border-right: 0;
color: #212121;
margin-bottom:2px;
margin-right:10px;
margin-top: 1px;
padding-bottom:2px;
padding-top:1px; }
QTreeView::item:hover {
border-color: transparent;
color: #039BE5; }
QTreeView::item:selected {
color: #01579B; }
/* --------------------------------------------------------------------------------
VCPVControlCasillero - CASILLERO
-------------------------------------------------------------------------------- */
VCPVControlCasillero VCDragTableView {
border: 0px solid #F5F5F5;
background-color: #E1F5FE;
selection-background-color: #E1F5FE;
selection-color: #212121;}
VCPVControlCasillero VCDragTableView:item {
background-color: #FFFFFF;
border: 1px solid #F5F5F5;
border-radius: 3px; }
VCPVControlCasillero VCDragTableView:item:hover {
border: 1px solid #CCCCCC; }
VCPVControlCasillero VCDragTableView:item:focus {
border: 1px solid #01579B;
selection-background-color: #FFFFFF; }
VCPVControlCasillero QFrame {
background-color: #FFFFFF; }
/* --------------------------------------------------------------------------------
QCalendarWidget - CALENDARIO
QWidget#qt_calendar - CALENDARIO
-------------------------------------------------------------------------------- */
QWidget#qt_calendar_navigationbar {
background-color: transparent;
border: 2px solid #F5F5F5;
qproperty-gridVisible: true; }
QWidget#qt_calendar_nextmonth {
background: transparent;
border: 0px solid #FFFFFF;
qproperty-icon: url(":/Resources/tg_buscar_sig.png"); }
QWidget#qt_calendar_prevmonth {
background: transparent;
border: 0px solid #FFFFFF;
qproperty-icon: url(":/Resources/tg_buscar_ant.png"); }
QWidget#qt_calendar_monthbutton, QWidget#qt_calendar_yearbutton {
background: transparent;
border: 0px solid #FFFFFF; }
QWidget#qt_calendar_calendarview {
background-color: #FFFFFF;
border: 2px solid #F5F5F5; }
QCalendarWidget {
color: #212121;
min-width: 300px;
min-height: 260px; }
QCalendarWidget QSpinBox {
background-color: #FFFFFF;
color: #212121;
font-size:12px;
width: 35px; }
QCalendarWidget QSpinBox::up-button {
subcontrol-origin: border;
subcontrol-position: top right;
width:30px; }
QCalendarWidget QSpinBox::down-button {
subcontrol-origin: border;
subcontrol-position: bottom right;
width:30px; }
/* --------------------------------------------------------------------------------
VCOverlayShadow - OVERLAY
-------------------------------------------------------------------------------- */
VCOverlayShadow {
background-color: rgba(255, 255, 255, 5%); }
VCOverlayShadowGui {
background-color: rgba(255, 255, 255, 5%); }
/*--------------------------------------------------------------------------------
VSwitch - Interruptor
--------------------------------------------------------------------------------*/
VSwitch {
max-height: 24px;
min-height: 24px;
max-width: 36px;
min-width: 36px;
/* Fondo: Off, Normal */
qproperty-backgroundColorOff: #D1D1DB;
qproperty-borderColorOff: #D1D1DB;
qproperty-borderSizeOff: 1;
/* Botón: Off, Normal */
qproperty-buttonColorOff: #FFFFFF;
qproperty-buttonBorderColorOff: #FFFFFF;
qproperty-buttonBorderSizeOff: 1;
/* Fondo: On, Normal */
qproperty-backgroundColorOn: #00ACFF;
qproperty-borderColorOn: #00ACFF;
qproperty-borderSizeOn: 1;
/* Botón: On, Normal */
qproperty-buttonColorOn: #FFFFFF;
qproperty-buttonBorderColorOn: #FFFFFF;
qproperty-buttonBorderSizeOn: 1;
/* Fondo: Off, Focus */
qproperty-backgroundColorOffFocus: #D1D1DB;
qproperty-borderColorOffFocus: #D1D1DB;
qproperty-borderSizeOffFocus: 1;
/* Botón: Off, Focus */
qproperty-buttonColorOffFocus: #FFFFFF;
qproperty-buttonBorderColorOffFocus: #00ACFF;
qproperty-buttonBorderSizeOffFocus: 1;
/* Fondo: On, Focus */
qproperty-backgroundColorOnFocus: #00ACFF;
qproperty-borderColorOnFocus: #00ACFF;
qproperty-borderSizeOnFocus: 1;
/* Botón: On, Focus */
qproperty-buttonColorOnFocus: #70D1FF;
qproperty-buttonBorderColorOnFocus: #F0FAFF;
qproperty-buttonBorderSizeOnFocus: 1;
/* Fondo: Off, Hover */
qproperty-backgroundColorOffHover: #D1D1DB;
qproperty-borderColorOffHover: #D1D1DB;
qproperty-borderSizeOffHover: 1;
/* Botón: Off, Hover */
qproperty-buttonColorOffHover: #EBEBEF;
qproperty-buttonBorderColorOffHover: #EBEBEF;
qproperty-buttonBorderSizeOffHover: 1;
/* Fondo: On, Hover */
qproperty-backgroundColorOnHover: #00ACFF;
qproperty-borderColorOnHover: #00ACFF;
qproperty-borderSizeOnHover: 1;
/* Botón: On, Hover */
qproperty-buttonColorOnHover: #DBF3FF;
qproperty-buttonBorderColorOnHover: #DBF3FF;
qproperty-buttonBorderSizeOnHover: 1;
/* Fondo: Off, Disabled */
qproperty-backgroundColorOffDisabled: #EBEBEF;
qproperty-borderColorOffDisabled: #EBEBEF;
qproperty-borderSizeOffDisabled: 1;
/* Botón: Off, Disabled */
qproperty-buttonColorOffDisabled: #EBEBEF;
qproperty-buttonBorderColorOffDisabled: #EBEBEF;
qproperty-buttonBorderSizeOffDisabled: 1;
/* Fondo: On, Disabled */
qproperty-backgroundColorOnDisabled: #EBEBEF;
qproperty-borderColorOnDisabled: #EBEBEF;
qproperty-borderSizeOnDisabled: 1;
/* Botón: On, Disabled */
qproperty-buttonColorOnDisabled: #EBEBEF;
qproperty-buttonBorderColorOnDisabled: #EBEBEF;
qproperty-buttonBorderSizeOnDisabled: 1;
} Aplicar CSS a controles con un identificador concreto
Cuando en un formulario añadimos un control, éste siempre se crea con un identificador:
Por ejemplo, si creamos un formulario con el asistente para la creación de formularios o con la opción generar interfaz de Velneo vDevelop, asociado a una tabla maestra que contenga un campo NAME, si incluimos ese campo en el asistente, el sistema siempre lo creará con el identificador NAME.
Pues bien, supongamos que lo que queremos hacer es que en la aplicación, a todos aquellos controles de edición del campo NAME de una tabla, se ponga la fuente en negrita.
Partiendo de la base de que todos los controles de todos los formularios de nuestra solución tendrán el identificador NAME, lo que haremos será, en un manejador de evento del marco disparado con la señal de post-inicializado, usar el comando interfaz: ejecutar hoja de estilo CSS, y en el código CSS, seguir la sintaxis siguiente:
"NOMBRE_CLASE#ID_CONTROL{
Atributos
}"Donde NOMBRE_CLASE será el nombre que tiene la clase correspondiente al control en la API de Velneo.
#ID_CONTROL será el identificador del control al que queramos aplicar el estilo.
Atributos: Serán los atributos a aplicar al control.
Ejemplo:
"VLineEdit#NAME{
font:bold;
}"Si queremos aplicar la CSS a otros controles del mismo tipo con otros identificadores, añadiremos éstos separados por comas:
"VLineEdit#ED_NAME,#ID_CONTRO2,#ID_CONTROL3{
font:bold;
}"Ahora supongamos que queremos aplicar la CSS a todos los controles de edición alfabética y a todos los controles de edición numérica cuyo identificador sea ID. Dado que se trata de clases distintas, debemos especificar ambas en la hoja de estilos a aplicar:
"VLineEdit#NAME,VNumberSpinBox#ID{
font:bold;
}"Aplicar una CSS de forma selectiva a objetos y subobjetos en una css general
Según explicamos en el punto aplicar CSS a controles con un identificador concreto, todos los controles de un formulario son accesibles mediante su identificador, pero hay un caso especial con las vistas de datos (formularios y rejillas) que es lo que vamos a explicar en este punto.
Por ejemplo, si tenemos un formulario que se llama CLIENTES, podremos acceder mediante la clase VCPVControlFormulario#CLIENTES #, es decir:
"VCPVControlFormulario#Clientes #TXT_AMARILLO{
color: yellow;
}
VCPVControlFormulario#Clientes #TXT_ROJO{
color: red;
}
VCPVControlFormulario#Clientes #BTN_ACEPTAR{
background-color: blue;
}"Si queremos acceder a una rejilla lanzada desde una acción:
"VCPVControlRejilla#CLIENTES VCTableView QHeaderView::section::horizontal{
background-color: orange;
border: 0px;
}"En este caso estamos modificando la cabecera de esa rejilla, pero podríamos modificar cualquier elemento del tableview que pueda ser modificable por CSS.
Ahora, ¿Qué sucede con las vistas de datos incrustadas en un formulario, que son controles que representa a otro objeto? La vista de datos tiene un identificador, y el objeto que se crea en esa vista de datos toma el identificador de la vista de datos, así que si suponemos que tenemos el formulario anterior (CLIENTES) con un control vista de datos que se llama VIS y dentro metemos una rejilla llamada CLIENTES, para poder modificar esa rejilla específicamente habría que acceder de la siguiente forma:
"VCPVControlFormulario#CLIENTES VCVCPVControlRejilla#VIS VCTableView QHeaderView::section::horizontal{
background-color: green;
border: 0px;
}"O si tuviéramos un alternador que se llamara ALTERNADOR y dentro de la vista de datos VISTA, podríamos acceder de la forma siguiente:
"VCPVControlFormulario#CLIENTES VCVCPVControlAlternadorLista#VISTA VCPVControlRejilla#CLIENTES VCTableView QHeaderView::section::horizontal{
background-color: green;
border: 0px;
}"Como se puede apreciar, lo mas importante es que la vista de datos le establece al control que va a pintar su identificador y dentro de un formulario para acceder a ese objeto por tipo + identificador, hay que usar el identificador de la vista de datos en vez de el del objeto.
Wildcards en las CSS de Velneo
En las CSS de Velneo podemos hacer uso de Wildcards para poder aplicar CSS en bloque a controles que tengan un determinado identificador.
"QComboBox[objectName^='FIL'], QDateTimeEdit[objectName^='FIL'], QDoubleSpinBox[objectName^='FIL'] {
font-size: 11px;
min-height: 20px;
padding: 0px;
border-top: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
border-bottom: 1px solid #EEE;
color: #4B4F54;
selection-background-color: #85B09A;
selection-color: #FFF;}
QComboBox[objectName^='FIL']:focus, QDateTimeEdit[objectName^='FIL']:focus, QDoubleSpinBox[objectName^='FIL']:focus {
border-width: 2px;
border-color: #85B09A;
background-color: #FFF;}"Utilizando la notación [objectName^='FIL'] se consigue que se apliquen las etiquetas CSS a todos los controles cuyo nombre en v7 (objectName) empiece (^=) por la cadena indicada.
De esta, añadiendo objetos a los proyectos utilizando una nomenclatura correcta, ya se aplica correctamente la CSS sin modificarla.
Personalizar con css el botón menú de un control de edición de formularios
Cuando en un control de edición le asignamos un menú en la propiedad menú de botón se añade al control un botón para desplegar dicho menú:
En el caso de que queramos personalizar dicho botón por css debemos tener en cuenta que la clase que permite personalizar el botón QToolButton, pero debemos tener en cuenta que si usamos esa clase directamente, nos personalizará no solamente los botones incrustados en los controles de edición, sino también los de todas las toolbars del proyecto.
En el caso de que queramos personalizar solamente los botones de los controles de edición debemos saber que el control en el que se incrusta un botón menú se controla con la clase VAbstractBrowser, por lo tanto, lo que podrías hacer es aplicar por css un css a los QToolButton de esa clase solamente. Por ejemplo:
"VAbstractBrowser QToolButton{
min-width: 24px;
min-height: 24px;
padding: 1px;
margin-right: 1px;
border-radius: 2px;
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop:0 #fff, stop:1 #EEEEEE);
border: 1px solid #CECECE;
color: #727272;
}"Última actualización
¿Te fue útil?