How to change frame style using QSS? - qt

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.

Related

how to change the Qt slider's border?

i am in Qt5.7 and changed my scrollbar style sheet by this code:
QScrollBar::sub-page:horizonta,QScrollBar::add-page:horizontall {
background: rgb(45, 45, 45);
border:none;
}
QScrollBar{ selection-color: rgb(255, 0, 0);
background-color:rgb(24, 24, 24);
border:none;
}
and the result is :
the question is how to change the slider's border COLOR?(the white border that pointed in the picture)
)
You can try with handle, sub-page, add-page, add-line, sub-line values in the sample below the border looks with different colors:
QScrollBar{
background: rgb(45, 45, 45);
background-color:rgb(24, 24, 24);
margin: 0;
}
QScrollBar::handle:horizonal{
border: 2px solid red;
}
QScrollBar::sub-page:horizontal{
border: 2px solid blue;
}
QScrollBar::add-page:horizontall {
border: 2px solid green;
}
QScrollBar::add-line:horizontal {
border: 2px solid yellow;
}
QScrollBar::sub-line:horizontal{
border: 2px solid white;
}
Also this link: https://forum.qt.io/topic/59351/qscrollbar-hiding-add-line-and-sub-line-when-moved was useful for me

Less not compiling parametric mixins

I am fairly new to Less and I was just running through some of the simple concepts and found that when ever I use a parametric mixin, it doesn't compile to the CSS file.
Example, this is my style.less file:
#color: #000;
.boxshadow (#shadow:2px 2px 5px rgba(0,0,0,.4)) {
-webkit-box-shadow: #shadow;
-moz-box-shadow: #shadow;
box-shadow: #shadow;
}
.box{
.boxshadow;
color: #color;
}
and this my compiled style.css file:
.box {
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
color: #000;
}
It's recognising the values on .boxshadow and carrying them through to .box, but it isn't compiling .boxshadow as it's own CSS class.
I have compiled with the command line and a Sublime Text 3 package, both outputting the same css.
Am I missing something simple?
Thanks in advance!
If you want to create a mixin but you do not want that mixin to be output, you can put parentheses after it.
See here

QComboBox text colour won't change with style sheet

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;
}

Is there a way that I can rewrite my CSS border to use color codes instead of RGB?

I have the following in my code that I inherited.
border: 1px solid;
border-top-color: rgb(80, 163, 200);
border-right-color: rgb(41, 124, 180);
border-bottom-color: rgb(8, 63, 111);
border-left-color: rgb(41, 124, 180);
Is there a way that I can change this to just a normal border CSS or do I still need to specify each side?
Yes you can write it normally
border: 1px solid;
border-top-color: #50A3C8;
border-right-color: #297CB4;
border-bottom-color: #083F6F;
border-left-color: #297CB4;
You can use the following Tool to convert your rgb to hex values
In one line
border: 1px solid;
border-color: #50A3C8 #297CB4 #083F6F #297CB4
The syntax is Border-color: top right bottom left;
yes. You can use hash code.
for example to show white color, you can use #ffffff
border : 1px solid #ffffff;
CSS for your above example,
Border-top : 1px solid #0053a3; Border-right : 1px solid #297cb4; Border-bottom : 1px solid #083f6f; Border-left : 1px solid #297cb4;
You can insert the Hexidecimal colour values instead of RGB:
border-style:solid;
border-color:#0000FF;
There are many sources for finding the Hex values for the colours you wish to use : http://www.w3schools.com/tags/ref_colorpicker.asp
Do you mean like this?
border-color: rgb(80, 163, 200) rgb(41, 124, 180) rgb(8, 63, 111) rgb(41, 124, 180);

Chrome CSS - Styling File Input

Here is my file input rendered in Chrome:
In IE it looks a lot more basic, which is fine (although the vast inconsistencies with this particular control are frustrating!)
My default CSS for inputs is:
input{
font-family: arial, sans-serif;
font-size: 12px;
font-weight: bold;
color:White;
background-image:url(../images/buttonBG.png);
height:27px;
border:1px solid #000;
border-radius: 7px;
-moz-border-radius: 7px;
padding: 5px 20px 5px 20px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
text-shadow: 0px 1px 2px #000;
}
input:hover{
text-shadow: 0px 1px 2px #fff;
background-image:url(../images/buttonBGo.png);
}
As you can see there are two types of text on the control, is it possible to style both individually?
Also is there any way to specifically select file inputs? Like input.file (doesn't seem to work). If this is not possible, how do I remove all the CSS the input style has applied to it (so I am working with a blank slate again).
Though i have never implemented it anywhere but while studying about the same i came across this url
http://pixelmatrixdesign.com/uniform/
This might help you out.
you can't differentiate input types in IE. In recent browser you might be able to achieve it with css3 attributes selectors:
input[type=button] {
border: 15px solid Red;
}
what you can do is manually add a css class to your file input:
<input type="file" class="inputFile" />
.inputFile { color: Yellow; }
For full customazation (e.g. changing the look of the browse button) you'll need to use the label element technique.
It's fully semantic, accessible and requires no JavaScipt. Basically, you hide the input, ensure the id is set on both the label and file field, then style the label accordingly. Here's a great article that explains the technique along with a CodePen (https://codepen.io/bmarshall511/pen/bjyEgq) that shows how it's done: https://benmarshall.me/styling-file-inputs/
[type="file"] + label {
background: #f15d22;
border-radius: 5px;
color: #fff;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}

Resources