I am aware that changing the background of buttons in RCP apps in e4 does not work.
From the Vogella tutorial Eclipse 4 CSS Styling.
"For example, the SWT implementation for Windows does not allow to set the background color of the Button and the ScrollBar widget."
I should still be able to change the color of the text written for radio and checked buttons. But it doesn't seem to be applied. The wizard remains with black text despite I set it to light grey in my CSS file using the Pseudo Classes Button:checked, :active, or :selected
Same with Group titles
Testing here it appears that this will work only if the button is already checked when the dialog appears.
Changing the check state of the button doesn't change the styling.
This is because the code in the Button CSS handler org.eclipse.e4.ui.css.swt.dom.ButtonElement does not currently support dynamically changing the styling to match the check state.
There is a property you can set to turn on dynamic styling:
System.setProperty("org.eclipse.e4.ui.css.dynamic", Boolean.TRUE.toString());
BUT Eclipse bug 362532 says that this can cause problems.
So this basically isn't going to work.
An alternative is to use IStylingEngine and change the id or class of the buttons in a selection listener.
Related
I'm writing a website that uses a rich Material Design theme on top of Bootstrap 4. So far I have been able to make all the browser chrome match the site at least somewhat (Chrome's autofill indicator being the most difficult to date), but ever since I started developing in Firefox Quantum, I'm running into difficulties hiding the focus ring around input fields:
According to the MDN docs, I should be able to apply the outline: none property to input:focus or input:-moz-focusring, however none of these seem to work. I can see the property showing up in the style inspector, and Firefox doesn't show that it's being overridden by anything, but the focus ring still shows up.
I understand it's important to have indication of focus, however seeing as I already have my own clear indication of focus, I would prefer to hide the browser-provided one as it interferes with my styling.
Okay, so, I solved this while trying to reproduce it in JSFiddle (which I wouldn't have been able to do). It's ridiculous.
On my site, I'm compiling Bootstrap and Material Design from source along with my own SCSS so that I can override the colors and options for the two. It turns out that Material Design overrides the enable-shadows option for Bootstrap, but only if the SCSS is referenced for both, so it's impossible to reproduce in JSFiddle (where the SCSS has already been compiled to CSS).
The offending rule is in Bootstrap's mixins/_forms.scss file under form-control-focus. It's new in the latest minor version of Bootstrap, apparently, because I've tested in Chrome since updating and the rectangle shows up there, too (whereas it did not before updating Bootstrap). The rule won't show up in the inspector because opening the inspector unfocuses the control, and the :focus state doesn't trigger the JS event to let Bootstrap know it's focused, which led me to believe it was browser chrome highlighting the control.
I have reviewed a few articles about using CMFCButton but I still have a question.
My button has a image on the left and a caption on the right. There is nothing fancy, except I am using WindowsBlinds 10 on my computer (I have deactivated it and the issue remains).
With regular buttons they highlight when the mouse is over them. But this is not so with the CMFCButton. The best I came up with is to set the style to SemiFlat.
Mouse not over control:
Mouse over control:
If I set the style to Style 3D then you see no change at all whether the mouse is over the button or not.
Why is the CMFCButton not following the rules? Is there a setting? I don't want to use owner drawn.
Based on the comments provided I have changed to a CButton as that renders as I need out-of-the-box!
I am using javafx 2.2 for my desktop application.
The problem I am facing is that when I hover on the buttons some of the part of text gets hidden. The problem is only on some of the machines. Attached is a screenshot of the save button. The text (Save) gets hidden when I focus or hover on the button.
I tried removing the button: hover CSS but now when I click on it, then I get the issue.
I tried removing the button: hover CSS but now when I click on it,
then I get the issue.
Its hard to diagnose the cause with no code provided, however given that by removing the hover styling you removed the behaviour on hover, have you also tried removing the :focus and :active classes? These are typically assigned during a click event.
What you may also want to do is take the hover class you removed, look at the properties and remove each one at a time to find the culprit- if this doesnt work there is likely some other runtime manipulation of the element happening, it'll be impossible to chase up without code unfortunately.
I have a RadioButtnList. I want change body background color based on radio button value.
for example change color of background circle to red!
After user has made selection and depending on the selected value, you would use css to change the appearance of your page.
To learn about how to use the RadioButtonList control as well as determine selected values, check out this link: RadioButtonList example: how to use RadioButtonList control in asp.net and RadioButtonList Class.
To learn about changing background colors using CSS, check out this link: CSS Background and CSS Tutorial and Learn CSS step by step.
For additional CSS information, check out this google search.
Hint
This assumes you want the entire page to be red:
html, body{
background-color: #FF0000;
}
EDIT
If you really mean to change the 'circle' of the radio button as your recent comment suggests, then you cannot change it. Radio buttons are native controls. What you should do instead is to make your own radiobutton-like control using an image for its selected and non-selected states.
Here's a useful link (includes source code) that I think will get you moving: Resources for web designers, though you might find a good jQuery solution as well.
Good luck!
I'm using the Sencha ExtJS Framework in Version 4.05 and i have the following problem. I am displaying Ext.Grids which have a pagination toolbar at the bottom of the Grid. On the Sencha Sample Page the Grids will display some buttons (first-page, prev-page, next-page, last-page, refresh) with icons on it.
Unfortunately the icons are not displayed in my Grids:
As you can see, the buttons are actually there, and they're working correcrly, only the icons are not displayed.
The references to the images are correct and the images are there and accessible for the browser. (If i view the css of the button in Firebug and hover the imageurl it will display the correct icon).
One thing i noticed is, that for some reason the <span> Element which should display the icon is "grayed out" in the firebug view. (On the Sencha example page it is not).
The CSS of that element looks fine for me:
Note: The complete CSS File used can be found HERE
A short note on the Theme: i made this grey theme (named "documents") just by changing the main colour of the .sass template and compiling the ext-all.css to a new one for my theme. So i didn't change anything with the icons.
Any suggestions what could cause this problem?
Hard to debug without access to the actual code. However, I noticed that both in the CSS you copied above as well as the css link you posted (which was supposedly the whole css), that neither set of css (that I could find) had any reference to the x-btn-icon class by itself, and yet that is the class (along with x-tbar-loading) that is on your grayed out span element. So, what is that class doing? Where is it defined? There may reside your issue.
EDIT: I went to the Sencha website and firebugged an icon on the grid sample. When I deleted the x-btn-icon class from the element, I believe I duplicated your problem. So it seems that the necessary definition of that class is missing from your css. On their site it is defined in the ext-all.css.