I need to override css style for a particular element with another css file's style in gwt.
I have tried by the following code
sendButton.addStyleName("sendButton");
Window.alert("test");
sendButton.addStyleName("butt");
The alert is coming. but the style has not been overridden. the css code is
.sendButton {
display: block;
font-size: 16pt;
color:red;
}
.butt{
font-size:32pt;
visible:false;
color:green;
}
the button font is in red colour only it is not changed to green. i have included this css in html file as well.
so please tell me how to override one css style by another css file's style in gwt.
Thanks in advance
Try this
sendButton.addStyleName("sendButton");
Window.alert("test");
sendButton.setStyleName("butt");
setStyleName Clears all of the object's style names and sets it to the given style.
If this is the style that you want applied to all buttons, you can override the style the GWT applies to all buttons: gwt-Button.
Alternatively, try:
color: red !important;
or be more specific with your CSS selector so that other CSS rules do not take precedence.
I am assuming the .gwt-button and .gwt-Button-selected are the default style names(provided by GWT) of you button.
You can do sth like below. Here I have removed some css properties(all properties are random here). You should write these css properties in your UIBinder.
#external .gwt-Button;
.gwt-Button {
cursor: pointer;
cursor: hand;
color: #3e3e3e;
font-weight: bold;
text-align: center;
background: white;
margin-top: -6px;
margin-top: -33px;
margin-left: -1px;
}
#external .gwt-Button-selected;
.gwt-Button .gwt-Button-selected {
cursor: default;
background: white;
}
Related
How do I remove the background colour from buttons in Zurb Foundation?
<button class="button button-arrow">Button <i class="icon-arrow-right">→</i></button>
CSS/ LESS:
.button-arrow {
background-color: none;
color: black;
font-size: #text-font-size;
text-decoration: underline;
padding-left: 0;
padding-top: 0;
padding-bottom: 0;
&:hover {
background-color: none;
color: #colour-dark;
}
}
Does not work obviously. Any ideas?
change it to : initial, this is the default value of the background-color property
You need to update the .button class:
.button {
background-color: transparent;
}
Make sure your Foundation overrides are in a stylesheet loaded AFTER Foundation styles are loaded so you can use specificity to override them.
The Foundation docs also talk about using SASS to edit the default variables controlling button styles:
The default styles of this component can be customized using these
Sass variables in your project's settings file.
$button-background
I have a question about CSS, i don't know how to removestyles of a class with an inline CSS code.
Let me explain more,
I have a CSS file named styles.css
In this file for example my h2 has some styles, now in my article i want to use h2 but i want to remove h2's default styles(written in styles.css) for this heading.
I guess there should be a way for this case, but i don't know how?
Please tell me this css code and teach me something new.
Thanks
Edit:
Please take a look to bellow picture. As you can see this h2 has some styles, can you see the pink vertical line in right side?
Now i want to remove this h2's styles with a css code. I guess something like my heading here should exist in CSS3. Am i right? Is there any css code for removing external css styles with an inline css code?
https://preview.ibb.co/m4BLda/Screenshot_2017_09_04_01_44_09_1.png
Here is the code:
h2 {
border-right: 4px solid #E20070;
font-size: 22px;
margin: 1.5em 0;
padding-right: 1em;
font-family: "Yekan",'irans',tahoma;
font-weight: normal !important;
}
You said inline, but you should really keep your styles in a separate stylesheet file. Now, in your styles.css file add your own class:
/* styles.css */
h2 {
font-size: 18px;
}
.my-other-title {
color: red;
border-right: 0;
}
<h2>My title</h2>
<h2 class="my-other-title">My other title</h2>
Why does this even work? Because of CSS specificity:
Specificity determines, which CSS rule is applied by the browsers
Take your time learning more by reading this article
Remove the existing class for your heading if there is and use your own custom class instead of writing everything inline.
h1{
font-size:15px;
color:blue;
}
/* target your h1 element */
.custom-css{
font-size:25px;
color:red;
}
<h1>Heading with general css<h1>
<h1 class="custom-css">Heading with custom css</h1>
Although its not good to change the semantic of an HTML Element.
CSS - Default for h2 (from external css source)
h2 {
border-right: 4px solid #E20070;
font-size: 22px;
margin: 1.5em 0;
padding-right: 1em;
font-family: "Yekan",'irans',tahoma;
font-weight: normal !important;
}
You want to override the default css through inline css. Try using below code for your h2.
<h2 style="border-right: 0px; padding: 0; margin: 0;"> Hello </h2>
You can also add a class to the h2 and call the class to your stylesheet if this style is applied to most of the h2 tags. Try to avoid inline css if possible, it may cause loading time.
<h2 style="color:white; font-size:80px"> My Cool Text </h2>
You have to write what you want to replace, for example, I changed color here.
I'm working in DNN in the stylesheet to overrule a specific standardstyled button. This is working code to overrule the styling and change it into what I want, but it changes it for all buttons.
#import url("Templates/htmlEditorTemplates.css");
.threeCol .Normal a {
color: #000000;
float: right;
line-height: 3;
}
I understand that this code changes it for all because i specified .threecol .Normal a, which specifies all buttons I made. I only want a specific button on a page to change, in order to do that I have to select the button location. how do I do that?
You do that by adding a class (i.e. special-link) to those links you want to target and give them its own rule.
HTML
<a class="special-link">...</a>
CSS
.threeCol .Normal a.special-link {
color: #000000;
float: right;
line-height: 3;
}
I can't seem to change the font-size for the Ionic input. I've tried
input {
font-size: 30px;
}
but that doesn't work. However,
input {
font-family: Times;
}
works, so I don't know what exactly is the problem. I can't even change the height of the input as
input {
height:100px;
}
does not work.
However, when I take out the line in my HTML referencing the Ionic CSS, (lib\ionic\css\ionic.css), my CSS works. I think my CSS should be overriding the Ionic CSS as my CSS comes after it, so what's happening, and how do I fix it?
EDIT:
Even if I put !important, it doesn't work. Interestingly enough,
input {
height:100px; !important
font-family: Times;
}
makes it so that the font doesn't change, while
input {
font-family: Times;
height:100px; !important
}
does change the font.
EDIT2: The problem was with selector specificity:
textarea, input[type="text"]... {
display: block;
padding-top: 2px;
padding-left: 0;
height: 34px;
color: #111;
vertical-align: middle;
font-size: 14px;
line-height: 16px;
}
was overriding it, so I just changed my CSS to
input[type="text"] {
font-size:30px;
}
and it worked!
It is very likely that the specificity stated in the framework is greater than what you are providing in your CSS.
Using dev tools to track down the specific style by inspecting the element should show you how the framework defined its selector.
As some have mentioned, using !importantcould solve this, but it is not a recommended solution as it cheat its way to the max specificity and can't be overwritten later on, except by being more specific with a selector and including the important statement.
You need to put !important before semicolon.
I want to assign a background color to my programmatically created Dojo DataGrid's header row. I've tried to override the defaults by adding .dojoxGridHeader or .dojoxGrid-Header to my style sheet, but these have no effect.
Is there another way, such as with a Dojo event or property? If my style sheet is the only way to go, am I using the wrong class?
Thanks!
Alan
With the help of Internet Explorer's "Developer Tools," I discovered which CSS classes controlled the styling of the Dojo DataGrid header row.
I needed to add ".tundra" in front of .dojoxGridHeader because the .tundra stylesheet is at the top of the hierarchy.
This worked for me:
.tundra .dojoxGridHeader, .tundra .dojoxGridHeader .dojoxGridCell {
vertical-align: bottom;
color: #FFFFFF !important;
background: #530619;
border-color: #ECE2D8;
font-weight: bold;
}
Add both styles:
.dojoxGridHeader .dojoxGridCell {
background-image: none !important;
background-color: #A6BB3F !important;
}
.dojoxGridHeader .dojoxGridCell div {
color: black;
}