Important: Please read the Qt Code of Conduct -

Background color of a specific tab of QTabBar (QTabWidget)

  • Hello,

    I want to assign a specific background color to a specific tab header when the user receives a message from another user.
    Here is a screen-shot of what I did to achieve the trick:
    Image of the application

    To achieve the trick, I set "disabled = true" to get the orange color on a "new message received" tab.

    "QTabBar::tab:disabled {"
                             "background-color: #CC3300;"

    However, we cannot click anymore on the tab because the tab is disabled. But it was the only way I found to identify the "new message received" tab and set a background color because there is no "setTabBackgroundColor" function.

    Can I set an Object Name or something to identify this kind of tab? (For example QTabBar::tab#notification is what I want).
    If yes, how can I do it?

    Thank you in advance!

  • Lifetime Qt Champion

    Hi and welcome to devnet,

    You can try this with e.g. dynamic properties

    Hope it helps

  • @SGaist Hi, and Thanks for your answer.

    However, the problem is "Where can I put this property?".
    In fact, I have no access to the tab of the QTabBar, just the wholeQTabBar.
    I can identify a tab of a QTabBar by using setTabEnabled(int index, bool b) and :disabled in the Qt Style Sheet. I cannot set a property of a particular tab of a QTabBar because there is only the setProperty function which is on the QTabBar and not on a specific tab of a QTabBar (such as setTabProperty which doesn't exist).

    How can I identify this? A possibility can be continue to use :disabled to identify the tab but I want to cancel the effect of disabling a tab in this case.

    Thank again in advance!

    EDIT: Another possibility would be to find the whole code source of QTabBar and see how I can do it on my own by surcharging or create my own QTabBar. But I have to find it.

  • @Goutye
    To bring some new explanation, here is the way to access a specific tab of a QTabBar official code source:

    const QTabBarPrivate::Tab &tab = d->;

    More information can be found here:

    The problem is QTabBarPrivate is... obviously private. I cannot use setProperty on this specific tab because I don't have any access to QTabBarPrivate functions. The structure of QTabBarPrivate::tab is private as well so unable to modify anything.

    Is there a way to deal with this case? I just want a background-color for the tabs that received a new message. Particularly complicated as I can see.

    EDIT: As well, the children of a QTabBar are the QCloseButton added to the 2 QToolButton necessary for browsing the tabs when there are too many of them. I am quite stuck.

  • Lifetime Qt Champion

    Looks like you would need to re-implement paintEvent and there you will be able to change the color of the tabs that needs it

  • @SGaist Thank you again for your answer!

    That's exactly what I wanted to try. However, regarding the source code of QTabBar::paintEvent(QPaintEvent *), it seems really complicated to re-implement exactly the whole system because of the private state of QTabBarPrivate.
    So then, I will have to re-implement a large part of the whole QPaintEvent to get a result close to the original.
    I will try tomorrow to see if I can get something working, but it is my first time using a QPaintEvent at this depth, so it will take certainly a lot of time.

  • Have you considered change text color instead?
    Another work around may be creating custom widget for such tab.
    void QTabBar::setTabButton ( int index, ButtonPosition position, QWidget * widget )

  • @alex_malyu Thank you for your answer!
    My specifications required to change the color of the background, that is why I will not change the text color instead.

    Regarding the setTabButton, the problem is the button will be place on the left or right inside the tab and will not take the whole place.

  • I succeeded in implementing the trick. However, a new problem just appeared. A kind of gray bar is drawn under the tab on the top appeared.

    I searched a bit and find that it is due to the
    p.drawPrimitive(QStyle::PE_FrameTabBarBase, optTabBase);
    of the original paintEvent.

    The strategy I use to draw the notified tab is the following one:

    • I call the QTabBar::paintEvent(event) to have the original tab drawn. (The weird gray bar appears at this step)
    • I draw the notified tabs over the existent tabs and redraw the dragged tab.

    Is there a way to fix this weird bar? I will continue to search and post the whole code after.

  • Lifetime Qt Champion

    What OS are you running ?

  • @SGaist Currently Windows, this bar doesn't appear on a normal QTabBar.

  • Lifetime Qt Champion

    It could be a simple question of matching colors. Take a look at the QCommonStyle for the drawing part

  • Thanks for the answer. I was really busy until now. That doesn't seem to be related to QCommonStyle, but if it is, I do not know how to figure it out.

    However, for the moment, I have something that's working well because we changed the designed for something more "material design".
    Thanks for the answers!

Log in to reply