I'm trying to style a combobox in QT5. I'm using QT Creator for the layout and loading an app-wide style sheet at start up.
The css I have related to my combobox is as follows:
QComboBox
{
color:white;
background-color: qlineargradient(x1:0, y1:0, x2:1,y2:1, stop: 1 rgba(228, 41, 81, 100), stop: 0 rgba(234, 107, 101, 100));
border-color: rgba(255,255,255,200);
border-width: 1px;
border-style: solid;
}
QComboBox QListView
{
border-style: none;
background-color: qlineargradient(x1:0, y1:0, x2:1,y2:0, stop: 1 rgba(228, 41, 81, 100), stop: 0 rgba(234, 107, 101, 100));
}
QComboBox::drop-down
{
width: 20px;
border: 1px;
border-color:white;
border-left-style:solid;
border-top-style: none;
border-bottom-style: none;
border-right-style: none;
}
QComboBox::down-arrow
{
image: url(:/ArrowImages/images/whitearrowdown16.png);
width: 16px;
height: 16px;
}
But the text colour in the combo box remainds as the default (black) colour. The colour in the drop down is white. The border colour and styling all work correctly. Is the label on the combobox some sort of sub-control I need to style separately? Or am I missing something else?
Thanks.
Edit:
Added screenshots for clarity
Edit 2:
It looks like this only occurs when the combobox is set to not be editable (which is the correct behaviour for my program, so doesn't really help me.) When the combobox is set to editable, it obeys styles correctly. I've tried adding
QCombobox:!editable
{
color:white;
}
but it doesn't fix the problem.
Only just resolved this. It seems setting the padding property (with any value) on the combobox in the style sheet makes it properly obey the colour styling. I'm assuming it's down to some sort of bug that might only arise on certain set ups, but if anyone else is having the same problem, the following code would work (when compared with that in the original question):
QComboBox
{
color:white;
background-color: qlineargradient(x1:0, y1:0, x2:1,y2:1, stop: 1 rgba(228, 41, 81, 100), stop: 0 rgba(234, 107, 101, 100));
border-color: rgba(255,255,255,200);
border-width: 1px;
border-style: solid;
padding: 1px 0px 1px 3px; /*This makes text colour work*/
}
The View "inside" is a QListView.
QListView
{
color: white;
}
should do the trick.
Using padding as a workaround might introduce some other problems. Perhaps setting selection-color should resolve this issue.
QComboBox
{
selection-color: white;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 months ago.
Improve this question
I am trying to make a simple button that changes appearance when clicked, in a toggle fashion. I use a class defining the general appearance of the button (.button), a class defining the base look of this specific button (.hire) and a class defining the changes when the button has been clicked once (.hired).
I use JS to add the .hired class and everything works perfectly until I hover over the button. The .hired class is added and the default rule for that class is applied. However, the .hired:hover rule isn't applied and doesn't even show up when I inspect the element, when the other hover rules are there.
I am genuinely confused as to what could be causing this one hover rule to be utterly ignored.
Here's the CSS:
.button {
color: white;
font-size: 16px;
font-weight: bold;
background: rgb(202, 67, 1);
border: none;
border-radius: 5px;
padding: 10px;
transition: background .2s;
}
.button:hover {
background: rgb(138, 46, 1);
cursor: pointer;
}
.hire {
position: absolute;
top: 15px;
right: 15px;
line-height: 32px;
text-align: center;
width: 100px;
border: 2px solid rgb(202, 67, 1);
transition: border .2s;
}
.hire:hover{
border: 2px solid rgb(138, 46, 1);
}
.hired {
background-color: transparent;
color: rgb(202, 67, 1);
transition: color .2s;
}
.hired:hover {
background: rgba(0, 0, 0, 0);
color: rgb(138, 46, 1);
}
EDIT: I eventually found a solution, although I didn't fix the issue. Copying the hover rule in a separate style section in the HTML head instead of importing it did the trick. However I still don't understand what the underlaying issue was and it is definitely still there, hidden behind my hack.
The CSS hover rules are not applied on element inspection in Chrome (at least for me). This might be a bug in Chrome. Apparently, the rules are applied when you edit the CSS file and re-upload it. So, in order to check CSS hover rules, upload your CSS file and edit the file, then re-upload it and also :hover pseudo-class doesn't work in the inspector. This means that, for example, if you are trying to use hover on an element to change its background color, you won't see the results of that on the element's inspector. The element's background will be the same color as its regular, non- :hover background.
You can also try this
-add display: block in your CSS rule. This will set the position to block and the element will then be positioned relative to the block it is in.
everything works perfectly until I hover over the button.
The .hired class is added and the default rule for that class is
applied.
However, the .hired:hover rule isn't applied
I had a go at reproducing your setup - and it looks like it works fine and that you've done everything correctly.
Please ask in the comments below if you have any further questions.
Working Example:
const hireButton = document.querySelector('.hire.button');
const clickHireButton = (e) => {
e.target.classList.add('hired');
}
hireButton.addEventListener('click', clickHireButton, false);
.button {
color: white;
font-size: 16px;
font-weight: bold;
background: rgb(202, 67, 1);
border: none;
border-radius: 5px;
padding: 10px;
transition: background .2s;
}
.button:hover {
background: rgb(138, 46, 1);
cursor: pointer;
}
.hire {
position: absolute;
top: 15px;
right: 15px;
line-height: 32px;
text-align: center;
width: 100px;
border: 2px solid rgb(202, 67, 1);
transition: border .2s;
}
.hire:hover{
border: 2px solid rgb(138, 46, 1);
}
.hired {
background-color: transparent;
color: rgb(202, 67, 1);
transition: color .2s;
}
.hired:hover {
background: rgba(0, 0, 0, 0);
color: rgb(138, 46, 1);
}
<button class="hire button" type="button" />Click Me</button>
Good day.
There is an instruction on frame styles, here https://doc.qt.io/qt-5/qframe.html#setFrameStyle
Suppose I want my button to have the Box | Sunken.
How can I do this using QSS?
I tried to do it like this:
frameStyle: box;
background-color: rgb (230, 230, 230);
border: 1px solid white;
border-right: 2px solid rgb (127, 127, 127);
border-bottom: 2px solid rgb (127, 127, 127);
But it didn’t help, apparently I just don’t know any word of the code.
If QSS is what you are looking for then I would recommend looking at the stylesheet reference and stylesheet examples in the documentation. It has helped me countless times when trying to figuring out how to style something with QSS.
Your style sheet should be enclosed in curly brackets as follows:
QFrame {
background-color: rgb (230, 230, 230);
border: 1px solid white;
border-right: 2px solid rgb (127, 127, 127);
border-bottom: 2px solid rgb (127, 127, 127);
}
If you are trying to style a button I would recommend doing something as follows though. There are more examples on the stylesheet reference and examples mentioned earlier.
This is ripped right from the QSS examples documentation under QPushButton
QPushButton {
border: 2px solid #8f8f91;
border-radius: 6px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #f6f7fa, stop: 1 #dadbde);
min-width: 80px;
}
QPushButton:pressed {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
}
QPushButton:flat {
border: none; /* no border for a flat push button */
}
QPushButton:default {
border-color: navy; /* make the default button prominent */
}
Using QSS in this way will allow you to make changes to how the button looks in its different states, etc.
I'm using PyGI to build a GUI for an app I've written in Python 3.4, and I'm using GTK+3's CSS implementation to style the interface.
In my .css file, I've specified that all text by default should be white:
* {
color: #fff;
}
as I'm mostly working against dark/black backgrounds.
The app I'm building has text boxes, however, and GTK automatically gives them context/right-click menus. Unfortunately the default white text styling I've applied also works on the menu, and so the user can't see anything.
If I try to override those settings with:
.menu {
color: #000;
background-color: #f3f3f3;
}
it just turns out like this. The text colour doesn't change, and it doesn't seem to respond to any :disabled pseudo-classes either.
How can I style or customise the context menus of these text fields using GTK+3's implementation of CSS?
I styled the context menu to look the way I want with these lines in the CSS file:
.menu {
border: 1px #444 solid;
background: #0d0d0d;
font: light 12px;
}
.menu .separator {
color: rgba(68, 68, 68, 0.1);
}
.menuitem {
padding: 8px 0px;
}
.menuitem:hover {
background: rgba(255, 255, 255, .1);
}
.menuitem:insensitive .label {
color: #555;
}
It now looks like this.
I saw following image on a site ,
they are not using any background image , doing all this with css .
How can i create a tag like this using css , suppose there is no Buy! button in it ..
here is the link
Link to image
Thanks,
They are using background images in the form of sprites.
Here is the sprite: http://assets2.grouponcdn.com/images/groupon/common-s587a68dd07.png?L4HgENCa
This is indeed an image. But just to prove that it is also possible only using css, here is a fiddle solution : http://jsfiddle.net/bspbg/
input{
background-color:rgba(110, 180, 60, 1);
padding:10px;
border-radius:40px;
border-color:white;
border-width: 3px;
border-style: solid;
font-size:2em;
font-weight:bold;
color: white;
margin:20px;
margin-left: 70px;
box-shadow:-2px -2px 1px 3px rgba(50, 150, 30,1) inset,5px 5px 5px rgba(255, 255, 255,0.5) inset;
}
.somebg{
background-color: rgba(100, 200, 230, 1);
width: 250px;
height: 105px;
box-shadow: 0px 0px 40px rgba(1,1,1,0.5) inset;
}
Here the input is the button. Play with the borders, the radius and the box-shadows, and you're done :)
EDIT: new fiddle with background
You can use the content: "<p>Any html you like</p>" command in CSS to render content inside a tag.
I'm using Twitter Bootstrap for a Rails 3.2.3 project and I'm importing each stylesheet in my application.css.scss file. I'm customizing a page in the static folder (with a render file that's in a different folder) with the static.css.scss file that is above bootstrap files in the application file. I'm trying to make the button different from the normal btn class. My code is:
.btn.signup {
margin-top: 10px;
font-size: 18px;
padding: 10px 48px 10px;
background-color: rgb(255, 138, 22);
}
.btn.signup:hover {
margin-top: 10px;
font-size: 18px;
padding: 10px 48px 10px;
background-color: rgb(255, 138, 22);
}
However in Firefox, the button is still grey except for the outer edges which are the correct color. When I hover over the button, the lower half is orange. Inspecting the button, it shows:
.btn.signup:hover, li.signup.buttons:hover {
margin-top: 10px;
font-size: 18px;
padding: 10px 48px;
background-color: rgb(255, 138, 22);
}
button.btn, input.btn[type="submit"] {
}
.btn:hover, li.buttons:hover {
color: rgb(51, 51, 51);
text-decoration: none;
background-color: rgb(230, 230, 230);
background-position: 0px -15px;
-moz-transition: background-position 0.1s linear 0s;
}
.btn:hover, li.buttons:hover, .btn:active, li.buttons:active, .btn.active, li.active.buttons, .btn.disabled, li.disabled.buttons, .btn[disabled], li.buttons[disabled] {
background-color: rgb(230, 230, 230);
}
.btn.signup, li.signup.buttons {
margin-top: 10px;
font-size: 18px;
padding: 10px 48px;
background-color: rgb(255, 138, 22);
}
How do I make it so the entire button is orange? I'll change the hover color later but for now I want it all to be orange and not grey.
Not sure if you're still looking for help on this. Oh well...I guess I'll still pitch in my thoughts.
Do take note that the class .btn in Twitter Bootstrap actually has a background image attached to it, to generate the somewhat subtle gradient effect.
The gradient covers most of the button's background, so your selected background colour only shows at the edges.
This gradient is also why you partially see your own background colour when you hover over the button - the -moz-transition causes that background image gradient to shift upwards (this is normally used to simulate a gradual darkening effect in the colour of the button when you hover over it). If you look closely, you can see that the top half of the button is coloured by the bottom of the gradient, and the bottom half is the background colour.
So you'll need to define either background-image: none; in your custom class, or better yet, define your own gradient so you don't lose that visual aesthetic. If you take the latter course of action, just remember to make the bottom colour of the gradient the same as your background-color, rgb(255, 138, 22). Otherwise, when you hover over the button, it will be quite clear where the gradient ends, and the background colour starts.