I have a JavaFX 2 application, where all my buttons use the default style (grey gradient). In some special areas of the application, the background color is red, yellow or green. In these areas, I also have buttons.
Instead of re-styling all the different states (normal, hover, pressed) of the button in all three colors, I'd like to just give the button the tint of the background. Is this possible, and how?
If not, is there a way to easily re-style the base button style, and have the hover and pressed states (pseudo-selectors) automatically derived from this style?
If that's not possible, I'm open for suggestions.. My most important goal is to avoid redundant/duplicate declarations (especially of gradients), in case someone wants to add a different color panel later, or just change the shade of one of the background colors.
CSS for the red panel/button:
#my-red-panel {
-fx-border-width: 1;
-fx-border-radius: 5;
-fx-background-radius: 5;
-fx-smooth: true;
-fx-border-color: rgb(209, 65, 42);
-fx-background-color: rgba(255, 78, 50, 0.89);
}
#my-red-panel .button {
-fx-background: rgba(0, 0, 0, 0); /* Now borders look good, but button is still grey*/
}
My best bet so far, is to use a semi-transparent gradient, like so:
#my-red-panel .button {
-fx-background-color: linear-gradient(rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0.2));
}
I still have to declare each state, but at least I can change the underlying colors without having to modify each state. The main problem is that this overrides the entire look of the button, so I was hoping for something better... :-/
Not tested, but try experimenting with:
#my-red-panel {
-fx-base: rgba(255, 78, 50, 0.89);
}
or perhaps:
#my-red-panel .button {
-fx-base: ... ;
}
depending on the exact effects you want.
The trick here is that the default css (caspian.css for JavaFX2.2 or modena.css for JavaFX8) use some pre-defined lookup colors. You can dig out the source for these to see how they are used. If you redefine these lookups for a node in the scene graph, the new definition is propagated to all child nodes.
Related
I have a Vis.js timeline in an Angular5 project with three groups and multiple items/events in each. I figured out how to style each group background individually to make the alternating swim lanes more distinct, by doing:
.vis-background>.vis-group:nth-of-type(even) {
// there is an auto-generated empty group as the first .vis-group, so starting with the 2nd group
background-color: $gray-lighter;
}
.vis-labelset>.vis-label:nth-of-type(odd) {
background-color: $gray-lighter;
}
However, the vertical background grid lines are no longer visible in the groups that are colored gray. It's as if the group background color is layered on top of the grid lines. If I add a z-index: 1; to .vis-vertical or .vis-grid the lines and group color appear correctly, but I lose timeline zooming and movement functionality. How can I apply styling to groups, keep the vertical grid lines visible and also keep all timeline functionality?
A workaround I used that not resolves the problem, but made it less notorious, was define the group like this:
group=
{
id : 0,
content : 'My Group',
style : "background: rgba(82, 226, 233, 0.2);"
};
and define a background item like this
background_item=
{
group : 0,
start : '2018-10-29 00:00',
end : '2018-10-30 02:00',
type : 'background',
className : 'myClassName'
};
where the className come from this style:
.vis-item.vis-background.myClassName {
background-color: rgba(82, 226, 233, 0.2);
}
It uses transparency to prevent hide the vertical lines.
The result was something like this:
Hope it helps while someone found a definitive solution.
I'm trying to remove the border glow (please see screenshot below) that appears by default when a JavaFX button is selected:
I also want to do this using CSS, and not declaratively from within the main JavaFX script. However, I am having trouble figuring out what CSS property I need to use (er, set to 0?) in order to remove that border.
To remove the focus ring display from any control from within code:
control.setStyle("-fx-focus-color: transparent;");
To remove the focus ring for all controls, apply a stylesheet:
.root { -fx-focus-color: transparent; }
To only remove the ring for all buttons, use:
.button { -fx-focus-color: transparent; }
I find the -fx-focus-color attribute setting more straight-forward than relying on some weird combination of insets to remove the focus ring.
In addition, you can use the same setting to change the focus ring to a different color, such as -fx-focus-color: firebrick.
Update Jan 20, 2015
JavaFX 8 shipped with a new default user agent stylesheet (modena). This new user agent stylesheet shipped with an additional setting for focus highlights: -fx-faint-focus-color. For Java 8 applications, it is necessary to set both -fx-focus-color and -fx-faint-focus-color to transparent to remove all traces of the focus ring. See good4m's answer to this question.
Update Dec 10, 2015
If you only set the focus colors to transparent as previously recommended in this answer, for some controls you may see some subtle differentiation between when a control is focused and when it is not. For many applications this will not be an issue and setting the focus colors to transparent will be sufficient.
For more information and alternate solutions, review James_D's answer to Remove blue frame from JavaFX input field and Jens Deter's blog post about How to get rid of focus highlighting in JavaFX. Be aware that the link to Jens Deter's blog unfortunately has some annoying pop-ups.
-fx-focus-color: transparent;
-fx-faint-focus-color: transparent;
There is several way to do this. You can try any of this.
button.setStyle("-fx-focus-color: transparent;");
or
.button{
-fx-focus-color: transparent;
}
or
.button:focused{
-fx-focus-color: transparent;
}
If you want to remove this focus ring in JavaFX 8, rewrite the :focus selector with the .button selector style from modena.css.
.button:focused {
-fx-background-color: -fx-outer-border, -fx-inner-border, -fx-body-color;
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 5, 4, 3;
}
The answer from Stelios Adamantidis is correct, which is
.button:focused {
-fx-background-insets: 0, 0, 1, 2;
}
Here is my explanation:
For example the definition
-fx-background-color: red, green, deepskyblue, blue;
seems to define four layers of background colors, with red as the color for the backmost layer.
For example the definition
-fx-background-radius: 0, 1, 4, 10;
sets the radius for all corners for each color layer. Here, the red layer has all corners with the radius of 0, the green layer has all corners with the radius of 1 and so on.
For example the definition
-fx-background-insets: -10, 0, 3, 5;
sets the padding for the color layers. You can also set negative values then the color will be around the control.
The default values for a button seem to be something like this:
.button:focused {
-fx-background-color: <blueGlowingColor>, <?>, <?>, linear-gradient(to bottom, <?>, <?>);
-fx-background-insets: -1, 0, 1, 2;
}
Setting the first value of insets to 0 hides the glowing color behind the second color.
More about JavaFX CSS you can find here:
http://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html
To completely disable this button selecting do:
button.setFocusTraversable(false);
It's much cleaner than editing in css.
I'm using a QTreeWidget to show a list of categorized properties. I would like the top level items to be a different background colour; however, the arrow indicating it has children is always the default black on white (Windows 8.1, Qt 5.2.1). Here's how I'm adding the QTreeWidget Item:
QBrush fg(Qt::white);
QBrush bg(Qt::darkGray);
QTreeWidgetItem *header = new QTreeWidgetItem();
header->setText(0, "Sound File");
this->addTopLevelItem(header);
header->setFirstColumnSpanned(true);
header->setData(0, Qt::ForegroundRole, fg);
header->setData(0, Qt::BackgroundRole, bg);
header->setExpanded(true);
Here's a screenshot of how this gets rendered.
How can I give it a solid background across the whole row?
For the indicators you can use StyleSheets something like this:
QTreeWidget::branch::!has-children:selected {background-color: rgb(255, 255, 255);}
QTreeWidget::branch::!has-children:selected:alternate {background-color: rgb(0, 0, 0);}
and set this StyleSheet to the QTreeWidget..
If someone knows any other way to do this for the individual items feel free to share... I have similar situation where I was one of the item that have children to be different color..
I'm trying to change the background color of a QAbstractButton (either a QPushButton or QCheckBox) in Qt5 and having zero luck.
This does nothing:
pButton->setAutoFillBackground(true);
QPalette palette = pButton->palette();
palette.setColor(QPalette::Window, QColor(Qt::blue));
pButton->setPalette(palette);
pButton->show();
and if I try changing the style sheet:
pButton->setStyleSheet("background-color: rgb(255,255,0);");
then Qt throws up its hands and draws an afwul-looking blocky button.
There is a page titled "How to change the background color of QWidget" but it just talks about those two methods.
There is also a page "Qt Style Sheets Examples" that implies that if you want to change the background color, you have to take over all aspects of drawing the button, which just seems like overkill.
I need this to run on Mac, Windows, and Ubuntu Linux, and it's really not a happy thing if I have to manually draw everything about the button 3 times (once for each platform).
Am I missing something obvious?
p.s. By "background color" I mean the area surrounding the button, not the color under the text on the face of the button.
I had the same issue, but finally got this to work. I'm using Qt 5 with the Fusion color theme:
QPalette pal = button->palette();
pal.setColor(QPalette::Button, QColor(Qt::blue));
button->setAutoFillBackground(true);
button->setPalette(pal);
button->update();
Try these commands in the exact order as above, and if that still doesn't work, set your theme to Fusion and try again.
Good luck!
Add propoerty border:none; to the stylesheet
For some reason this removes the default background color also.
Example: background-color: rgba(46, 204, 113, 0.4); border: none;
Try this:
QColor col = QColor(Qt::blue);
if(col.isValid()) {
QString qss = QString("background-color: %1").arg(col.name());
button->setStyleSheet(qss);
}
as mentioned at the QT Forum by #goetz.
I used some different definition of Qcolor col as QColor col = QColor::fromRgb(144,238,144); and this works for me.
Changing the Dialog styleSheet Property works for me, set this property to:
QPushButton:pressed {
background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 rgba(60, 186, 162, 255), stop:1 rgba(98, 211, 162, 255))
}
QPushButton {
background-color: #3cbaa2; border: 1px solid black;
border-radius: 5px;
}
QPushButton:disabled {
background-color: rgb(170, 170, 127)
}
I found a stupid way, tried every attribute in palette, and it works for me when changing 'QPalette::Base'.
Maybe you can have a try.
pButton->setAutoFillBackground(true);
QPalette palette = pButton->palette();
//palette.setColor(QPalette::Window, QColor(Qt.blue));
//palette.setColor(QPalette::Foreground, QColor(Qt.blue));
palette.setColor(QPalette::Base, QColor(Qt.blue));
//palette.setColor(QPalette::AlternateBase, QColor(Qt.blue));
//palette.setColor(QPalette::ToolTipBase, QColor(Qt.blue));
//palette.setColor(QPalette::ToolTipText, QColor(Qt.blue));
//palette.setColor(QPalette::Text, QColor(Qt.blue));
//palette.setColor(QPalette::Button, QColor(Qt.blue));
//palette.setColor(QPalette::ButtonText, QColor(Qt.blue));
//palette.setColor(QPalette::BrightText, QColor(Qt.blue));
pButton->setPalette(palette);
pButton->show();
reference link : How to get a stylesheet property?
I've struggled with same problem. You need to choose QPalette::Button instead of QPalette::Window. Qt reference says this: QPaletteButton - The general button background color. This background can be different from Window as some styles require a different background color for buttons.
So I solved it this way:
QPalette pal=this->palette(); \\"this" is my derived button class
pal.setColor(QPalette::Window, style.background);
QColor col=style.background; \\ my style wrapper, returns QColor
this->setAutoFillBackground(true);
this->setPalette(pal);
I want to toggle the color of a button On/Off.
This works for me ...
QPalette pal = ui->pushButton->palette();
if (bIn)
pal.setColor(QPalette::Button, QColor(Qt::green));
else
pal.setColor(QPalette::Button, QColor(Qt::red));
ui->pushButton->setPalette(pal);
ui->pushButton->setAutoFillBackground(true);
ui->pushButton->repaint();
I flip the value of bIn on a Clicked Signal/Slot.
void BtnFrame::on_pushButton_clicked()
{
if (bIn)
bIn=false;
else
bIn=true;
setColor();
}
So I am trying to change only the background color of my MainWindow. When I try to do this using this->setStyleSheet("background-color:black;"); for example it changes the background of everything: child widgets, QTextBoxEdit background, everything.
Is there a way to only change the background of just the main window?
As you know, every QMainWindow has a central widget and by default is named centralwidget.
So the best way of solving this issue is changing the background for that widget.
It's pretty simple when we use a style sheet. In this case would be the following one:
#centralwidget {
background-color: rgb(0, 0, 0);
}
you can use Qt class name before QSS, like
QMainWindow { background-color: rgb(0, 0, 0);}
in your example QMainWindow > QWidget { background-color: rgb(0, 0, 0);} maybe better.
please see http://doc.qt.io/qt-4.8/stylesheet-syntax.html for more information