My Jekyll blog's theme has a scss file with the following syntax related style in minima.scss:
.highlight {
background: #fff;
#extend %vertical-rhythm;
.highlighter-rouge & {
background: #eef;
}
.err { color: #a61717; background-color: #e3d2d2 } // Error
// more stuff
I want to override the nested .highlight -> .err style only, but I don't want to set the color and bg-color attributes to anything specific, just the default. As in, I want it as if the .err style had never been defined in the first place.
I consume the minima.scss file in a main.scss which (which is the the actual file included in the page), like so:
#import "minima";
.highlight {
.err { ???? }
}
This makes it easy to add styles, easy to extend styles with new attributes, and easy to override specific attributes of styles (since I guess the second mention takes priority), but how do I "delete" style or elements?
#import "minima";
.highlight {
.err {
color: unset !important;
background-color: unset !important;
}
}
Should do the trick. You can read more about "unset" and "!important".
setting the color to inherit will make it take it's parent element color which in this case looks to be white
The answer that's marked correct is not the recommended way at all. In fact, it's a terrible way to override a style.
The correct way to do this:
#import "minima";
.highlight {
&.err {
color: unset;
background-color: unset;
}
}
HTML:
<div class="highlight err"></div>
Related
I am trying to add a focus styling to an element. However, I have ::focus and a class .focus. Since I'm using SASS thought it would be easier to create my own style value then #extend it to the two focuses to save on coding.
But whenever I write it, it isn't working and the styling just doesn't appear. If any one has any ideas as to why it would be greatly appreciated thanks.
Heres a small example of the code I've got.
%button-styling {
color: $grey;
%btn-focus {
color: $white;
}
&::focus,
&.focus {
#extend %btn-focus;
}
}
As Sass docs said, any complex selector that even contains a placeholder selector isn't included in the CSS .... So it is not meaningful to put %btn-focus inside %button-styling placeholder. For me these styles in a scss file work fine:
$grey: red;
$white: #FFF;
%btn-focus {
color: $white;
}
%button-styling {
color: $grey;
&:focus,
&.focus {
#extend %btn-focus;
}
}
button {
#extend %button-styling;
}
And in your html you may have something like this:
<div>
<button class="focus">btn-focus</button>
</div>
<!-- or -->
<div>
<button>btn-focus</button>
</div>
First time here, and was hoping that someone would be able to help with an issue I’ve been dealing with. I’ve had specific details not to modify the original CSS, and instead told to create a new CSS that contains specific overrides for the original CSS. How would I go about doing that efficiently?
Any help would be appreciated. Thanks!
css are applied is a given order. Here are few examples
Case 1: overide default color for a div
div#foo {
color: blue; /* This one is applied to <div id="foo"></div> */
}
div {
color: red;
}
Case 2: css which is loaded at last will be on top.
div {
color: red;
}
div {
color: blue; /* This one is applied to <div id="foo"></div> */
}
case 3: important takes first place
div {
color: red !important;
}
case 4: multiple important
div {
color: red !important;
}
div {
color: yellow !important; /* This will be applied */
}
Include your css file after original css file. Add your custom class in html and use it to override original code.
Don't use !important property it create issue in responsive style.
If I have two different stylesheets and a class name that is being shared on both of them, something like this:
Home.css:
.myClass{
color: red;
}
Sales.css:
.myClass{
color: blue;
}
And now I would like to be able to to something like this:
<div class = "Sales.css.myClass" >....</div> <!--Here I am calling the blue color from Sales.css-->
Is there any way to specify from what stylesheet is the class I want to call?
CSS file priority depend on the sequence of files you have defined in the header, having the last one picked up, unless your rule has higher specificity.
However, what you are trying to do is a bad practice, leading to reduced readability and maybe conflicts.
Why don't you just put your rule to different rules in each file:
/*Home.css*/
.myHomeClass{
color: red;
}
/*Sales.css*/
.mySalesClass{
color: blue;
}
And then put the one you want to your element?
<div class = "mySalesClass" >....</div>
Simple CSS rule: later rule extends previous rules for same class.
That is
.myClass {
color: red;
font-size: 14px;
}
.myClass {
color: blue;
}
.myClass will be blue 14px font size.
Also you specify .myClass in CSS but your class in HTML Sales.css.myClass and that's different classes. Do you mean Sales css myClass?
This is the site:
http://avocat.dac-proiect.ro/wp/?page_id=19
I have a contact form and the text color is black
I want to change the color and used the CSS code but unfortunately this does not work ...
.contactform11 .wdform-label{color:white;}
How can I solve this problem?
Thanks in advance!
There is a style .contactform11 .wdform-label (same selector, just as specific), specified in the page itself (around line 900). This style selector will override the one you added to the style sheet.
There is an !important, first get rid of that.
.contactform11 .wdform-label {
color: #B7B6C3 !important;
}
Then in the code block here replace #000, with #fff:
.contactform11 .wdform-label {
border: none;
color: #000; /* should be #fff */
vertical-align: top;
line-height: 17px;
}
If you can't access the css file for some reason, it's a very simple change with js.
You can use something like
[].forEach.call(document.querySelector('.contactform11 .wdform-label'),
function(el) { el.style.color = '#fff' } )
There is a small npm module to abstract this further. (Don't have to constantly rewrite .call and document.querySelector over and over... )
var forEachEl = require('for-each-el')
forEachEl('.contactform11 .wdform-label',
function(el) { el.style.color = '#fff' })
Try this
.contactform11
.wdform-label {
#000;
}
Maybe is because the order in wich the css rules are aplied. Try using:
.contactform11 .wdform- label{color:white !important;}
Go on and use the element instead maybe? Then assign in an id of 'contactform11' and use the css selector to set the label colors to whatever you desire (White in this case) See below:
<form id="contactform11"><label>Name</label></form>
CSS:
#contactform11 label {
color: #FFF;
}
Should do the trick!
Remove the space between .contactform11 and .wdform-label.
So:
.contactform11.wdform-label{ color: #FFF; }
I have this link created in PHP:
echo '<p style="font-family: arial;">Solution name: <a class="expand_suggested_solution" href="#" data-suggestion_id="'.$suggested_solution_id.'" data-problem_id="'.$problem_id.'">'.$solution_name.'</a></p>';
And I have this css for it:
a.expand_suggested_solution
{
color: blue;
}
But I also tried a bunch of different things like
.expand_suggested_solution
{
color: blue;
}
.expand_suggested_solution .a
{
color: blue;
}
But none of those worked :) Any idea of what I am doing wrong? Its probably simple, but I just suck at css sometimes :)
Here it isn't working for some reason: http://www.problemio.com/problems/problem.php?problem_id=223 in the "Existing Group Plans" link
The rule:
.ui-widget-content a {
color: #222222;
}
In the jQuery theme (http://hotlink.jquery.com/jqueryui/themes/base/jquery.ui.theme.css) is more specific, and hence the link will be #222222.
You can make your rule more specific by doing something like:
.problem_comment_text a.expand_suggested_solution { color: blue; }
For an explanation of CSS specificity, see here.
.expand_suggested_solution {
color: blue
}
should work, but to be more precise, you can write it as:
a.expand_suggested_solution {
color:blue
}
The selector would read as "any a element with a class of expand_suggested_solution".
If this is not working, it'll be some other problem. Since you've written PHP here, i would double check to see your link is rendering out correctly to the browser by viewing the source on the executed page.
What text do you actually wish to be blue? The link text or the "Solution name:" text?
If it's the latter, then you need to apply the css to the <p> tag.
Is the link not actually being echo'd to the page or just that it's not blue?
Sometimes swapping the quotes can be easier because you don't have to concatenate the variables ('.') you can just put them in.
echo "<p style='font-family: arial;'>Solution name:
<a class='expand_suggested_solution' href='#'
data-suggestion_id='$suggested_solution_id'
data-problem_id='$problem_id'>$solution_name'
</a>
</p>";
Check the rest of your css for anything that overrides this css rule, eg a {colour: #fff} will override this if written after this rule.
You could always try putting an !important into your declaration to make sure nothing overrides it. eg color: blue!important;
Make sure you have a legitimate Doctype declaration too.
As #wsanville rightfully pointed out, a selector already defined in jquery.ui.theme.css:
.ui-widget-content a {
color: #222222;
}
is more specific than the first selector you tried:
.expand_suggested_solution {
color: blue;
}
Furthermore, your 2nd CSS selector syntax is incorrect:
.expand_suggested_solution .a {
color: blue;
}
Instead you meant:
a.expand_suggested_solution {
color: blue;
}
However, it's still not as specific as the one in jquery.ui.theme.css.
You could try:
.ui-widget-content a.expand_suggested_solution {
color: blue;
}
Or as #Daryl suggested:
a.expand_suggested_solution {
color: blue !important;
}
because the !important declaration will trump any other selector. However, I recommend using it sparingly!