Applying StyleSheet @ runtime



  • My application will show 3 QTableView , while opening my application .

    i used the stylesheet as
    @
    // in application.qss

    QHeaderView#detailedviewheader {
    background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0.03 rgba(63, 63, 63, 255), stop:0.56743 rgba(80, 80, 80, 255), stop:0.620865 rgba(102, 102, 102, 255), stop:0.945 rgba(127, 127, 127, 255), stop:1 rgba(218, 218, 218, 255));
    border: 0px;
    }

    @

    @
    // in CTestTableView.cpp
    CTestTableView::CTestTableView(QWidget* mainWin, QWidget *parent, QString sGroupName ) :
    QTableView(parent),
    m_sGroupName( sGroupName ),
    m_mainWin( mainWin )
    {

    horizontalHeader()->setMovable(true);
    horizontalHeader()->setVisible(true);
    horizontalHeader()->setObjectName(QString::fromUtf8("detailedviewheader"));
    

    }
    @
    i have builded 3 QTableView from the above class constructor
    But here i am able to see the stylesheet is used by the first TableView only , remaining 2 QTableView's are not using my customized stylesheet.



  • As QObjects are unique entities object names should also be unique. I'm not quite sure if there is any restriction on non-unique object names but this would explain why only (most probably the first) object found with this name has the style applied. Use setProperty() instead.

    @
    QHeaderView[class="detailedheaderview"] {
    background: ...
    }

    horizontalHeader()->setProperty("class", "detailedviewheader");
    @



  • No its not accecpting... in this specification as well.

    this time, it not even showing the stylesheet property for the first TableView( what i had before)

    may i know again ..
    you want me to change the qss file as
    @
    QHeaderView[class="detailedheaderview"] { background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0.03 rgba(63, 63, 63, 255), stop:0.56743 rgba(80, 80, 80, 255), stop:0.620865 rgba(102, 102, 102, 255), stop:0.945 rgba(127, 127, 127, 255), stop:1 rgba(218, 218, 218, 255)); border: 0px;}
    @

    becoz i am not sure about this declaration.
    [class="detailedheaderview"]



  • This is called a "Property Selector":http://doc.qt.nokia.com/latest/stylesheet-syntax.html#selector-types.

    Try to start with a simple style sheet - if there is an error the style isn't applied at all.
    How do you set your style sheet?



  • I am using app.qss file to set stylesheet for all the controls in my application & i am calling the respective stylesheet from the control(widget) by using object name..
    like here ..

    i am setting the TableView's QHeaderView style sheet as in the below format by using the object name as detailedviewheader.

    @
    QHeaderView#detailedviewheader { background: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0, stop:0.03 rgba(63, 63, 63, 255), stop:0.56743 rgba(80, 80, 80, 255), stop:0.620865 rgba(102, 102, 102, 255), stop:0.945 rgba(127, 127, 127, 255), stop:1 rgba(218, 218, 218, 255)); border: 0px;}
    @

    and i am calling the stylesheet by using the object name

    @
    horizontalHeader()->setObjectName("detailedviewheader");
    @



  • I can assure that applying styles using property selectors works as expected (what I cannot for non-unique object name selectors).

    If it does not work there is either

    • an error in your style sheet or
    • an error in the style sheet setup code


  • I've got the same errors. The key here is that the property must be setted before the StyleSheet. So, after the setupUi method, I've set the property and set the stylesheet again.

    (mainwindow.ui)
    @
    QPushButton[css="primary"]{color:#FFF; border-width:8px; border-image: url(:buttons/primary-button); background-color:rgba(0,0,0,0);}
    QPushButton[css="primary"]:hover { border-image: url(:buttons/primary-button-hover);}
    QPushButton[css="primary"]:pressed { border-image: url(:buttons/primary-button-pressed);}
    QPushButton[css="primary"]:!enabled { border-image: url(:buttons/icon-button);color:#A3A3A3;}
    @

    (mainwindow.cpp)
    @
    ui->buttons_BT5->setProperty("css", "primary");
    ui->centralWidget->setStyleSheet(ui->centralWidget->styleSheet());
    @

    For me seems like a workaround, but I didn't figured out a better way to solve this. The behavior seems reasonable once that the stylesheet was applied when the property wasn't set. The disadvantage of this approach is that the look and feel can be saw only after the compilation.

    At least, that way we can organize the Qt StyleSheets more like a regular CSS :) If someone has a better solution, please let me know.



  • For the QHeaderView i also faced the same problem where i have three tables but the QHeaderView section stylesheet worked only for the first one, So i did the following changes and now it works perfectly.

    I have three tables eg tableViewOne , tableViewTwo and tableViewThree. For each table i set the QHeaderView as follows in my stylesheet.qss file

    @#tableViewOne > QHeaderView::section
    {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: .6, stop: 0.6
    #F1F4F3, stop: 1 #C5D1D5);
    border: 0px;
    height:25px;
    }

    #tableViewTwo > QHeaderView::section
    {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: .6, stop: 0.6
    #F1F4F3, stop: 1 #C5D1D5);
    border: 0px;
    height:25px;
    }

    #tableViewThree > QHeaderView::section
    {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: .6, stop: 0.6
    #F1F4F3, stop: 1 #C5D1D5);
    border: 0px;
    height:25px;
    }@

    Give it a try it works for me :-)



  • I use this
    @
    QString bbstyle;
    bbstyle= "QTextBrowser {Background:" + BlackboardColor.name() + "}";
    ui->editor->setStyleSheet(bbstyle);
    @
    hope it helps



  • I use this
    @
    QString bbstyle;
    bbstyle= "QTextBrowser {Background:" + BlackboardColor.name() + "}";
    ui->editor->setStyleSheet(bbstyle);
    @
    hope it helps


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.