Need to make transparent textview. Earlier I used gtk version 3.6.4 and made it using CSS file
GtkTextView{
font:Times New Roman, 20;
background:transparent;
}
Now I use gtk version 3.20.6 and make this css, font is changed (so css node is valid) but textview have white background, transparent doesn't work
textview{
font:Times New Roman, 20;
background:transparent;
}
If it's possible to make textview transparent using some code, it will also be good.
From the documentation for GtkTextView (emphasis mine):
GtkTextView has a main css node with name textview and style class .view, and subnodes for each of the border windows, and the main text area, with names border and text, respectively. The border nodes each get one of the style classes .left, .right, .top or .bottom.
Setting the text node under textview is what you need:
textview text {
font:Times New Roman, 20;
background:transparent;
}
Obviously, the textview part can be changed to whatever you need, for example #mytextviewid or .mytransparenttextviewclass so you can apply to a subset of all textviews using the style context.
Related
I am working on a Javafx application and I tried to add some Labels, Buttons and Texts, which resizes when the user resizing the Scene. All Nodes are inside a VBox, which itself is inside a StackPane.
My test application:
public class Test extends Application
{
public static void main(String[] args)
{
launch(args);
}
#Override
public void start(final Stage primaryStage)
{
StackPane pane = new StackPane();
VBox box = new VBox();
box.setAlignment(Pos.CENTER);
Label l = new Label("Label");
Text t = new Text("Text");
t.getStyleClass().add("test");
Button b = new Button("Button");
pane.heightProperty().addListener(listener ->
{
double h = pane.getHeight()/5;
l.setFont(Font.font(l.getFont().getFamily(), h));
t.setFont(Font.font(t.getFont().getFamily(), h));
b.setFont(Font.font(b.getFont().getFamily(), h));
});
box.getChildren().addAll(l, t, b);
pane.getChildren().add(box);
primaryStage.setScene(new Scene(pane));
primaryStage.getScene().getStylesheets().add(Path.of("test.css").toUri().toString());
primaryStage.show();
}
}
If I resize the Stage it works as expected. But unfortunately only with pure Java code.
Because after adding my css file, the Labeled controls behave different. While the Text elements continue to change in size, the Labels and Buttons does not change their size anymore.
My css file, which does not work:
.label
{
-fx-text-fill: red;
-fx-font-family: impact;
}
.test
{
-fx-fill: red;
-fx-font-family: impact;
-fx-font-size: 2em;
}
.button
{
-fx-text-fill: red;
-fx-font-size: 2em;
}
I asked myself what I did wrong and have tested different css states. I found out, when I omit font values in css it works, otherwise it does not. Therewhile it does not matter which font value occurs, only one font value is required to miss the behavior.
My css file, which works:
.label
{
-fx-text-fill: red;
//-fx-font-family: impact;
}
.test
{
-fx-fill: red;
-fx-font-family: impact;
-fx-font-size: 2em;
}
.button
{
-fx-text-fill: red;
//-fx-font-size: 2em;
}
1. Question: -has changed, see below-
Do I missunderstand something about css and Javafx, or did I something wrong in my css file or is there a bug?
2. Question: -solved-
Have I to put the font values with java code or is there an other way to add the font?
Thank You for helping!
Update
As recommended I have studying the follow guide:
https://openjfx.io/javadoc/14/javafx.graphics/javafx/scene/doc-files/cssref.html
The JavaFX CSS implementation applies the following order of precedence:
The implementation allows designers to style an application by using style sheets to override property values set from code. For example, a call to rectangle.setFill(Color.YELLOW) can be overridden by an inline‑style or a style from an author stylesheet. This has implications for the cascade; particularly, when does a style from a style sheet override a value set from code? The JavaFX CSS implementation applies the following order of precedence: a style from a user agent style sheet has lower priority than a value set from code, which has lower priority than a Scene or Parent style sheet. Inline styles have highest precedence. Style sheets from a Parent instance are considered to be more specific than those styles from Scene style sheets.
In my case this means, I will use the inline style to make it proper.
thus the 2. Question is solved
But, because of Parent style sheet > value set from code, it also means, all Nodes are not allowed to change theire size, even the Text Node.
Therefore I changed my 1. Question to:
Why does the JavaFX CSS order of precedence differ between Text and Controls
Question 1:
It's not a bug, it's a conflict of priorities. .setFont() has a lower priority than that CSS. Just replace .setFont() to .setStyle() and sample will work as you planned:
l.setStyle("-fx-font-size:" + h + ";");
t.setStyle("-fx-font-size:" + h + ";");
b.setStyle("-fx-font-size:" + h + ";");
Question 2:
Try to keep all about styles in CSS. It's the best practice.
I'm using QTableView class in my GUI and I would like the selected row to have the same color whether the TableView is active or inactive.
I tried to set this CSS stylesheet to achieve this:
QTableView:!active {
selection-background-color: palette(Highlight);
selection-color: palette(HighlightedText)
}
On Linux, it works just fine, but on Windows 7, when the TableView loses its focus, the text turns black instead of staying white (the background stays blue, so that part is OK). Am I missing something here ?
You also have to style text color, for example just add:
QTableView:!active {
...
selection-color: white;
}
This works well in python
pal = tbl_list.palette()
pal.setColor(QPalette.Inactive, QPalette.Highlight, pal.color(QPalette.Active, QPalette.Highlight))
tbl_list.setPalette(pal)
I have a QDockWidget with a transparent background, but I would like to change the background color or background image when it is floating. It doesn't look like the qt style sheets have a pseudo state to tell you whether or not they are floating, so I'd like to know: is this possible to do?
Found the solution. Add the following connection in the code:
connect(knobDock, &QDockWidget::topLevelChanged, [&] (bool isFloating)
{
if (isFloating)
{
setAttribute(Qt::WA_TranslucentBackground, false);
setAttribute(Qt::WA_NoSystemBackground, false);
}
});
This will cause the dock widgetto use whatever background is specified in the stylesheet when the dock is floating, but it will be transparent (i.e. show the mainwindow background) when it's docked.
You can use custom properties to do this.
Thanks #phyatt for link to Dynamic Properties and Stylesheets.
To declare custom property in your custom class you can write in .cpp:
setProperty("customPropertyName", 1);
or in .h (don't forget to define and implement used get/set access methods too):
Q_PROPERTY( int customPropertyName, READ getCustomPropertyName, WRITE setCustomPropertyName);
And in your global stylesheet file you can use the state of your custom property as following:
.YourClass[customPropertyName="1"] {
background-color: transparent;
}
.YourClass[customPropertyName="2"] {
background-color: black;
}
Also it's needed to reload stylesheet of the object instance after your set new property value, because stylesheets are not recalculated automatically:
object->style()->unpolish(tstFrame);
object->style()->polish(tstFrame);
object->update();
or:
object->setStyleSheet("/* */");
I need to use textarea in my program and I also need it to be read-only.
This is part of my main program where I create textArea:
final TextArea ta = new TextArea();
ta.setMaxSize(9*x, 7*x);
ta.setId("textarea");
ta.setTranslateX(x);
ta.setTranslateY(2*x);
ta.setDisable(true);
This is part of my css file:
#textarea {
-fx-font: 13px "Serif";
-fx-background-color: BEIGE;
}
If I delete the row: ta.setDisable(true); Css works like I want it to work. But after I set disable true, it just makes the textarea transparent, which makes the text really hard to read and the background color is not excatly what I want too.
Is there any other way to set text readonly? Or is there a way to use css after disable. I really need it to be TextArea not Label or any other type. Thank you in advance.
If you do not want the user to make changes to the textarea use the setEditable(boolean) method to false. The same method exists for most editable nodes in javafx(Textfield and PasswordField).
I am designing a UI with Qt Creator 3.6.1
I am using Qt designer form.
I have a QWidget which contains 20 QLabels.
I want 10 of these QLabels to have a red background color
and the other 10 to have a blue background color.
I want to use css for this purpose.
I found out that you can style all QLabels in parent widget css which will style all labels.
QLabel
{
background-color: red
}
However in my case I want two classes of styles.
Is there a way to do so by not styling each of the remaining 10 blue labels individually?
I know that I can style elements by name but that's a huge amount of effort.
If you want to use CSS class you have to set a class name to your QLabels:
QLabel* redLabel = new QLabel("red label");
QLabel* blueLabel = new QLabel("blue label");
redLabel->setProperty("class","my-1st-class");
blueLabel->setProperty("class","my-2nd-class");
Then use your class names in your CSS file :
.my-1st-class{
background-color: red;
}
.my-2nd-class{
background-color: blue;
}