Is it possible to change the root color palette of a browser on a certain page?
For example.
<div style="color:blue">Blue Text</>
color: blue => color:#0000FF (browser assume)
I want to tell the browser that "blue" is #0000BB. (either through stylesheet.css or javascript modifying its default palletes )
Plus, is it possible to add more standard color to the pallete?
Like: navyblue => #3e3e80
I'm not sure if it's possible to overwrite the root colour palette itself, but what you can do is make use of custom CSS properties to achieve almost the same thing.
Simply define the colours that you want in the :root, using -- as a prefix. You can then reference these colours by using var(--variable) as the color value.
This can be seen in the following:
:root {
--blue: #0000FF;
--navyblue: #3e3e80;
}
div {
color: var(--blue);
}
span {
color: var(--navyblue);
}
<div>Blue</div>
<span>Navy Blue</span>
Using CSS variables in this way allows you to easily change a colour throughout the entire site by only changing one line of code, and also allows for additional colours to be easily mapped out.
Related
I'm having trouble changing the background color of a certain button on a WordPress plugin.
The button and text are set to white and I'm trying to identify the CSS file that controls it, unfortunately I've had no luck within the inspect element of my browser.
It is incorporated in a popup form - so multiple other files come into play.
I changed the color within the browser during inspect but need a fix.
You can overwrite CSS attributes by setting !important after your definition or by defining the scope better (e.g. by writing body or html before the class selector).
make sure your css file is able to "access" the dom element – if the element is in an iframe the css wont work.
body .wpforms-page-button {
background-color: green !important;
}
Using !important is generally considered hacky. Both rules in your screenshot have the same CSS specificity in that they are both firing on input[type="submit"] and .button.
Without seeing the corresponding HTML I can't give you the exact syntax, but something like
.parentclassname input[type='submit'] and or .parentclassname .button should make your style more specific than the original rule and therefore give it precedence.
Did you try to set !important after the #fff; ?
like this:
input[type=submit] {
background-color: #fff!important;
}
the best way is to define the button in a class, so you can change only the color for this specific button. Otherwise it will changes all the buttons to color #fff if you put the css in a general style.
I would change the color of an icon.
I have imported MdIconRegistry and DomSanitizer
import {MdIconRegistry} from '#angular/material';
import {DomSanitizer} from '#angular/platform-browser';
Than added the SVG to the registry
constructor ( mdIconRegistry: MdIconRegistry, sanitizer: DomSanitizer) {
mdIconRegistry
.addSvgIconInNamespace('img','linkedin',
sanitizer.bypassSecurityTrustResourceUrl('../../assets/icons/linkedin.svg'));
}
In .html file a call the icon
<md-icon svgIcon="img:linkedin" class="contacticon" color="primary"></md-icon>
And modified the color and other parameters in CSS:
.contacticon{
padding: 10%;
fill:currentColor;
color: red;
width: 200px;
height: 200px;
font-size:200px;
}
Neither color:primary nor fill: currentColor; color: red are working.
How can I change the color ?
Update : this is the link of the svg
You have to change the linkedin.svg file itself. Search for this: style="fill:#0077B7;" and exchange the color for currentColor. Then, setting color in your stylesheet will work.
(It is worth noting that the licence associated with the icon does allow its modification. Bat as it is a trademark, check LinkedIns policy about displaying their logo in different colors!)
There are several reasons why the CSS you wrote do not affect the icon.
There might be a more specific CSS rule affecting the icon. To debug this you will need to use something like Google Chrome devtools and inspect the element and check the computed tab. Make sure you check show all then type the property that you want to see from where does it inherit its value (like color orfill`). When you click the arrow it will display the applied value as well as reference to the CSS file you are using.
In Angular 2 when you are calling the SVG this way it might be injecting it as an img tag and this way you will not be able to change its color using fill or color.
If the SVG file itself has classes applied to its elements (like path ... etc) with specific style (like fill property) you will not be able to overwrite it using CSS fill. You need to remove these classes first.
Adding this attribute to md-icon worked for me: style="color:red;font:bold;".
Ex:
<md-icon style="color:red;font:bold;" >clear</md-icon>
For some reason I am unable to set the background color by simple using
body {
background-color: red;
}
Inside off my App.vue file.
I can change the background color by using page-content:
.page-content {
background-color: red;
}
But this is a bad hack because it also messes up my panels and other components.
Is there a sure-fire way to set background color for F7+Vue apps?
Set a classname to your page element as <f7-page class="bg" ..
and css
.bg.page {
background-color: red;
}
it depends on how you are creating your app, if you want to change a single page but no the others then probably you are either using components or having them in separate files, either way you can use a scoped style bracket to specify some css to apply only to a specific component
<style scoped>
your css here...
probably...
.page-content{
background-color:red;
}
</style>
also a good idea is when you are creating a new page give it an id so you can define styles easier and without some unexpected behaviors using the easier method above (scoped style) then you just style that specific content using
#yourID
I'm thinking this is impossible but on the off chance I missed something, is it possible to override the value of named colours?
In other words I have an html page with style="background-color:red;" in it, would it be possible to specify that it use #FA5858 instead of the default #FF0000?
I don't wish to edit the HTML file as it is generated automatically from a few different processes and there is historic data I don't want to lose.
No, red is strictly defined #f00 and you can´t change it.
But you can use one of CSS preprocessors (eg. LESS, SASS) and work with $red variable defined to your #fa5858
The short answer is: no.
In CSS, some colors have defined names. They can't be changed.
However, if you use LESS, SASS or other style languages based on CSS, you can do this (almost).
Example in SASS:
$red: #FA5858; /* define variable $red to #FA5858 */
a {
color: $red; /* use value of variable $red */
}
If you want to do this, you can quite easily create a script to convert the color names to variable names. For example, in JavaScript:
var css = "a { color: red; }";
var sass = css.replace(/\bred\b/g, "$red");
alert(sass); // a { color: $red; }
The issue I have is that when I copy a piece of html, i.e., with
<a>my link</a>
Then it will pick up the default style color on the page, which means, if I set tag style color:#f2f2f2, then it will pick that up and use it after paste.
To solve this problem, I wonder if there is a way that I could set the color:none or somehow, into each tag so that the color of the will always be the default color for that tag (for example, tag will be blue).
Let me clarify,
The reason I want to do this is that the piece of html text has default css color as red that is taken from a stylesheet, but after I paste it I do not want that style to be pasted , however, when I try that, it will, if I do that in certain phone devices. I was wondering if there is a way to set the style for specific tag to ONLY default color attribute value without modify it. For example, if default is blue for the other one, the font will change to blue not stay red.
HINT: Its especially obivously when you try to copy html into Google Mail Signature box.
Thank You
I'm not sure if I understand what you mean, but if you want to change the link color:
a {
color: red;
}
Fiddle: Fiddle
For your edited question, if you want the default style, just do:
a {
color: initial;
}
I'm also not sure what you mean, but to set a link color, use the css from Anonymous above.
You can also apply color properties to different states of links.
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Be sure you set these styles in an external style sheet, do not use inline CSS.
In example:
<a style="color:#000;">This is Bad</a>
You can use the CSS Keyword initial
Initially CSS didn't provide a "default" keyword and the only way to
restore the default value of a property is to explicitly re-declare
that property.
This has changed with CSS 2; the keyword initial is now a valid value
for a CSS property. It resets it to its default value, which is
defined in the CSS specification of the given property.
(https://developer.mozilla.org/en-US/docs/Web/CSS/Common_CSS_Questions)
EG: a.unstyled {color:initial;}
However, in my testing it seems that the browser's 'initial' value for a link is black not the blue we're all use to so you may be better off setting it explicitly.