I'm new to CSS. Ive created a Drupal site and playing with the theme.
I have some breadcrumb stuff that I would like to theme. If I go into Firebug and turn off the CSS properties
background
border-color
border-style
in the below code
.breadcrumbs .inner {
background: none repeat scroll 0 0 #EFEFEF;
border-color: #929292 #E2E2E2 #FFFFFF;
border-style: solid;
border-width: 1px;
color: #8E8E8E;
}
I get the text looking exactly how I want it.
If I now go into my style.css which is inheriting the code and post
.breadcrumbs .inner {
border-width: 1px;
color: #8E8E8E;
}
The formatting I don't want is retained. If I specify .breadcrumbs .inner in the style.css does that not set it up again and override what was specified higher up the cascade?
If that is not the case how do I stop the inheritance without changing the other style sheet?
Thanks,
Andrew
Additional Info
Here is what I have at the moment
This is what I want to have
You're overriding CSS does not replace the 3 styles you want to change, so the original ones are maintained. What you likely want to do is have your style.css set something like this:
.breadcrumbs .inner {
background: none;
border-color: transparent;
border-style: none;
}
If you specify the CSS styles for same classes twice the resulting style is a union of the attributes defined in both classes. To remove the previous styles you have to redefine the attributes.
If for example you have these css attached to your html document
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/posts.css">
if you have the same class say .color defined in the both default.css and posts.css files, you would imagine that that last css file will be used, but it can be ignored if you write it like so:
// default.css
.color {
color: blue !important;
}
// posts.css
.color {
color: green;
}
// In this example the colour would be blue.
Using !important on inherited style forces inherited style to be used, if you want to override the inherited style then you can simply add !important to post.css
// default.css
.color {
color: blue !important;
}
// posts.css
.color {
color: green !important;
}
// In this example the colour would be green.
Now both are viewed as important and the last one will be used.
Related
I want to modify the color and the border in a Bootstrap nav bar but when I write this on my SCSS nothing happens:
.nav-link.active {
color: #495057;
background-color: chartreuse;
border-color: black;
}
When I inspect the element in Chrome my code is dismissed, It only takes into account the Bootstrap default style.
Image
Any help will be welcomed.
Thanks.
For a CSS rule to be overriden, you have a lot of options. The cleanest would be to be more specific (by at least one rule) than the one you want to override.
If I follow your example:
.nav-tabs li.nav-link.active {
color: #495057;
background-color: chartreuse;
border-color: black;
}
You'll find more informations here : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I'm using AdminLTE 2.3.8. It overrides buttons background on it's box header buttons when hovered, but I want to keep original colors when hovered over any buttons. Eg.:
AdminLTE CSS:
.btn-default {
background-color: #f4f4f4;
}
.box.box-solid>.box-header .btn.btn-default {
background: transparent;
}
.btn-default:hover,
.btn-default:active,
.btn-default.hover {
background-color: #e7e7e7;
}
.box.box-solid>.box-header .btn:hover,
.box.box-solid>.box-header a:hover {
background: rgba(0,0,0,0.1);
}
I just want to get rid of these .box.box-solid>... rules without editing vendor's CSS. Is there any way to achieve this without copying every button style (there are different colors)? If there is, solution would be very welcome.
Use !important within your styles, so that any other vendor styles doesn't conflict with these buttons.
Example:
.btn.btn-default:hover {
background-color: blue !important;
}
Hope this helps!
I know that you can override a CSS attribute that a jsp page inherits from a jsp include CSS file (i.e. a global CSS file).
But what if there is an attribute within a element that is messing up a particular page and I want to not have it being used in that page only using in-line CSS? For example, right now I have this in my include CSS file:
#breadcrumb { width: 100%; border: 2px solid white; font-size: 9px; color: #330066; margin-top: 0; }
But the width: 100% is messing up the look of one of my jsp page. I want to not use width: 100% in that page for #breadcrumb through in-line CSS, so what would I have to put into this on that jsp page so it doesn't use that attribute in #breadcrumb:
<style>
#breadcrumb {
}
</style>
Add style attribute to your element - for example
<div style="width:20%;"></div>
It will override other css rules - it has highest priority
You need to use !important to override the inline style.
<style>
#breadcrumb {
width: auto !important; /* or whatever value you need */
}
</style>
I need to overwrite the header style from style.css.
Here's the style that I need to overwrite.
.t_header{
text-align: center;
background-color: #bfd4f0;
color:#15428b;
white-space:nowrap ;
margin:0px 10px 0px 10px;
height:1.5em;
}
Now I created another css file name black.css and I need to create a different background color for .t_header
.t_header{
text-align: center;
background-color: white !important;
color:#15428b;
white-space:nowrap ;
margin:0px 10px 0px 10px;
height:1.5em;
}
I already used !important to overwrite the style from style.css but its not working but for some reason, the other style class and id that I overwrite using !important worked well.
I hope someone can give me another way to overwrite the style aside using !important. Thanks
Try to clear your browser cache, then add the files in your code in the following sequence -
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="black.css">
The overriding css doesn't need to have all properties -
This much code will be enough -
.t_header{
background-color: #fff;
}
Using !IMPORTANT is generally not recommended. Try increasing specificity
body div.theader { background: white; }
Also keep in mind that it's generally frowned upon to use more than four selectors.
you get the idea...
I am working with this page.
The stylesheet-files and most of the design are written by another programmer.
In frogn.css the background-color is set that should be used for the outside area of the page (in which there is no information). E.g. like here.
In the page I am working with, the background-color is overwritten by the color from bootstrap.less
I prefer not to change the settings of the bootstrap-files, since it can affect other pages.
How do I enforce the background-color of frogn.css to be displayed ?
I tried using !important after the colour-attribute, but it didn't help.
*Update:
I am noticing that setting !important after background-color actually worked. I did only a ordinary refresh, so I got the cached version of the page.
in frogn.css i can see that the body background already has !important
body { background-color: #eaeaea !important; color: #333; }
and there's also a more specific rule applied:
#front { background-color: #EAEAEA !important; }
To overwrite these rules, you've to provide an even more specific selector, for example:
html #front { background-color: #FFF !important; }
this will be "heavier" and should overwrite the default values.
Doing this did solve the problem:
body { background-color: #eaeaea !important; color: #333; }