Style combobox item?

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 :-).