QT Stylesheet for HLine/VLine color

According to QDarkStyleSheet issue, You could use:

QFrame[width="3"], QFrame[height="3]

These selectors, they seem to work cross-platform, and they are unlikely to change. Probably better than using enum values as ints, as they are likely to change with Qt versions, and line styling are not, as they fulfill certain requirements.


QFrame[frameShape="4"] /* QFrame::HLine == 0x0004 */
{
    color: red;
}

QFrame[frameShape="5"] /* QFrame::VLine == 0x0005 */
{
    color: green;
}

HLine and VLine are tricky to style. It's worth taking a look at the "Detailed Description" section of the documentation. For a quick fix, I found that this set of rules allows customizing the appearance of such lines via stylesheet in a reliable and relatively clean manner:

QFrame[frameShape="4"],
QFrame[frameShape="5"]
{
    border: none;
    background: red;
}

This works regardless of the frameShadow property, which otherwise affects their appearance and the effect of style rules. Keep in mind that the width of the lines are not 1px by default -- this can be changed using the min-width, max-width, min-height or max-height properties, as appropriate.

For a more detailed overview of my findings, read along.


Most QFrames have the QFrame::Plain frameShape by default, but HLine and VLine's default frameShape is QFrame::Sunken. This means that they are not really lines, but thin boxes that contain a mid-line that's used to provide the 3D effect. From the documentation:

The mid-line width specifies the width of an extra line in the middle of the frame, which uses a third color to obtain a special 3D effect. Notice that a mid-line is only drawn for Box, HLine and VLine frames that are raised or sunken.

If you set the frameShape to Plain, this midline is still visible, and can be styled with the color property (note: that's not a background-color or border-color!)

But this doesn't work for a HLine/VLine that's left with the default Sunken appearance. One way to fix this could be to set separate styles for Plain and Sunken QFrames by using attribute selectors with the decimal values of the property enums (which are described in the documentation in hehadecimal), like so:

/* Reference (from doc.qt.io/qt-5/qframe.html#types):
 * - frameShape[4] --> QFrame::HLine = 0x0004
 * - frameShape[5] --> QFrame::VLine = 0x0005
 * - frameShadow[16] --> QFrame::Plain = 0x0010 (default for most widgets)
 * - frameShadow[48] --> QFrame::Sunken = 0x0030 (default for HLine/VLine)
 */
QFrame[frameShape="4"][frameShadow="16"],
QFrame[frameShape="5"][frameShadow="16"]
{
    ...
}

QFrame[frameShape="4"][frameShadow="48"],
QFrame[frameShape="5"][frameShadow="48"]
{
    ...
}

but since the styles that work for HLine/VLine with QFrame::Sunken also work for those with QFrame::Plain, it's usually a waste to do so. I show them above for educational value only about how to use attribute selectors.

The best approach is to treat the QFrame as the box that it is, and either (1) set border-top or border-right coupled with a max-height: 0px (or max-width for a VLine), to ensure the inside of the box doesn't take up space in the layout; or (2) use a background color coupled with border: none (in which case, max-height/width should be 1 or larger, otherwise the QFrame is invisible). The latter is the solution I'd recommend, as shown in the first code block above.

Hope this helps!

Tags:

Css

Qt

Stylesheet