Style combobox item?

Shadowblitz16

does anybody know why I can't style the combobox item?

this is the qss file

QComboBox:item {
	border-image: url(:/Resources/Images/Panel2_Normal.png);
	border-top: 4;
	border-left: 4;
	border-bottom: 4;
	border-right: 4;
	
	background-color: #C87020;
	
	font: url(:/Resources/Fonts/GameJam.ttf);
	color: #C87020;
}


QComboBox:item:selected {
	border-image: url(:/Resources/Images/Panel1_Normal.png);
	border-top: 4;
	border-left: 4;
	border-bottom: 4;
	border-right: 4;
	
	background-color: #C87020;
	
	font: url(:/Resources/Fonts/GameJam.ttf);
	color: #C87020;
}

QComboBox:item::hover {
	border-image: url(:/Resources/Images/Panel2_Normal.png);
	border-top: 4;
	border-left: 4;
	border-bottom: 4;
	border-right: 4;
	
	background-color: #C87020;
	
	font: url(:/Resources/Fonts/GameJam.ttf);
	color: #C87020;
}

I was using this code for a custom combobox to get rid of the arrow

#ifndef ALTCOMBOBOX_H
#define ALTCOMBOBOX_H

#include <QPainter>
#include <QComboBox>

class AltComboBox : public QComboBox
{
    Q_OBJECT
    public:
        AltComboBox (QWidget *parent) : QComboBox(parent) {}
        void  paintEvent (QPaintEvent *ev);
};

#endif // ALTCOMBOBOX_H

#include "altcombobox.h"



///////////////////////////////////////////////////////////////////////////////////////////////////
/// This class is a custom QComboBox which does NOT display the down arrow. The down arrow takes
/// a lot of real estate when you're trying to make them narrow. So much real estate that you can't
/// see short lines of text such as "CH 1" without the digit cut off. The only thing that this
/// custom widget does is to override the paint function. The new paint function draws the combo
/// box (using all style sheet info) without the down arrow.
///////////////////////////////////////////////////////////////////////////////////////////////////

void AltComboBox::paintEvent (QPaintEvent *ev)
{
    QPainter p;
    p.begin (this);
    QStyleOptionComboBox opt;
    opt.initFrom (this);
    style()->drawPrimitive (QStyle::PE_PanelButtonBevel, &opt, &p, this);
    style()->drawPrimitive (QStyle::PE_PanelButtonCommand, &opt, &p, this);
    style()->drawItemText (&p, rect(), Qt::AlignCenter, palette(), isEnabled(), currentText());
    p.end();
}

but then the style for "QComboBox:item:selected" and "QComboBox:item:hover" doesn't work

SGaist

Hi,

Where are you setting that style sheet ?

Why not customise AltComboBox rather than QComboBox ?

Shadowblitz16

wait I can do that? I thought that it would just auto inherit from QComboBox?
I guess I could try it. however that doesn't fix the problem of me being able to stylize the items.

kenchan

your styling syntax is wrong

from the style sheet docs...

QListView::item:selected {
      border: 1px solid #6a6ea9;
  }

  QListView::item:selected:!active {
      background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #ABAFE5, stop: 1 #8588B2);
  }

  QListView::item:selected:active {
      background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #6a6ea9, stop: 1 #888dd9);
  }

  QListView::item:hover {
      background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #FAFBFE, stop: 1 #DCDEF1);
  }

your css...

QComboBox:item::hover {
	border-image: url(:/Resources/Images/Panel2_Normal.png);
	border-top: 4;
	border-left: 4;
	border-bottom: 4;
	border-right: 4;
	
	background-color: #C87020;
	
	font: url(:/Resources/Fonts/GameJam.ttf);
	color: #C87020;
}

Since a QCombBox uses a QListView for it's list I am guessing that it should work with QComboBox::item:hover etc.
However I have not tested this myself. I am just pointing out that your syntax is probably incorrect.

Shadowblitz16

thankyou kenchan
I was following the documentation here: http://manpage.me/docs/userdocs/qt4/html/stylesheet-examples.html

since I couldn't find one on qt 5.
I will try that.

kenchan

if you have Qt Creator search the help index for "style sheets" and you should see the references.
Otherwise you could start here

BTW please mark your posts as solved if you are happy with the solution so other people on the forum can find them easily :-).

Good luck

