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.
Related
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>
I search for all solutions but nothing help me.
my simple problem is to set a style for a link ( a Tag ) with a class:
<a class="logo"></a>
I don't want a general style for links or for active ones but for a selected Class.
Thank you.
I think you're looking for the CSS class selector.
To apply a style to just a single class you should prefix the class name with a dot (.) in your CSS selector.
In this particular case you would do it like this:
.logo {
/* Styles here */
}
You can also ensure that only link elements are affected by adding the element selector:
a.logo {
/* Styles here */
}
PS. The CSS id selector is # and it works in a similar manner.
There are three different ways to solute this. Since you do not want a global styling for a link this example will not be it:
a{
/* STYLE HERE */
}
Since you simply want to style a link with a surtain class use this example:
a.logo {
/* STYLE HERE */
}
or
logo {
/* STYLE HERE */
}
or
a[class="logo"] {
/* STYLE HERE */
}
The last example is a new way of making this happen, some very old browser wont understand this, so you better stick to the first or second example.
Use like this
<style>
a[class="logo"] {
background-color: yellow;
}
</style>
<a class="logo">test</a>
you can add style rules by targeting class :
a.logo { color: #aeaeae; }
Link to site in question.
In the footer, just above the copyright notice, I have a small block of Schema microdata. Business name, address, phone number. I want that text to be write, matching the copyright notice below it.
I've tried to do it like this:
<div class="schema_footer"> Schema block here</div>
And in my css file:
.schema_footer {color: #ffffff;}
Why doesn't this work?
Try this, the HTML is more complex than the example you have provided as shown in the screenshot. There may also be more specific CSS that you can't override unless your CSS is at least as specific:
.footer .schema_footer div,
.footer .schema_footer span
{
color: #fff;
}
It is not good practice, but you could also add the important rule color: #fff !important; to try and override the previous styles that have been set.
That is because there are more specific rules that overrides the rule mentioed in the .schema_footer like the one below:
....
.footer span, .footer a {
color: #666;
}
So you need to make your rule even more specific like.
.footer .schema_footer span, .footer .schema_footer a {
color: #fff;
}
or override the .footer style later in the stylesheet (or with multiple style sheets load this one later)
.footer span, .footer a {
color: #fff;
}
No matter how bug the html is, You can always use the web inspector to inspect the styles applied and overridden. Here is how it looks after overriding and you can see the second arrow showing the actual rule applied before.
here is a simple solution
.footer {color: #fff;}
I am trying to improve the styling of my Confluence page, but when I insert a {css} widget the styling does not take effect for many different elements and formatting styles.
For example:
{css}
body {
font-size: 24px;
}
p {
color: red;
}
div.atest {
color: blue;
}
{css}
In this case, all my font is 72px. But no simple paragraph blocks are red, nor are any div's (given the atest class) showing as blue.
Is there some special formatting in Confluence that must be done for CSS to be handled properly, or does it only support a small subset?
If you are sure that your CSS is correct but it is not considered, add !important to the styling to prevent it being overwritten by inner elements like so:
p {
color: red !important;
}
I think you must tag a {HTML} {HTML} first.
I'm still working with an older Version..
Else i have found this
https://confluence.atlassian.com/display/DOC/Styling+Confluence+with+CSS
Hope this helps
Problem
I have a site built with my own styles and it looks just the way I like it. However, I want to add extra functionality by adding a custom dialog box downloaded from BootBox.
However the extensive style sheet that comes with it and is needed absolutely murders my site, butchering it in every way.
Is there anyway i can stop this by making the BootBox.css only apply to its little part of my code and not all of my site?
You can use LESS wich is what bootstrap uses.
Example:
#ContainerWithBootboox {
#import (less) "bootstrap.css"; //import bootstrap
}
Doc: http://lesscss.org/
If you only want the bootbox css to target a specific div, you'd need to prepend each bootbox css rule with the class of the target div.
So if you had
<div class="bootbox">
<!-- bootbox html here -->
</div>
and the bootbox styles were
h1 {
color: red;
padding: 0;
}
h2 {
color: blue;
margin: 10px 0;
}
Then you'd need to change it to
.bootbox h1 {
color: red;
padding: 0;
}
.bootbox h2 {
color: blue;
margin: 10px 0;
}
That said, if the bootbox css is thousands of lines of code then this may be labour intensive. It might be a matter of finding which rules specifically are borking your code and adding a specifier class to only those rules.
Not labour intensive, with the help of LESS or [SASS] (http://sass-lang.com),
If you use LESS, just wrap all bootbox css rules inside a parent root. For e.g.:
.bootbox {
/*move all bootbox CSS rules here*/
h1 { color: inherit;}
.someclass { color: red;}
}
It will be compiled into:
.bootbox .h1 { color: inherit }
.bootbox .someclass {color:red;}
You could put the BootBox code within an iframe. The css loaded by the iframe would only apply to the content within the iframe. I have used this strategy to only apply bootstrap to certain areas of my page such as tables, while leaving the rest of the page untouched.