Is it possible to add inline CSS code programmatically?
Like, I have defined a CSS separator like this:
.hr{
border-top: 1px solid black;
padding-bottom: 10px;
}
Now I sometimes want to have it in a different color or a different size.
Would I have to create further .hr-black, .hr-blue css styles and apply them separately by .addStyleName()? Or can I somehow set the color programmatically?
No, you can only change CSS at specific component using component.addStyleName(), but you can use it dynamically, like this:
if (condition)
component.addStyleName("black");
else
component.addStyleName("blue")
Related
I have developed my site using a theme (HTML, CSS, JavaScript).
But the Blog Title is using default link color.
I have tried many ways to use the Title color, but I became unsuccessful to do that.
How can I change the Title color?
Title color is disabled
Title is using Default link color
You can override the css properties using !important.
So, the following change might help:
.header-logo h1 {
color: #065445 !important;
font-size: 30px;
line-height: 1.4em;
}
Apply color property to "a" tag, not on h1. You can either use the following ways:
inline-CSS to impose this color to the title.
Use !important with color property of CSS.
.header-logo h1 a{
color: #065445 !important;
}
I want to style the font of the CalendarTimeTextField Popup control using a CSS File.
The following entry doesn't work for me:
.CalendarTimeTextFieldSkin_popup {
-fx-text-fill: white;
-fx-font-style: italic;
}
Setting the font-type works, changing text color doesn't.
Thanks for supporting me
GGK
The text is rendered with a Text node (https://docs.oracle.com/javafx/2/api/javafx/scene/doc-files/cssref.html#text) so use -fx-fill and/or -fx-stroke.
So I have the following code snipet which I want applied to 99% of my labels in my JavaFX application. However, sometimes I don't want it applied. Unfortunately whenever I try to call
myFont.setFont(Font.loadFont(etc etc);
It is unable to override the label class in the CSS file. How can this be done? Thank you!
.label
{
-fx-font-size: 14pt;
-fx-font-family: "Segoe UI Semibold";
}
There are different ways to do it. Few of the approaches are described here :
Define a different style-class instead of using the default .label and use it on your 99% of labels.
Code :
mylabel.getStyleClass().add("my-label")
CSS :
.my-label {
-fx-font-size: 14pt;
-fx-font-family: "Segoe UI Semibold";
}
Remove the default label style class and set a new style class to 1% of the labels. This will remove the already present .label style class from the node. This seems to be an easier approach but if I were you, I would not go with this approach since we <3 the default styles and we want them to be applied to the respective nodes by default.
Code :
mylabel.getStyleClass().setAll("my-label");
.label is one of the built in styles that is applied to all Nodes of type Label. You can remove any style class like this:
Label lbl = ...
lbl.getStyleClass().remove("label");
However I would suggest another approach that does not involve removing a style class especially one of the built ins.
As there seems to be only a selected few labels, that don't have that style you can override it on those Labels:
.label-override {
-fx-font-size: 10pt;
-fx-font-family: "Segoe UI Semibold";
}
Label otherLbl = ...
otherLabel.getStyleClass().add("label-override);
I have lots of tool-tips in my SmartGWT application and now I want to change the width of each tool-tip without setting width of each individual tool-tip that is most tedious task.
I can set the width of tool-tip in SmartGWT using Canvas#setHoverWidth() but my concern is to apply this setting globally applicable for whole application.
Is there any way in SmartGWT to specify the tool-tip width globally applicable for whole application using CSS or JAVA code?
For sample code have a look at Hovers Tooltips Sample (Smart GWT).
Thanks in advance.
Finally I got the style name that is applied on all the tool-tips.
SmartGWT have a concept of Skinning that is the process of modifying Smart GWT's default look and feel to match the desired look and feel for your application.
A "skin" consists of:
a single CSS stylesheet containing all CSS styles used by Smart GWT components (skin_styles.css)
a single JavaScript file that sets component defaults (load_skin.js)
a directory tree of images organized by component
I found the style canvasHover in skin_styles.css that is used for hovering on Canvas.
I just added min-width: 135px; that changed the width of all the tool-tips globally in the application. By default it's 100px.
/* hover canvas */
.canvasHover,.gridHover,.formHover {
background-color: #fdfdd3;
border: 1px solid gray;
color: black;
font-family: Arial, Verdana, sans-serif;
font-size: 11px;
padding: 5px;
min-width: 135px;
}
Thanks a lot for your attention.
I have no idea about SmartGWT works, but for this kind of dirty things if those elements are attached to the DOM, I'd use GQuery.
Something like:
GQuery.$("#yourTooltipId or .yourTooltipClass", RootPanel.get()).each(new Function() { public void f(Element e){
GQuery.$(e).width(30);
}});
Instead of RootPanel.get(), you can use other scope if for any reason you have all the tool-tips under the same view.
Is it possible to change the header style of a rich:simpleTogglePanel ?? The font of the header is always "bold" and I want it to be normal.
I tried with the style attribute this way: style="font-weight:normal" without result.
Any idea?
Have you tried putting the !important at the end of your style definition(i.e. style="font-weight:normal !important;")?
Also, as I'm sure you are aware, it is usually better to specify your style in a separate stylesheet. I've customized the <rich:extendedDataTable in this manner (not sure if this is a hack or not, but it works great for me). Open your page in a browser and then crack open the developer tools (press F12 in Firefox with FireBug installed, or in Chrome right click on the rich:SimpleTogglePanel and click 'Inspect Element'. This will let you see the CSS definition name used by the RichFaces framework. Just create a new .css file and define the style you want using the name you find RichFaces is using.
/*This class defines styles for a table cell.*/
/*tableBorderWidth, tableBorderColor border-bottom*/
/*tableBorderWidth, tableBorderColor border-right*/
.rf-edt-c {
border-bottom: 1px solid #021e2f;
border-right: 1px solid #021e2f;
height: auto !important;
min-height: 26px;
}
As you can see, you may need to specify the !important tag there as well, but it keeps the style outside of your page...
Hope this helps.