Shadowblitz16

Thankyou kenchan I will mark this as solved when I confirm it.

Shadowblitz16

@kenchan this still doesn't work I have both of these in my style sheet

QListView {
	border-image: url(:/Resources/Images/Box2_Normal.png);
	border-top: 4;
	border-left: 4;
	border-bottom: 4;
	border-right: 4;
	
	background-color: #C87020;
	
	font: url(:/Resources/Fonts/GameJam.ttf);
	color: #212121;
}

QListView::item, QListView::item:hover {
	border-image: url(:/Resources/Images/Panel2_Normal.png);
	border-top: 4;
	border-left: 4;
	border-bottom: 4;
	border-right: 4;
	
	background-color: #C87020;
	
	font: url(:/Resources/Fonts/GameJam.ttf);
	color: #C87020;
}


QListView::item:selected,  QListView::item:selected:active, QListView::item:selected:!active {
	border-image: url(:/Resources/Images/Panel1_Normal.png);
	border-top: 4;
	border-left: 4;
	border-bottom: 4;
	border-right: 4;
	
	background-color: #C87020;
	
	font: url(:/Resources/Fonts/GameJam.ttf);
	color: #212121;
}
QComboBox {
        border-image: url(:/Resources/Images/Panel1_Normal.png);
        border-top: 4;
        border-left: 4;
        border-bottom: 4;
        border-right: 4;

        background-color: #C87020;

        font: url(:/Resources/Fonts/GameJam.ttf);
        color: #212121;
}

QComboBox::on {
        border-image: url(:/Resources/Images/Panel1_Push.png);
        border-top: 4;
        border-left: 4;
        border-bottom: 4;
        border-right: 4;

        background-color: #C87020;

        font: url(:/Resources/Fonts/GameJam.ttf);
        color: #212121;
}

QComboBox::item {
	border-image: url(:/Resources/Images/Panel2_Normal.png);
	border-top: 4;
	border-left: 4;
	border-bottom: 4;
	border-right: 4;
	
	background-color: #C87020;
	
	font: url(:/Resources/Fonts/GameJam.ttf);
	color: #C87020;
}


QComboBox::item:selected:!active, QComboBox::item:selected:active {
	border-image: url(:/Resources/Images/Panel1_Normal.png);
	border-top: 4;
	border-left: 4;
	border-bottom: 4;
	border-right: 4;
	
	background-color: #C87020;
	
	font: url(:/Resources/Fonts/GameJam.ttf);
	color: #C87020;
}

QComboBox::item::hover {
	border-image: url(:/Resources/Images/Panel2_Normal.png);
	border-top: 4;
	border-left: 4;
	border-bottom: 4;
	border-right: 4;
	
	background-color: #C87020;
	
	font: url(:/Resources/Fonts/GameJam.ttf);
	color: #C87020;
}

the items inside the combobox do not take on the borderimage I assign them.

EDIT: ok seems like I have to do..

QComboBox QAbstractItemView {
        border-image: url(:/Resources/Images/Panel2_Normal.png);
        border-top: 6;
        border-left: 6;
        border-right: 6;
        border-bottom: 6;

        background-color: #283050;

        font: url(:/Resources/Fonts/GameJam.ttf);
        color: #212121;
}

however I can't get the selected item image to change by doing..

QComboBox QAbstractItemView:selected {
        border-image: url(:/Resources/Images/Panel2_Push.png);
        border-top: 6;
        border-left: 6;
        border-right: 6;
        border-bottom: 6;

        background-color: #283050;

        font: url(:/Resources/Fonts/GameJam.ttf);
        color: #212121;
}

also I am having trouble with getting the focus line and color to disappear.

kenchan

@Shadowblitz16
I think the ":selected" is wrong for the QAbstractItemView. I found this in the style sheet documentation.
Maybe something like this will style the list items for you?

The pop-up of the QComboBox is a QAbstractItemView and is styled using the descendant selector:
  QComboBox QAbstractItemView {
      border: 2px solid darkgray;
      selection-background-color: lightgray;
  }

Shadowblitz16

Thankyou kenchan does this support border-images?
I ask this because I want to change the border image of the selected item in the QAbstractItemView.

kenchan

@Shadowblitz16
sorry i have not looked into it in detail. I would assume so since it looks like it supports the box model. why not give it a try and you will have your answer :-).