We are using bootstrap, want to overwrite one of the bootstrap class properties as shown below. I am using Asp.net MVC.
CSS
Boot strap
Panel-heading
{
Color : Red
}
Application CSS
Heading
{
Color : Green
}
HTML Page
Link Bootstrap
Link Application CSS
Issue: Still div color is Red.
Can some help me how overwrite color of boorstrap class without using !.
This is happening because when your application is loading you are loading bootstrap file first and then your application css file, which is actually the correct way to load it.
But according to css rules if you apply two classes on an element having same style then the browser will pick the one which it finds first.
It does not depends on the order in which you have applied it on your element which means
<div class = "Panel-heading Heading"></div>
<div class = "Heading Panel-heading"></div>
changing this order does not matters, what matters is which css file gets loaded first in the browser.
One way to override it is using !important which is not a good practice.
Also having a class with same name in your application is not an elegant solution as a new developer working on your application can get confused as he would not be expecting the native bootstrap classes to work in a different manner.
The other way out is to increase the specificity of your custom class.
Application CSS
div.Panel-Heading.Heading { Color : Green }
This will increase the specificity of your class by giving it more precedence and will override the previous class
You can read more about specificity over here
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Related
When I define a code for a class within the custom CSS of a post this is working however if I define the same code globally under my theme options-> Custom CSS this is not working.
.learndash-wrapper .ld-table-list a.ld-table-list-item-preview {
color: #13fff8;
}.
Therefore I have to go post by post adding this code to get the proper font color... and I would like to have it globally working.
Any idea why this happened?
First, check whether you have a typo or not. After verifying that you have entered class name properly. You can try out as,
.your-class-name{
color : #ffffff !important;
}
!important has the superpower to override previous CSS class and it's properties.
There are guidelines and defined the precedence of different CSS stylings.
Checkout,
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Ask in the comment if required a more specific answer.
Check with the order of the css files loaded. If you have declared multiple css for same element latest class css will be applied. Along with that check the specificity of the css selectors. The selector with higher specificity will be affect the style.
I'm new to Angular (and Angular 5.x specifically), and am hoping someone can shed some light on something for me..
I'm trying to figure out how to read (not manipulate) the CSS style properties of a certain class that's applied to a known element.
For example, I've got a text element that has the "special-fancy-text" CSS class applied to it. How can I access that element's CSS class's properties to dynamically tell what font family, font size, color, or other options are currently set within it?
Thanks!
You can use ViewChild like this:
html
<div #filterDiv class='col-md-2' style='color: blue'>Filter by:</div>
Component
#ViewChild('filterDiv') filterDivRef: ElementRef;
ngAfterViewInit(): void {
if (this.filterDivRef.nativeElement) {
console.log(this.filterDivRef.nativeElement.style.color);
}
}
The above will display 'blue' to the console. This this for more details: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
Though I don't think that if you use a style class that this will be able to tell you the style properties from that class.
Is there a way or operator in CSS to assign a new style to specific element? I don't want to change original style because it belongs to a plugin and changing it will change it on all my pages. However I want to change the position of the element on a specific web page.
I also can't call those styles in my html because that CSS file is used solely in jquery plugin, you only put class="slideshow" in html div and thats that. I can change that CSS file to suit my preferences, however I don't know how to change it for specific instances?
In order to make a specific styling on a specific instance of your plugin, you should assign a specific class or id to a parent container of that plugin for the instance you need customization.
Example : you can give the id="special" to a parent of the plugin in the page you want customization.
Then you can use that selector to style it independently from other instances of that same plugin.
example CSS:
#special .slideshow /*other selectors */ {
/*your specific style */
}
In your scenario CSS specificity Rule will be helpful for you.
For example in your plugin you are using RED Font Color in class slideshow. Then in your another CSS file you can create a more specific Rule.
Check the Demo what I've posted above on comments section. Here is the direct link.
div.slider .slideshow {color:green;}
You can refer to the element by name:
#htmlitemname{
color: green;
}
CSS is cascading, i.e. it will apply it top down - general, class and then the id.
You can add !important to your css if you wish it to override any inline styles. So long as you make a style sheet specifically for that page, this should work for what you need. Hope this helps :)
I want to override my label color so redfined it one of the css in application using .gwt-label class. However at one specific location in the application, I need a different color. So I did the overriding the css style class in the UI binder of that class using #external
<ui:style field='otherStyle'>
#external .gwt-Label;
.gwt-Label { color: #fff; }
</ui:style>
It works fine but the moment I access this page in the browser, all the labels style take the effect of above style.
Any clue would be helpful.
Thanks in advance
I recommend you use a different style name, and add it to all of the elements you want to be a different color. You can't selectively choose which version of a single css class to use on different elements.
I am using the jQuery UI library out of the box, based on a theme.
Having links rendered as buttons is great, however I need to override some buttons with different colours.
How do I specify an specific class for a particular button to use?
I recommend looking at the CSS for the jQuery UI buttons and duplicating the structure of the CSS which specifies the buttons, but with your own class instead of the jQuery UI classes. Make the overrides that you need in this CSS and include it after the jQuery UI CSS. CSS uses a combination of the most specific selector and ordering to determine which values to apply. By doing this you will make sure that you have the same specificity for each of the CSS selectors used by jQuery so that your CSS takes precedence based on order.
Smashing Magazine has an article that probably has more information than you care to know about the specificity issue.
You can also:
Use Developer Tools in the browser (Chrome has great ones).
See what class from jQuery UI defines the button color.
Override it in your CSS file with the "!important" attribute.
For example, when I needed to override jQuery UI spinner control and remove the borders, I found the class that defines the borders using Chrome Dev Tools. Then in CSS: I added something like that:
.<jquery-ui-class-that-i-found> { border: 0px !important; }
Works great!
I would say, give the particular button or buttons an id, and:
$("#buttonId").removeClass().addClass("myClass");
If you want to apply it to multiple buttons each with its own id:
$("#buttonId, #anotherButton").removeClass().addClass("myClass");
I think the button API should include a configuration like this where you can change color etc. by passing parameters
$("button").button({background:"FFFFFF",hover:"FFFFF"});
this is just an idea where you can change some of its visual attributes.
I found this worked for me:
$(".btnSave").removeClass("ui-state-default").addClass("SaveButtonStyling");
Basically needed to remove the ui-state-default class and then add my own for the background colour etc.
Thsi meant that the rounded corner class etc stayed put and I was able to amend the background colour etc.
If you simply wish to have some additional/different for particular buttons, simply give the buttons some classes like class="mybuttonclass otherbuttonclass" - multiple classes are allowed. Then, just add css rules for your class(es)
.mybuttonclass
{
background-color: red;
}
.otherbuttonclass
{
color:white;
}
thus the background is red with white text - or whatever combination you wish, which would override items in the cascade (CSS) above it. (assumption is that your .CSS file is linked in AFTER the jquery UI css file, or is in-line on the page, both of which would override the jQuery UI css.