I am using Vaadin version 14.7.3.
I have a button
Button reminder_settings = new Button("Reminder settings", e->menuClick("Reminder settings"));
reminder_settings.setClassName("headliner");
and I have my css
#CssImport("./mainstyle.css")
The file has this
.headline {
font-weight: bold;
}
.headliner {
font-weight: bold;
}
Now, if I set the className to headline (without the r) my button is bold. But not when it has the className = headliner.
I also cannot add a background-color or anything similar.
What am I doing wrong? Is there a cheat-sheet for styling components?
Now, if I set the className to headline (without the r) my button is bold. But not when it has the className = headliner.
That sounds like there is something wrong with your CSS, some incorrect character perhaps, or some other typing error. Nothing else should make a difference between using a different class name.
I also cannot add a background-color or anything similar.
Can you show what you tried to do? I assume you used the same classname(s) as before, and tried adding background-color there. That should work as well, as long as the CSS is in the same style scope as the button your are styling. Note, that some buttons might be inside shadow roots, and therefore global CSS selectors won't match them.
Related
I am working on a website, https://wordpress-625707-2032312.cloudwaysapps.com/, with the WP Shopify Plugin, and trying to change the default button colors. I have gone into dev tools and found the div class to change the button background. I can clearly see it's labeled as "wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton"
But when I use this class for my css changes, it doesn't work. The change is "wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton {
background-color: #D71614 !important;
}"
Why is this not working?? I can't attach screenshots since I'm too new on here...sorry!
Actually you are pretty lost here.
This is not actually a class:
wps-btn wps-btn-secondary wps-add-to-cart css-7k7g1c-buttonCSS-addToCartCSS-AddButton
There are 4 classes there, separated by spaces. The last one is actually unique for the first button. And in css, when you are styling a class, you should start with a dot, like: .class-name
The code you are looking for is:
.wps-btn.wps-btn-secondary.wps-add-to-cart {
background: red;
}
We concatenate 3 classes here with dots and NO spaces.
You should take a look at CSS Selectors:
https://www.w3schools.com/cssref/css_selectors.asp
I want to change the beam looking I thing that appears when you hover over text. However, I've only been able to change the pointer cursor. Is this possible in CSS?
Edit: I wanna change the way the text version of the cursor looks like. Instead of being the I beam, I want it to be a custom image. Is this possible?
you need to use css to style the cursor with " cursor: someStyleName "
ex that makes it a crosshair:
span.myclass {
cursor: crosshair;
}
this link shows a use (in html, but the code is the same in css) and a demo of what it looks like, as well as many of the different style types:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor
ps: this site in general is great for web dev info.. even java/jquery stuff.
I have a JavaFX button that has been set as Default Button so the user can select it with the Enter key. Currently, it has a blue background:
But I'd like to make it look like a normal button:
I took a look at the JavaFX CSS Guide and it looks like there's only one feature to override (-fx-base).
But changing this feature has unpredictable effects—sometimes it eliminates the button's gradient; sometimes it makes the button transparent.
Is there a simple way to just get rid of the Default Button styling?
My guess is that you are looking in the wrong style sheet. The old default style sheet caspian.css was replaced with modena.css. So setting default value for -fx-base from modena.css should fix the issue:
.button:default {
-fx-base: #ececec;
}
I'm trying to set an specific CSS just for a certain item on my form. I would like to make it bold and in a different color. I used the following statement. Why is it not working?
myStaticTextItem.setCellStyle("color:#FF0000; font-weight: bold;");
You can use setTextBoxStyle to assign CSS class to your input box of that element.
There are additional methods for assigning CSS classes for special parts of element like title, hover, hint and picker icon. More here.
I'm new to Dojo and CSS, so maybe I'm missing something obvious here.
I have a page with several Dijit buttons that are created programmatically, and I want to make one of them bigger- leave the text alone and increase the space between the text and the edge of the button. I don't want to override the CSS for .dijiButtonNode to do so because there are other Dijit buttons the page that shouldn't be altered.
I tried adding this to the widget declaration:
style: { padding: "1em" }
and this:
class: "PaddedButton"
.PaddedButton
{
padding: 1em;
}
but since Dijit buttons are rendered as nested spans it padded the area around the button instead.
The best way to work with CSS is using one of the browser debugging tools (that you should already be using) like Firebug or the Chrome developer tools. You can find an element's DOM node easily with inspect_element and then directly edit its CSS styles until they do what you want. You can also see what CSS rules are active and what are being ignored or overwritten.
I have come up with a working example here:
http://jsfiddle.net/missingno/FrYdx/2/
The important part is the following CSS selector:
.paddedButton.dijitButton .dijitButtonNode {
padding: 1em;
}
This selects any node with class dijitButtonNode that descends from a node that has both of the paddedButton and dijitButton classes. I couldn't do just a .paddedButton .dijitButtonNode because then the rule would end up being cascaded by a more specific selector.