I'm digging into customizing controls via CSS and I got pretty far. So I'm able to fully customize my scrollbar by e.g. setting track's background to transparent and so on. But I'm stuck with the ScrollBarSkin (investigated via ScenicViewer). It seems that this skin has a default background color (gradient) and a border, which I'm not able to modify.
So my question is, how can i access the e.g. TableCellSkin or ScrollBarSkin, to modify background color and insets via CSS?
edit: I'm using jdk7
edit2: i found some syntax in the caspian.css for the ScrollPaneSkin. I tried the same for the scrollbar and a tablecell with:
ScrollBarSkin>* {
-fx-base: transparent;
-fx-border-color: #00ff00;
-fx-background-color: #0000ff;
}
but with no luck.
found solution based on jewelsea's answer (thx mate!)
I made a new class extending ScrollBarSkin and I'm overriding the getSkinnable(). This looks like this:
public class MyScrollBarSkin extends ScrollBarSkin{
public MyScrollBarSkin(ScrollBar scrollBar) {
super(scrollBar);
}
#Override
public Insets getInsets() {
// TODO Auto-generated method stub
return super.getInsets();
}
#Override
public ScrollBar getSkinnable() {
ScrollBar curr = super.getSkinnable();
curr.getSkin().getNode().setStyle("-fx-background-color: transparent;");
return curr;
}
}
In the corresponding css I refer to this skin as jewelsea mentioned. Et voila!
One little question is still left: why I'm not able to directly access this component via css?
ScrollBarSkin is a class representing the skin used to render the ScrollBar. Here is an extract from a default JavaFX style sheet:
.scroll-bar {
-fx-skin: "com.sun.javafx.scene.control.skin.ScrollBarSkin";
}
Here is a link to ScrollBarSkin.java in the JavaFX 8 source repository. Note that it is a com.sun class, so it is not part of the public API and could disappear or change API between minor JavaFX releases without notice.
You can override the default skin with your own skin via the following css in your user stylesheet:
.scroll-bar {
-fx-skin: "com.mycompany.control.skin.CustomScrollBarSkin";
}
I just made the name and path up, you can use whatever you want.
What the skin is allowing is programmatic control over the look of the a control (i.e. it's only incidentally related to css because css is one way to set the skin on a control).
Customizing Skins is documented (to a certain extent) in the OpenJFX wiki.
The skin customization relies on a new JavaFX 8 class called SkinBase, which forms part of the javafx.scene.control public API.
Customizing skins in versions lower than Java 8 is not recommended, because then you will be working with old, undocumented and unsupported private APIs which will not work with Java 8 and later. Customizing skins in Java 8 is fine because it relies on the public API.
I'm pretty sure from your question that this isn't really what you are looking for, but it is the answer to your question (at least as I understood it).
Related
I want to change the style of title in stage but i couldn't find anything.
I tried some css codes like:
.title {
-fx-font-size: 18px;
-fx-font-family: "B Homa";
}
but it didn't work for me.I searched about the style of window in javafx and I figured it out that the default style of every native window is Decorated and for designing a custom window I must use UNDERCOATED mode, but I just want to change the size and font style of native window (different font and size) .
I think this is not possible with a decorated default window. The window itself is a native window from your OS. For example on windows the window implementation is:
com.sun.glass.ui.win.WinWindowand
the title is managed in a native method:
#Override native protected boolean _setTitle(long ptr, String title);
I would like to add stylesheet options for a custom widget I have developed. We have extended the QPushButton to be a different colour and to flash when it is depressed. This has been done by adding a new property, background color down. And we set this in code. But I would like to set this instead using a Qt stylesheet entry, something like
QFlashingButton
{
background-color-down: yellow;
flashing-interval: 5;
}
I can see one way to do this, read out the stylesheet info using the stylesheet() method, then parse it for parameters relevant to my widget and set them. But I am wondering if there is some way to access the code Qt have themselves for processing stylesheets. At first sight of their code this seems perhaps not to be publically available.
As long as the parameter you want to control in the stylesheet is a QProperty, you can set it in the stylesheet using the syntax: qproperty-<PROPERTY_NAME>: <PROPERTY_VALUE>
I don't think property names can actually have dashes in them, so assuming your QProperties on your custom widget are actually backgroundColorDown and flashingInterval, then your stylesheet would look like:
QFlashingButton
{
qproperty-backgroundColorDown: yellow;
qproperty-flashingInterval: 5;
}
I have managed to embed my extjs4 panel inside an existing extjs3 application.
I want to inherit the existing css colour schemes for panel headers etc.
But my extjs4 components are 'sandboxed', therefore using the .x4-* namespace for css.
How can:
my-styles.css
.x4-tab { some-stuff }
inherit from:
existing-styles.css
.x-tab { foo: #FFF }
Is this possible? cheers
You can grab all the existing css rules that have '.x-' in the selector and create new rules using '.x4-'.
var newRules = [];
Ext.Object.each(Ext.util.CSS.getRules(), function(selector, rule) {
if (/\.x-/.test(selector)) {
newRules.push(rule.cssText.replace(/\.x-/g, '.x4-');
}
});
Ext.util.CSS.createStyleSheet(newRules.join(' '))
While this is technically possible to do, the results would not actually make sense unless you manually go through each component and override the classes to have the correct css references if they even exist (and you would have to create others manually). This is because Extjs 4 does not work the same way in a technical sense for css namespacing and classes as Extjs 3. You could manually change all the css classes the components are using by overriding their component classes, but this is just not worth the time. What you are trying to do can not be done without a huge amount of effort, and it is just not worth it.
I have followed the example code laid out in an earlier posting regarding styling GWT CellTables, replicating the code for the new GWT 2.4 DataGrids. Unfortunately, nothing seemed to work. All I want to do is set the font-size of the cells smaller, so in my local css file (see the second parameter of the #Source annotation in the linked post) I included:
.dataGridCell {
font-size: 6px;
}
Nothing happened. The font size stubbornly refused to change. Then I noticed this in the DataGrid code:
#ImportedWithPrefix("gwt-CellTable")
public interface Style extends CssResource {
I copied DataGrid into my workspace, along with the related three gif files, and commented out the one dependency on a protected method in AbstractCellTable (no empty table widgets -- oh well). I changed the prefix defined in the annotation to gwt-DataGrid -- and pfffft! -- still it didn't work.
So what am I missing here? Is that gwt-CellTable prefix correct in the annotation? Seems fishy to me, though I failed to get it to work with my change.
Turns out the names matter. Duh!
OK, got it working. Turns out it matters to use the same names. Duh!
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.cellview.client.DataGrid.Style;
import com.google.gwt.user.cellview.client.DataGrid.Resources;
public interface MyDataGridResources extends Resources {
public static final MyDataGridResources INSTANCE = GWT.create(MyDataGridResources.class);
#Override
#Source({DataGrid.Style.DEFAULT_CSS, "../resources/styling/mydatagridstyles.css"})
Style dataGridStyle(); // ***********************
}
When I made the name of the style the same as the name of the style interface in DataGrid.java ("dataGridStyle") then it started working.
I sorta kinda get it...but not quite. I will need think more about scoping rules, and also study exactly what happens to the resources parameter passed into the DataGrid constructor.
I just did it as described in the post you are linking to, and it works as expected. My Resources class looks like that:
import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.cellview.client.DataGrid.Resources;
public interface CustomDataGridResources extends Resources {
#Source({DataGrid.Style.DEFAULT_CSS, "../resources/customDataGrid.css"})
CustomStyle dataGridStyle();
interface CustomStyle extends DataGrid.Style {
}
}
And then use that class when creating the DataGrid instance:
DataGrid.Resources resources = GWT.create(CustomDataGridResources.class);
gridUnits = new DataGrid<Unit>(50, resources, new UnitKeyProvider());
When you overwrite a style which is being set by the GWT CSS file, you need to add "!important" in your own CSS definition. Like this:
.dataGridCell {
font-size: 6px !important;
}
.dataGridEvenRow {
background: #ff0000 !important;
}
be careful when using the line
#Source({DataGrid.Style.DEFAULT_CSS, "../resources/customDataGrid.css"})
it means gwt uses both the default and your own css. i know it is coded like that but when you use copy & paste you may get confused like me why do you have both styles together.
I have a class that inherits QStandardItem and I put the elements in a QTreeWidget. The class receives notifications from the outside and I want to change the background color of the item based on what happened.
If I do not use stylesheets, it works just fine, like this:
void myClass::onExternalEvent()
{
setBackground(0, QColor(255,0,0)));
}
However, as soon as I put a stylesheet on the QTreeWidget, this has no effect : the stylesheet seems to override the setBackground() call.
So I tried :
void myClass::onExternalEvent()
{
this->setStyleSheet("background-color: red");
}
but this is probably all wrong, it changed the color of some other element on my screen, not sure why.
Does anyone have an idea on how I can alter the background color like with setBackgroundColor but still be able to use stylesheet on my QTreeWidget?
Palettes propagate to the children of a widget, and it's bad to mix and match style-sheet controls and native controls (I do not have a citation for the latter handy, but I have read it in the QT docs somewhere).
That being said, try setting setAutoFillBackground(false) on your QStandardItem derived class.
EDIT: Sorry - also, are you specifying the QTreeWidget in the stylesheet or just setting "background-color:"? If you specify the QTreeWidget only in the stylesheet that might take care of it as well.
QTreeWidget { background-color: white; }
But I think you still have to set the autoFillBackground(false).