I am trying to set widgets' style properties (coding with C on windows) but it doesn't work:
I tried putting in in the css file
* {
-GtkButton-child-displacement-y: 20;
}
and it didn't work, I also tried setting it inside the xml file adding this property to a GtkButton
<property name='child-displacement-y'>20</property>
an it doesn't work (invalide property) I suppose style properties can't be set along with properties
So, what am I doing wrong? why the css file ignores widget specific style properties ?
(GTK+ version 3.18 on windows)
GtkButton::child-displacement-y is now ignored as of GTK+ 3.20. Your CSS won't work anymore anyway. It may have already been broken in 3.18. Sorry. :/ The documentation suggests using CSS margins and padding instead.
That being said, otherwise your CSS is correct. I presume you simply are not loading it correctly. You can't just drop a random .css file and expect it to work; you need to explicitly load it using GtkCssProvider into a GtkStyleContext (either one that belongs to a widget or to the default GdkScreen to have it apply to all widgets). (If you are instead modifying the theme file directly, then see the first paragraph.)
Related
I am looking at an element on a web page, trying to figure out how it works.
Its text-align property is var(--btn-default-text-alignment, center), and the computed style says left, so I'm guessing the --btn-default-text-alignment variable is set to left.
But where is this CSS variable coming from? I looked in the file where the style is defined and couldn't find it. I found out that CSS variables in one file can be used by other files so it may be in one of the many CSS files that this page is including, but it would be a lot of tedious work to look in all of them and find it.
Is there any way to use the Chrome dev tools to find out what file a CSS variable is defined in?
In the image below I have selected and inspected the title of the page "Can I use Chrome dev... defined in?". In the bottom left quadrant/box of the inspector tool we can see all the CSS variables and which file they are in. For example, CSS element #question-header is in file primary.css.
If you click on the file name primary.css you can also see the folder structure and the actual contents of the file.
From here, you can Ctrl+F to find all the instances where something exists. The first instance will be where it is defined.
Firefox also has this feature.
I am trying to build a CodeMirror mode file in order to provide correct syntax highlighting and completion help for the JavaFX flavour of CSS, based on the original CSS mode.
In JavaFX CSS, most properties are the same as in classic CSS, but some don't exist, some are different, and ALL properties are prefixed with -fx-
So, for example,
width: 600px;
becomes
-fx-width: 600px;
Where could I obtain a list, in plain text, of all the existing JavaFX CSS properties names, so that I could replace the normal CSS properties name in the JavaScript mode file ?
Note : if such a mode file for CodeMirror already exists, it would be even better, of course. But Google didn't help there.
The default styles for all javafx css properties are defined (in JavaFX8) in a file called modena.css. I wrote a python script to extract every property listed and write them to a text file, resulting in the following output:
https://wheelercode.wordpress.com/javafx-css-properties-selectors-list/
The best ressources I know is the JavaFX CSS Reference Guide of Oracle:
https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html
I am not sure there is everything but the list is pretty long.
It is not plain text but you can manage to obtain a plain text list from this document.
(In the source code of the webpage all css properties are label with class="propertyname")
I want to style/mark a MenuItem in GWT MenuBar. So i have some logic that adds a style name to a menu item (the logic is working properly).
mItem.setStyleName("menuItemMarked", true);
with this set getStyleName yields "gwt-MenuItem menuItemMarked" as expected.
But how to use/apply this style in css (at the moment i put css in uibinder.xml)? (as you may see i am not a css expert)
update: what i tried is that.
.menuItemMarked{background-color: yellow}
this is not working. if i call "inspect element"(chrome) i can see "class="gwt-MenuItem menuItemMarked" but i can not find the style "menuItemMarked" in the list of applied styles?!
Where are you specifying your CSS?
If your code is located within your code packages, it is likely being obfuscated by the GWT compiler. This applies to <ui:style> blocks in .ui.xml files, and .css files included in ClientBundles.
In this case, you will want to check out Programmatic Access to Inline Styles from the GWT docs. This will allow you to change your code to:
mItem.setStyleName(style.menuItemMarked(), true);
Alternatively, you can tell GWT to not obfuscate certain CSS classes. Here is a detailed answer to a similar question
Finally, if GWT does not touch your CSS file (it is being served from your server like other files), then you will need to make sure that your file is being included in your page properly. Your browser's dev tools should be able to help with that.
Make sure you specify correct selector name in your css. In this case you need to have following:
.gwt-MenuItem.menuItemMarked {
background-color: yellow;
}
Since gwt-MenuItem remains the first class name in the list it takes precedence over any styles (incl. background-color) defined in the subsequent classes. The only way to overrule this is to define styles with more specific selector like above. Check this link out for more detailed explanation.
It's the red marked "navigator" I am talking about. I need to move them away so they don't mess up my design. I have tried to change a lot of different settings without no success.
Here is the View for it:
What should I do?
I am using the following themes: Pixture Reloaded 7.x-2.2 and AT Core 7.x-2.2
Modules: Calendar, chaos tools, views, date modules..
It is obvious some mix up in css. It is a large possibility that elements created by calender inherit some css properties.
Easy fix is to view the source code of he page. Using FireBug(for firefox) or some alternative will make it easier to find. You will find some css rules being applied to your menu. Just try to enable and disable some css rules and see what happens.
When you find mischief just write a css function with higher priority which would negate that other global rule.
I got the same problem and i solved just yesterday hacking some css. I share you here what i have done in my case that i think i will help you also or at least work around there.
First to fixing the big buttons of the calendar navigation you should look in your theme css files at some css class called "ul.pager li a" or "ul.pager li span" there must be a property like "display:block" that is causing this buttons see that way. i just commented that property and they look as normal them should be.
In my case the theme css file was "navigation.css" and this property inside that file is found at line 375. Maybe in yours could be similar, anyway you can check and find where is using the firebug extension for firefox inspecting that buttons.
Second for fix the position of this navigation buttons is something similar but in the css file of the calendar module itself, after modifying the core css file of the module i recommend you to override it placing a copy of it in your template css folder and declaring it on the .info file of the template. In my case the file was calendar_multiday.css, in the line 778 and 818 there are the classes ".view .date-nav-wrapper .date-prev" and ".view .date-nav-wrapper .date-next" inside them with the property "right" and "left" i controlled the positions where must be this buttons.
This is the work around on how i solved it, hope this works for you also but if not anyway the problem is close there.
I have a PopupPanel, and I want to override some of the styles from the default theme. Eclipse gave me a .css in the doc root, and I put the styles I want to override in there. Inspection from the browser at runtime shows my styles being overridden by the GWT theme.
It's hard to believe that this is the default setup for a new project - an application .css that is loaded after the stock css?
I tried loading my css in my module XML (using stylesheet tag), but that has no effect, it's not loaded at all. The GWT docs say this is deprecated, so I suspect it's just been removed. Regardless, I don't want to use a deprecated interface.
To be clear, this is an ordering problem. I've verified my css is loaded correctly by inspecting the DOM. I can see my styles applied to the element in question, and I can see them overridden by the GWT theme css (dark.css in this case). Adding the !important flag does get my styles applied, but that's obvsiously not the right solution.
The popup is instantiated in the click handler of an anchor that's defined in a UI widget. The popup itself isn't defined in the template, I simply instantiate it and call show(). I'm not sure if that's relevant.
Can someone describe to me how this should be accomplished? If this is any harder than "put line XXX in file YYY", I'm going to seriously lose my faith in GWT.
GWT just generates some HTML to which CSS is applied. It looks complicated but there isn't any magic going on in the final output. Just HTML, CSS and some JS.
If your PopupPanel is picking up the wrong style it's because the browser isn't seeing your style, or the style in the standard theme (which is standard.css) is taking precedence.
If you have a DOM editor:
Inspect the element and see what styles it has against it.
Verify your style sheet is being included
Verify your style rules are being applied to the element as well.
Most likely it's a simple CSS error of some kind and GWT is the red herring. However if you can't see the error you can consider:
Give your element an id or its own additional style and use a rule to override the default behaviour.
Completely override .gwt-popupPanel with the style you want to apply everywhere
Subclass PopupPanel. Call the super
constructor but then strip out the
gwt-popupPanel style and replace it
with your own style instead. Or
augment the gwt-popupPanel and add
an extra style of your own.
Copy the entire default theme and rename it as something else and use that in your project.
The best option is probably the simplest which would be 1)