I want to create the following using Qt 5 :-
The interface contains a input box which takes the color input and the box changes color according to the given input
GUI for changing widget color according to input
You need to bind with Signals & Slots the button clicked, then get the text from the QLineEdit and set the stylesheet of the QLabel.
If you want help with the code, post your progress or ask for specific code question
Ok, i'm assuming you already bind the clicked signal.. Now i'm gonna give you 2 options to deal with the problem:
1°: Trust QColor to make that change (which would make the code easiers but limited to colors that Qt have in the system)The function would be:
void MainWindon::on_okButton_clicked()
{
QString text = ui->lineEdit->text();`
ui->label->setStyleSheet("QLabel {border: 3px solid black; background-color: " + text + "}");
}
2°) deal with if statements (which can be really exausting but you have the option to control the colors):
void MainWindon::on_okButton_clicked()
{
QString text = ui->lineEdit->text();`
if(text == "red")
ui->label->setStyleSheet("QLabel {border: 3px solid black; background-color: rgb(255, 0, 0)}");
else if(text == "green")
ui->label->setStyleSheet("QLabel {border: 3px solid black; background-color: rgb(0, 255, 0)}");
else if(text == "blue")
ui->label->setStyleSheet("QLabel {border: 3px solid black; background-color: rgb(0, 0, 255)}");
}
Related
I have a python3 program containing this code snippet:
dmsg.set_selectable(True)
dmsg.set_name("sMsg")
style_provider = Gtk.CssProvider()
css = "#sMsg { background-color: #002348; color: white; padding: 4px 8px; }"
style_provider.load_from_data(bytes(css.encode()))
Gtk.StyleContext.add_provider_for_screen(
Gdk.Screen.get_default(),
style_provider,
Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
When text is selected, the selection is not visible. What has to be added to the "css" statement to set the highlight color and highlight-background color?
An internet search shows many results for HTML, but no examples fitting this situation. An actual example would be preferable.
I may be mistaken, but you might need to add the css "selection" pseudo element.
So try something like this:
dmsg.set_selectable(True)
dmsg.set_name("sMsg")
style_provider = Gtk.CssProvider()
css = "#sMsg { background-color: #002348; color: white; padding: 4px 8px; } #sMsg::selection {color: red; background: yellow;}"
style_provider.load_from_data(bytes(css.encode()))
Gtk.StyleContext.add_provider_for_screen(
Gdk.Screen.get_default(),
style_provider,
Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)
See here for more information
i am trying to change the color of radiobutton on selected and deselected as
QtStylesheet :Qt Stylesheet
but In this link it only refer to Loading a Image but how could I change it color and without loading Image and change border color or styling radiobutton
the requirement is attached in the Image :
Read documentation carefully. It describes all you need. It even almost described your case, the only difference is images instead of colours.
Style sheet for your case is like this:
QRadioButton {
background-color: gray;
color: white;
}
QRadioButton::indicator {
width: 10px;
height: 10px;
border-radius: 7px;
}
QRadioButton::indicator:checked {
background-color: red;
border: 2px solid white;
}
QRadioButton::indicator:unchecked {
background-color: black;
border: 2px solid white;
}
Setting style sheet to next works for me:
QRadioButton:checked{
background-color: red;
}
QRadioButton:unchecked{
background-color: black;
}
Setting style sheet to QRadioButton::indicator:checked doesn't work, because this only changes the settings of the indicator.
If you want to change the background color of your radiobutton when he's selected you should use both slots and stylesheet.
I will name your button MyButton.
In your .h you will find :
private :
QRadioButton MyButton;
private slots:
void changeColorMyButton();
and in your .cpp add in the setup of your Mainwindow :
QObject::connect(MyButton,SIGNAL(clicked(bool)),this,SLOT(changeColorMyButton));
Your button is now connected to the signal clicked and when you will click on your button, the slot changeColorMyButton will be executed. You can now customize your slot.
void Mainwindow::changeColorMyButton()
{
if(this.MyButton.isChecked())
{
this.MyButton->setStyleSheet("background-color: black");
}
else
{
this.MyButton->setStyleSheet("background-color: yellow");
}
}
I need your advices. (Sorry for my eng. I hope than you'll understand me)
1) I want to create custom TabWidget and use QSS. Now it's look like this:
I want fill background under tabs (I accept property called autoFillBackground). It's need look like this:
2) When I start drag and drop tab this tab is filled with white color. And when I drop the tab this tab set custom qss.
I want to change the style when I drag and drop the tab.
Thx
(I was reading qss manual)
some code
QTabWidget::tab-bar {
background-color: black;
}
QTabBar::tab {
background-color: #4094da;
border-color:white;
font: bold 12px 'Arial';
color: white;
height:60px;
}
QTabBar::tab:!selected {
background-color: #9E9E9E;
color: white;
}
QTabBar::close-button {
background-position: center;
background-image: url(":/Appearance/close_chat_item");
}
QTabWidget::pane {
position: absolute;
}
QTabBar::tab:selected {
border-color:#4094da;
background-color: #4094da;
color: white;
}
The QTabWidget does not paint the background, you need to set the background of the parent widget of the QTabWidget.
As I understand, you willing the background color to change in any drag & drop situation(or it is my assumption). If it's like I understand, you should define hover option on your qss. For more info on Qt documentation.
Example code:
QTabBar::tab:selected, QTabBar::tab:hover {
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #fafafa, stop: 0.4 #f4f4f4,
stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
Your priority should be forcing to cost on qss, logic structure consider to second plan or you can use for some kind of workaround.
I have a QTableWidget with 3 columns. 2 of the columns have some text in them, but one of them is empty and I want it to have a background color. Also I want the cells to have borders.
If I do
int i = 0;
foreach (tableData el, data) {
//setting the first cell
ui->eventTable->setItem(i, 1, new QTableWidgetItem);
//ui->eventTable->item(i, 1)->setBackground(el.severityColor);
//ui->eventTable->item(i, 1)->setBackgroundColor(el.severityColor);
ui->eventTable->item(i, 1)->setData(
Qt::BackgroundRole,
QBrush(el.severityColor)
);
//setting the third cell
++i;
}
everything works as expected.
But if before this code I try to add a border with
QString style(
"QTableWidget::item {"
"border: 1px solid white;"
"}"
);
ui->eventTable->setStyleSheet(style);
the background is not set.
I tried with setBackground(), setBackgroundColor() (even though it is deprecated) and setData() as seen in the code, but the result is the same.
Also I tried setShowGrid(true) insted of the above stylesheet, but the border didn't show.
You can reproduce this by creating a table with 1 row and 1 column and trying to set the background of the cell, and then adding the stylesheet for a border.
Am I missing something? What else should I try?
As an alternative, can I target specific rows/cells in the styles, so I can build a stylesheet string that does what I want?
Edit:
I can have another styles in QTableWidget::item and they are applied, the problem is when I have a border.
I also tried to write the border style as:
border-width: 1px;
border-style: solid;
border-color: white;
but still no luck.
Also if I set the background from styles, it works. It doesn't work if I set it in code.
Here are the properties you need to get your table styled appropriately. Note that gridline-color is the property that defines the borders of the items, which is defined in QTableView and not QTableView::item.
QTableView
{
color: {color};
border: 1px solid {color};
background: {color};
gridline-color: {color};
}
QTableView::item
{
background: {color};
}
Obviously you would replace {color} with the appropriate colors for each property.
I guess you need to style the background and border properties
QTableView {
background-color : none;
}
QTableView::item {
border: 1px solid white;
background-color : none;
}
I can't find any way to put a line between items in my list. Am I missing something?
A style sheet would be easiest, for example:
myListWidget->setStyleSheet( "QListWidget::item { border-bottom: 1px solid black; }" );
You'll want to look at some of the style sheet documentation
2 improvements to the accepted answer:
Use the color palette of the widget to achieve a uniform look across different systems.
It is necessary to restore the item:selected style when restyling item
E.g. like this:
const auto & palette = tableWidget.palette();
tableWidget.setStyleSheet(QString("QListWidget::item { border-bottom: 1px solid %1; } QListWidget::item:selected { background-color: %2; color: %3; }")
.arg(palette.midlight().color().name(),
palette.highlight().color().name(),
palette.highlightedText().color().name()));
Here you can see that the separator lines and selection color fit the default style of the widget: