Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Stylesheet for promoted frame



  • I run into problem with promoted QFrame and style sheet.
    I have a custom frame called FrameTest and has its own stylesheet: QFrame {background: red;}
    QtDesigner displays it perfectly.
    In MainWindow, i drag-n-drop a frame then promote it to FrameTest.
    Then I run the program, everything display normal.
    Plz help. I want the promoted frame background in MainWindow become red color.
    Thanks!

    EDIT: For more information, I post my code here:
    FrameTest.h:

    #ifndef FRAMETEST_H
    #define FRAMETEST_H
    
    #include <QFrame>
    
    namespace Ui {
    class FrameTest;
    }
    
    class FrameTest : public QFrame
    {
        Q_OBJECT
    
    public:
        explicit FrameTest(QWidget *parent = 0);
        ~FrameTest();
    
    private:
        Ui::FrameTest *ui;
    };
    
    #endif // FRAMETEST_H
    

    FrameTest.cpp:

    #include "frametest.h"
    #include "ui_frametest.h"
    #include <QPainter>
    FrameTest::FrameTest(QWidget *parent) :
        QFrame(parent),
        ui(new Ui::FrameTest)
    {
        ui->setupUi(this);
    }
    
    FrameTest::~FrameTest()
    {
        delete ui;
    }
    

    FrameTest.ui

    <?xml version="1.0" encoding="UTF-8"?>
    <ui version="4.0">
     <class>FrameTest</class>
     <widget class="QFrame" name="FrameTest">
      <property name="geometry">
       <rect>
        <x>0</x>
        <y>0</y>
        <width>400</width>
        <height>300</height>
       </rect>
      </property>
      <property name="windowTitle">
       <string>Frame</string>
      </property>
      <property name="styleSheet">
       <string notr="true">QFrame {background: red;}</string>
      </property>
      <property name="frameShape">
       <enum>QFrame::StyledPanel</enum>
      </property>
      <property name="frameShadow">
       <enum>QFrame::Raised</enum>
      </property>
     </widget>
     <resources/>
     <connections/>
    </ui>
    

    MainWindow.h

    #ifndef MAINWINDOW_H
    #define MAINWINDOW_H
    
    #include <QMainWindow>
    
    namespace Ui {
    class MainWindow;
    }
    
    class MainWindow : public QMainWindow
    {
        Q_OBJECT
    
    public:
        explicit MainWindow(QWidget *parent = 0);
        ~MainWindow();
    
    private:
        Ui::MainWindow *ui;
    };
    
    #endif // MAINWINDOW_H
    

    mainwindow.cpp

    #include "mainwindow.h"
    #include "ui_mainwindow.h"
    #include "frametest.h"
    
    MainWindow::MainWindow(QWidget *parent) :
        QMainWindow(parent),
        ui(new Ui::MainWindow)
    {
        ui->setupUi(this);
    }
    
    MainWindow::~MainWindow()
    {
        delete ui;
    }
    

    MainWindow.ui

    <?xml version="1.0" encoding="UTF-8"?>
    <ui version="4.0">
     <class>MainWindow</class>
     <widget class="QMainWindow" name="MainWindow">
      <property name="geometry">
       <rect>
        <x>0</x>
        <y>0</y>
        <width>654</width>
        <height>537</height>
       </rect>
      </property>
      <property name="windowTitle">
       <string>MainWindow</string>
      </property>
      <widget class="QWidget" name="centralWidget">
       <widget class="FrameTest" name="frame">
        <property name="geometry">
         <rect>
          <x>30</x>
          <y>30</y>
          <width>501</width>
          <height>401</height>
         </rect>
        </property>
        <property name="styleSheet">
         <string notr="true"/>
        </property>
        <property name="frameShape">
         <enum>QFrame::StyledPanel</enum>
        </property>
        <property name="frameShadow">
         <enum>QFrame::Raised</enum>
        </property>
       </widget>
      </widget>
      <widget class="QMenuBar" name="menuBar">
       <property name="geometry">
        <rect>
         <x>0</x>
         <y>0</y>
         <width>654</width>
         <height>25</height>
        </rect>
       </property>
      </widget>
      <widget class="QToolBar" name="mainToolBar">
       <attribute name="toolBarArea">
        <enum>TopToolBarArea</enum>
       </attribute>
       <attribute name="toolBarBreak">
        <bool>false</bool>
       </attribute>
      </widget>
      <widget class="QStatusBar" name="statusBar"/>
     </widget>
     <layoutdefault spacing="6" margin="11"/>
     <customwidgets>
      <customwidget>
       <class>FrameTest</class>
       <extends>QFrame</extends>
       <header location="global">frametest.h</header>
       <container>1</container>
      </customwidget>
     </customwidgets>
     <resources/>
     <connections/>
    </ui>
    

    If i use this way: FrameTest *test = new FrameTest(); test->show();
    The FrameTest display correctly.


  • Lifetime Qt Champion

    Hi
    Im not sure what the issue is?
    Unless you also set the style sheet on the promote frame then it first be FrameTest (and red) when
    app is running.

    Alternatively, you can apply the style sheet to maiwindow.
    then BOTH the promote and the FrameTest will be red.



  • @mrjj I've post my code above. Plz check.
    The issue is I cant explain why the FrameTest has itself stylesheet (the red thing) but it didnt show it in MainWindow.


  • Lifetime Qt Champion

    @vhptt89
    hi
    The promoted qframe is not a FrameTest before
    app is run.



  • @mrjj

    <widget class="QWidget" name="centralWidget">
       <widget class="FrameTest" name="frame">
        <property name="geometry">
         <rect>
          <x>30</x>
          <y>30</y>
          <width>501</width>
          <height>401</height>
         </rect>
        </property>
    

    Plz check this part on MainWindow.ui.
    In the ui_mainwindow.h, the FrameTest actually constructed.


  • Lifetime Qt Champion

    @vhptt89

    where is the style sheet applied?

    If its NOT applied to mainwinow, then
    its first in effect after the
    setupUI has been run.



  • @mrjj
    It applied in FrameTest.ui.
    It quite simple: QFrame{background: red;}


  • Lifetime Qt Champion

    @vhptt89

    Ok,
    it wont affect the promoted before app is run.



  • @mrjj Is that the conclusion? So I cant do it that way?


  • Lifetime Qt Champion

    @vhptt89
    Maybe I dont understand you.

    If you set the stylesheet inside your own class. Then its first seen when your code runs.

    If you set the stylesheet on the mainwinow, then it will also affect the promote
    qframe and the FrameTest.

    Since the QFrame is NOT really a FrameTest before its run, it will not show as red in the Designer.



  • @mrjj
    I set the stylesheet inside my own class, But it didnt display correctly in runtime.
    And I dont care about how it show in the Designer.


  • Lifetime Qt Champion

    @vhptt89
    Ok, can you show the code where you set it?

    Also try with no name
    setStyleSheet("{background: red;}");



  • As i said above, I set it by using QtDesigner in FrameTest.ui:

    <property name="styleSheet">
    <string notr="true">QFrame {background: red;}</string>
    </property>

    I know I can use another way to do it ( @mrjj suggestion is a good one ). But I needs an explain about why did the stylesheet not affect to my promoted frame?


  • Lifetime Qt Champion

    @vhptt89

    Ahh, sorry. @Ratzz told me what you ment.

    Yes, that is a bit odd. since its sets the stylesheet in ctor so it should also be
    red when running.

    If you look in ui_mainwindow.hfile it has generated the code
    frame = new FrameTest(centralWidget); <<<<<<<<<<<<<<<<<< red style is set in here
    frame->setObjectName(QStringLiteral("frame"));
    frame->setGeometry(QRect(10, 10, 621, 471));
    frame->setStyleSheet(QStringLiteral("")); <<<<<<<<<<<<<<<<<<<<<<<< BUT it clear the red one here.

    So i think you at some point had style sheet on the promote qframe?
    If you place a new QFrame and promote it, it works :)

    The reason it dont work here is that style is set in FrameTest ctor and then set
    to blank in mainwin setupUI.

    To make it work for the existing, find stylesheet to the right in prop list and click the reset button. then it stops insert this blank stylesheet in main ui.
    Just deleting the stylesheet (inside editor) wont work.
    You must use the clear button.



  • @mrjj @Ratzz Thank u guys alot for helping me fix this prob.


Log in to reply