I need to implement dynamic css styles for certain elements based on a user's role or group identity.
My idea is to fetch the required dynamic values (hex colors, background image urls) from my database, write them to the page, then use jQuery to add styles with these values to the elements that are to be dynamic. Seems straightforward. Has anyone done it this way?
Another way is to somehow override external style sheet styles with styles defined in a header style block. Would this work? Can you share css styles between a style block and an external sheet? Can the shared styles cascade?
You can mix internal and external styles. Internal, external, and inline styles all cascade, with inline styles taking precedence over internal styles, which themselves take precedence over external styles.
If you want to dynamically change styles based on user permissions, why not add the relevant classes and id in the body tag, e.g.
<body id="admin" class="group-1">
And then use CSS to separate the roles and groups out, e.g.
#admin{
background-color: rgb(255,155,105);
}
.group-1{
font-family: sans-serif;
}
.group-2{
font-family: Roboto;
}
You could go one step further and use a CSS pre-processor like LESS to style several groups for individual roles, e.g.
#admin {
background-color: rgb(255, 155, 105);
.group-1 {
font-family: sans-serif;
}
.group-2 {
font-family: Roboto;
}
}
Related
I have an element (e.g. tag). A have set a font-face rule at the root of the document, let's say Noto Sans. Then I have another component which needs another font name, setting it to Proxima.
1st scenario.
Within the component's shadow dom
#font-face{
font-family: 'Proxima';
src: url(path/to/font.woff2) format('woff2')
}
:host{
display: block;
font-family: 'Proxima';
}
Does not work. I even tried adding !important but still won't work. Noto Sans overides it.
2nd. I added two font-face, Noto Sans and Proxima,rules at the root document, tried using them both but gets overridden by the former.
Any tips or am I having mistakes in handling my component
I am working with an internal administration tool that runs on Javascript that has the following in its core CSS file:
* {
font-family: Helvetica, Verdana, Arial, sans-serif;
}
Based on my research, this would be the lowest level of specificity. Anything would override that setting.
My goal is to change the font on the entire page to improve legibility. I am using Python / Selenium webdriver with Firefox to modify the tag's style setting with this Javascript, which results in the following inline HTML:
document.getElementsByTagName("body")[0].style = "font-family:Lucida Fax;";
<body style="font-family:Lucida Fax;" >
The change is propagating to the sheet. However, the font doesn't change. Under the "Computed" view, I see the following:
font-family: Helvetica,Verdana,Arial,sans-serif;
------------------------------------------------
* > Helvetica,Verdana,Arial,sans-serif core.css;
BODY[1].style > Lucida Fax element;
When I disable the * CSS property in the Firefox Inspector after making the change, the font change will occur. So something is overriding my inline style change.
I am in a blackbox environment as an end user, so I can't account for everything happening.Could this be caused by an actively-running Javascript that is forcing the stylesheet to take precedent over inline styles?
The "style" property on the <body> tag only affects content that's in the body directly. All the various <div> and <span> and etc. tags in your HTML are matched by the CSS rule. (Without that * rule then the natural behavior is for font information to be inherited; inheritance doesn't happen for all CSS properties however.)
What I've seen recommended instead is to set everything to "inherit" and then apply the setting to the <body>:
body { font-family: Whatever; }
*, *::before, *::after { font-family: inherit; }
That allows you to have overrides for some elements (like various sorts of form widgets or whatever).
we can create style or any other tag with
var st = document.createElement("style");
and even append the same to body
body.append(st);
and it will create
<body><style></style></body>
I wanna know can we put style in style tag with javascript as well not simple rules, I know there is $("selector").css() function is there which can apply css rules to selector but i want a bit more powerful rule and I want to add in style tag i just created,
something like this:
<style>
div.bar {
text-align: center;
color: red;
}
</style>
st.innerHtml or st.innerText are not letting me set these values.
Note: This was asked me to do in Browser Console only.
You can simply use jquery .text method like
const cssCode = `div.bar {
text-align: center;
color: red;
}`
$('style-tag-selector').text(cssCode)
but in my opinion, whetever your goal is - this solution is not ok. You shouldn't mess with CSS via JavaScript.
Best approach is to have styles in separately loaded .css file and then you can toggle classes to elements with javascript.
You can add your css directly within the style tag and append them to the head of your page:
$( "head" ).append( "<style>div.bar {text-align: center; color: red}</style>" );
You can append multiple style tags with css in the head beneath each other, in this way you can override previous syles, but it is not best practice.
I prefer having your styles in separate files and to manage wether or not the files will be included in your code.
Actually there's an interface for this. For example, add a style element and add a rule to it (this will result in anything with the class should-be-red to be red.
var styleElement = document.createElement('style');
document.head.appendChild(styleElement);
var sheet = styleElement.sheet;
sheet.insertRule('.should-be-red { color: red; }', 0);
You can iterate over the rules and insert/delete rules and exciting things like that.
More info: https://developer.mozilla.org/en-US/docs/Web/API/CSSStylesheet
jsbin: https://jsbin.com/jodiro/1/edit?html,js,output
Background
I am using Twitter Bootstrap LESS source with LessJS
I'm using font-awesome.less (referenced from within Bootstrap.less)
I've removed the icons section from bootstrap so they don't conflict.
I have a site.less file which I also reference from within Bootstrap that contains some site-specific styling.
Goal
I would like to be able to do something along the following lines in my site.css file:
.feedbackItemIconPraise
{
.icon-thumbs-up; //class included in font-awesome.less
color:Green;
}
Problem
When I try the approach above, I get the following error:
This error makes sense; I'm just not sure how best to correct it without creating an additional import of font-awesome.less in my site.less (which I imagine would be its own issue).
To clarify: Per comments below: I have a class name that I'm using from a Knockout viewmodel. (for example, if "Praise" is selected, it will apply the class "FeedbackItemPraise"). If FeedbackItemPraise is selected, I'd like it to apply the .icon-thumbs-up class from font-awesome (which displays the icon via a web font) and then also make the color green.
What I have so far
Bootstrap.less customization (only relevant parts shown):
//Sean's customizations
#import "background.less"; // Background images and colors
#import "font-awesome.less"; // Font Awesome font (SK 2012/09/04)
#import "site.less"; // site-specific LESS
Class within site.less:
.feedbackItemIconPraise
{
.icon-thumbs-up; //class included in font-awesome.less
color:Green;
}
UPDATED
Upon looking at Font-Awesome again, looks like they have now included mixins for the icons. See the following two files.
https://github.com/FortAwesome/Font-Awesome/blob/master/less/variables.less
https://github.com/FortAwesome/Font-Awesome/blob/master/less/mixins.less
Use like:
.feedbackItemIconPraise
{
.icon(#thumbs-up-alt)
color:Green;
}
ORIGINAL
If you look at font-awesome.less you will see that class doesn't exist, it's actually .icon-thumbs-up:before. Unfortunately you can't use pseudo classes as mixins, eg .icon-thumbs-up:before;.
You will need to modify your font-awesome.less file (or just add this class, or just put content: "\f087"; directly where it needs to go) so there is a non :before version:
.icon-thumbs-up:before { content: "\f087"; }
.icon-thumbs-up { content: "\f087"; }
Then apply this concept:
.feedbackItemIconPraise {
font-family: "FontAwesome";
font-size: 90px;
padding-top: 7px;
font-weight: normal;
font-style: normal;
display: inline-block;
text-decoration: inherit;
&:before {
.icon-thumbs-up;
}
}
Seems Font-Awesome icons have to use the :before pseudo for them to show up.
Demo: http://pulse-dev.com/files/stackoverflow/fontawesomeclass/
There may be another solution to this, but I combine my scripts into a single file (automatically) before running it through the LESS compiler. This allows me to define variables and mixins up front that can be used in any of my LESS files.
The online documentation does mention that LESS can include the #import files, making the variables and mixins available. You may need to ensure that you are on the latest version of the compiler and if the import files are organised in a folder structure, you may need to tell the compiler where to search.
var parser = new(less.Parser)({
paths: ['.', './lib'], // Specify search paths for #import directives
filename: 'style.less' // Specify a filename, for better error messages
});
This is my normal css to apply :
<h3><strong><span style="color: #3399ff;"></span></strong></h3>
I wish to apply that style above to these js elements:
$('#no_tax_price').text("$"+no_tax_price.toFixed(2));
$('#tax').text("$"+tax.toFixed(2));
$('#tax_price').text("$"+(no_tax_price+tax).toFixed(2));
If you define your styles in CSS rather than HTML, your new elements will automatically take on the styling - no JS required.
#no_tax_price, #tax, #tax_price {
font-size: 18pt;
font-weight: bold;
color: #3399ff;
}
Normally I wouldn't use <h3><strong><span> to apply styles (instead just use a single class with the right CSS properties defined), but a quick fix is to just wrap those elements around the contents of your "jQuery elements":
$('#no_tax_price, #tax, #tax_price')
.wrapInner('<h3><strong><span style="color: #3399ff;"></span></strong></h3>');