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 , y a la .

/*  --------------------------------------------------------------------------------
    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)
    -------------------------------------------------------------------------------- */

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 {
    background-color: #FFFFFF;
    border: 0px solid #F5F5F5;
    selection-background-color: #FFFFFF; }
    
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; }

/*  --------------------------------------------------------------------------------
    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; }

    /*  --------------------------------------------------------------------------------
	VCPVControlCasillero - CASILLERO 
	-------------------------------------------------------------------------------- */

VCPVControlCasillero VCDragTableView {
	border: 0px solid #F5F5F5;
	background-color: #E1F5FE;
	selection-background-color: #E1F5FE;
	selection-color: #212121;}
	
VCPVControlCasillero VCDragTableView:item {
	border: 1px solid #F5F5F5; }

VCPVControlCasillero VCDragTableView:item:hover {
	border: 1px solid #808080; }

VCPVControlCasillero VCDragTableView:item:focus {
	background-color: #E1F5FE;
	border: 1px solid #212121; }

VCPVControlCasillero QFrame {
	background-color: #FFFFFF; }


/*  --------------------------------------------------------------------------------
	VCOverlayShadow - OVERLAY 
	-------------------------------------------------------------------------------- */
	
VCOverlayShadow {
background-color: rgba(255, 255, 255, 5%); }

VCOverlayShadowGui {
background-color: rgba(255, 255, 255, 5%); }

Aplicar CSS a controles con un identificador concreto

Cuando en un formulario añadimos un control, éste siempre se crea con un identificador:

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

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;
}"

"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.

"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.

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 hace 1 año

¿Te fue útil?

Ejemplos de CSS

Ejemplo documentado de personalización de objetos visuales y controles

Aplicar CSS a controles con un identificador concreto

Aplicar una CSS de forma selectiva a objetos y subobjetos en una css general

Wildcards en las CSS de Velneo

Personalizar con css el botón menú de un control de edición de formularios

Ejemplo documentado de personalización de objetos visuales y controles

Aplicar CSS a controles con un identificador concreto

Aplicar una CSS de forma selectiva a objetos y subobjetos en una css general

Wildcards en las CSS de Velneo

Personalizar con css el botón menú de un control de edición de formularios