Qt: Style the >> arrow when a QToolBar is too small

Question

I have a QToolBar with QToolButtons. When the main window is too small, it will show a ">>" button , to extend the view into multiple lines and show all QToolButtons.

How can I style this ">>" button? I'd like to change the icon and the background color.

I already tried with these selectors: QToolButton::menu-indicator, QToolButton::menu-button, QToolButton::down-arrow. Doesn't work.

How can I change the color and the width of the ">>" button?

QToolButton {
    background-color: transparent;
    border: 1px solid #3A3939;
    border-radius: 3px;
}

QToolButton:hover, QToolButton::menu-button:hover {
    background: #787876;
}

QToolButton::checked{
    background: #484846;
    border: 1px solid #787876;
}

QToolButton:pressed, QToolButton::menu-button:pressed {
    background: #787876;
}

QToolButton[popupMode="1"]{
/* only for MenuButtonPopup */
    padding-right: 30px;
    background: red;
}
QToolButton[popupMode="2"]{
/* only for OSC Server Status */
    padding-right: 30px;
    background: #484846;
}
QToolButton[popupMode="2"]:hover{
    background: #787876;
}
QToolButton::down-arrow{
} 
/* the subcontrols below are used only in the MenuButtonPopup mode */
QToolButton::menu-button{
}

QToolButton::menu-button:hover{
    background: #787876;
}
QToolButton::menu-button:pressed{
}
QToolButton::menu-indicator{
    bottom: 5px;
    right: 5px;
}

Answer 1

You cannot do it via CSS, however it can be done using a custom styling:

• Inherit a new class from QStyle / QCommonStyle.
• Reimplement pixelMetric to change a size of the button.
• Qt4: Create a slot standardIconImplementation to change an icon of the button.
• Qt5: Reimplement standardIcon to change an icon of the button.
• create this style and use setStyle to apply it to the toolbar (or to the application).

Reimplemented methods:

virtual int MyStyle::pixelMetric(PixelMetric pm, const QStyleOption* option, const QWidget* widget) const override
{
  if (pm == QStyle::PM_ToolBarExtensionExtent) 
    return mySize; // width of a toolbar extension button in a horizontal toolbar and the height of the button in a vertical toolbar
  return QStyle::pixelMetric(pm, option, widget);
}

Q_SLOT QIcon MyStyle::standardIconImplementation(StandardPixmap standardIcon, const QStyleOption * option = 0, const QWidget * widget = 0) const
{
    switch (standardIcon)
    {
    case QStyle::SP_ToolBarHorizontalExtensionButton :
        return m_toolBarHExtendButtonIcon;

    case QStyle::SP_ToolBarVerticalExtensionButton :
        return m_toolBarVExtendButtonIcon;
    }

    return QStyle::standardIconImplementation(standardIcon, option, widget);
}

Answer 2

Thanks a lot!

However, inheriting from QStyle implies to reimplement a lot of functions. I chose to inherit from QCleanLookStyle (but there are many other nice styles) to reimplement only pixelMetric and standardIconImplementation.

For those who chose to use QCleanLookStyle as i did, don't forget to call correct parent function in pixelMetric, otherwise you will get link errors.

virtual int pixelMetric(PixelMetric pm, const QStyleOption* option, const QWidget* widget) const override 
{
if (pm == QStyle::PM_ToolBarExtensionExtent)
return 1234; 
return QCleanlooksStyle::pixelMetric(pm, option, widget);
}

Thanks for the answer, it works.

You cannot do it via CSS, however it can be done using a custom styling:

• Inherit a new class from QStyle / QCommonStyle.
• Reimplement pixelMetric to change a size of the button.
• Qt4: Create a slot standardIconImplementation to change an icon of the button.
• Qt5: Reimplement standardIcon to change an icon of the button.
• create this style and use setStyle to apply it to the toolbar (or to the application).

Reimplemented methods:

virtual int MyStyle::pixelMetric(PixelMetric pm, const QStyleOption* option, const QWidget* widget) const override
{
  if (pm == QStyle::PM_ToolBarExtensionExtent) 
    return mySize; // width of a toolbar extension button in a horizontal toolbar and the height of the button in a vertical toolbar
  return QStyle::pixelMetric(pm, option, widget);
}

Q_SLOT QIcon MyStyle::standardIconImplementation(StandardPixmap standardIcon, const QStyleOption * option = 0, const QWidget * widget

= 0) const { switch (standardIcon) { case QStyle::SP_ToolBarHorizontalExtensionButton : return m_toolBarHExtendButtonIcon;

  case QStyle::SP_ToolBarVerticalExtensionButton :
      return m_toolBarVExtendButtonIcon;
  }

    return QStyle::standardIconImplementation(standardIcon, option, widget);
}