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).
Related
I have problem in implementing font-weight: 100.
I want the my sentence to be ultra light/thin, but when I'm using font-weight:100, is not working.
What should I do? Do I need to import or install something?
I am using reactjs.
<p class="thin">Test</p>
.thin {
font-weight: 100;
}
In order to use specific font-weight, your font must support it, if it doesn't, then any value between 0 and 600 (not included, normal value is 400) will be interpreted as normal, and any greater value will be bold (bold normally is 700).
If your font doesn't have a light/thin variant, then I'm afraid you can't get a thinner font weight than normal (400).
EDIT NOTE : For fonts than only are normal (400), then bold is generated by default by the browser, for instance :
#import url('https://fonts.googleapis.com/css?family=Roboto');
p {
font-family: 'Roboto';
font-weight: 700;
}
<p>This is bold, but I didn't loaded Roboto 700, only Roboto 400.</p>
In this case, the render may differ from one browser to another, although it usually don't.
If you select a font on google fonts you have two choices: Embed it with the default embed code or customize it (in the overlay you get after you select a font)
If you customize it you have the ability to select which font weights you want to include. not every font supports every font weight. if you can't select it, it doesn't exist for this font.
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;
}
}
I'm trying to change the default font color / size etc in the area of my ckeditor instance, but it's not working for me.
In chrome inspector I can add this style to the header and it works:
.cke_editable {
color: #fff;
font-size: 14px;
font-family: "Calibri";
}
However when I add this to my editor.css it has no effect. I've tried at the start and at the end, with no success. When I reload and check the resources in inspector, the correct css file is being loaded. Why aren't my styles applied?
When I inspect the iframe the style tag in the header doesn't contain the styles either.
Figured it out by removing my config and re-adding it a part at a time.
The very first line was
fullPage: true,
I had copied this from another source which used fullpage. I don't need it so I removed it.
According to the documentation, having fullPage on will stop contentsCss being implemented. From the ckeditor documentation:
Note: This configuration value is ignored by inline editor as it uses the styles that come directly from the page that CKEditor is rendered on. It is also ignored in the full page mode in which developer has a full control over the HTML.
However, what they fail to mention is that having fullPage set to true will also stop any changes to editor.css from being loaded. Once it was removed my custom styles shined through
Handy tip:
contentsCSS does not have to point to a css file. You can put straight css in there instead of a url, like so
contentsCss: '.cke_editable { color: #fff; font-family: Calibri; font-size: 14px; } ',
This will apply these styles directly to the editor. This appears to be undocumented as the documentation only mentions stylesheet urls.
You need to change the content.css in the main ckeditor folder or add the following setting http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-contentsCss
It sounds like your CSS styles are being overridden - try adding !important to each style like below:
.cke_editable {
color: #fff!important;
font-size: 14px!important;
font-family: "Calibri"!important;
}
Just trying the new option google.maps.visualRefresh = true in the new version 3.12 of the Google maps javascript API. And although the map new look is great, now the text in my InfoWindows is using the font size Roboto.
The new InfoWindow content div CSS is:
font-family: Roboto, Arial, sans-serif;
font-size: 13px;
font-weight: 300;
This wasn't the case before and it doesn't work at all with the design of my website. Any idea how I could remove it to use the default font define in my body?
You can still use your own font in an InfoWindow. Simply provide HTML content instead of plain text, and you can style it any way you want with inline CSS or a stylesheet. Example in this fiddle:
var infowindow = new google.maps.InfoWindow({
map: map,
position: center,
content: '<div class="myinfo">Computer History!</div>'
});
using this CSS:
.myinfo { font-family:Georgia,serif; font-size:18px; }
Use HTML content and style it like suggested in this answer.
However, you need a CSS rule with higher specificity. See this fiddle (forked from Michael Gearys fiddle):
#mapbox .myinfo { font-family:Georgia,serif; font-size:18px; }
If you are quite lazy, as I am, you can out-specifitize Google by one-upping them. Simply redefine their own nefarious style attached to your body definition.
~ I am using SASS in the example but you can roll your own vanilla CSS by dropping the def's to root and tackin' on a 'body.' here and there ~
html, body {
font-family: Helvetica, Arial, sans-serif;
# steal/borrow their own styles to be used against them.
# in this example I have set the font to 'comical' size.
.gm-style div,
.gm-style span,
.gm-style label,
.gm-style a { font-family:Helvetica,Arial,sans-serif;font-size:200px;font-weight:2000}.gm-style div,
.gm-style span,
.gm-style label{text-decoration:none}.gm-style a,
.gm-style label{display:inline}.gm-style div{display:block}.gm-style img{border:0;padding:0;margin:0}
}
This approach is suitably brittle but will definitely patch up yer wonky fonts quickedy splix. This answer is probably not worth being marked as anything more than hackshop 3.1.
While using maps your'e using javascript, you can solve this with javascript listener. Paste this snippet within <script> tags somewhere before the output of MAP html stuff in your sourcecode (e.g. within the <head> section as I do):
var head = document.getElementsByTagName('head')[0];
var insertBefore = head.insertBefore;
head.insertBefore = function (newElement, referenceElement){
if(newElement.href && newElement.href.indexOf('//fonts.googleapis.com/css?family=Roboto') > -1) {
console.info('Prevented Roboto font from loading!');
return;
}
// intercept style elements for modern browsers
if(newElement.tagName.toLowerCase() === 'style' && newElement.innerHTML.indexOf('.gm-style') > -1){
console.info('Prevented .gm-style from loading!');
return;
}
insertBefore.call(head, newElement, referenceElement);
};
It will not "bite" for all dynamic loaded calls into the header, cos the methods Google use on various updates of the views differ. This only cover the head.insertBefore method.
/ Only in modern browsers as 2017, not ie8 (but with mods it will). Works for our cases but I dont know if this method interfear with other stuff.
I have a CSS property (font) that I need to be able to change from Javascript (a pulldown). However, this font should only be used when printing (#media print).
So, the javascript can't just change the value of the font, because that will effect the screen view as well. Is there a way to change ONLY the print version of the font property?
Alternatively is there a way to have a CSS property be a reference to another property?
That way, in the print CSS, I could say font:printfont, and in the screen CSS font:12. And then change the value of printfont, and it would only change the font when printing.
thanks.
EDIT: The point is that I need to be able to change the font size that the document gets printed at from the pulldown, but I don't want to change the font size that the document gets displayed at.
That's an interesting dilemma you have going on there. Off the top of my head, the only thing I can think of is to add a new tag to the header where your font-size is declared with !important. For example, in your head tags:
<style type="text/css" media="print">
.printfont {
font-size: 16px !important;
}
</style>
This will ensure that the new font-size will take precedence.
The following is a very quick example of how you may accomplish this with javascript
<script type="text/javascript">
var inlineMediaStyle = null;
function changeMediaStyle ()
{
var head = document.getElementsByTagName('head')[0];
var newStyle = document.createElement('style');
newStyle.setAttribute('type', 'text/css');
newStyle.setAttribute('media', 'print');
newStyle.appendChild(document.createTextNode('.printFont { font-size: 16px !important;}'));
if (inlineMediaStyle != null)
{
head.replaceChild(newStyle, inlineMediaStyle)
}
else
{
head.appendChild(newStyle);
}
inlineMediaStyle = newStyle;
}
</script>
Just ensure that you have onchange="changeMediaStyle()" as an attribute on your dropdown. Also, as a disclaimer in my example, I am not accounting for things like memory leaks, so you will have to work out those kind of issues on your own.
As to your alternate question, as far as I am aware, there isn't any method for declaring/using what is essentially CSS variables. However, there is currently a recommendation out there for it: http://disruptive-innovations.com/zoo/cssvariables/
seems like what you want to do is myabe just change or add a class to the item with JS
<p class="inrto comicSans">this is the text to change</p>
#screen p.intro {font-family:verdana;}
#print p.comicSans {font-family:comic-sans;}
You could just use JavaScript to switch classes, and have the
#print {
.myPrintClass { font-family: serif; }
}
#screen {
.defaultClass { font-family: sans-serif; }
}
While the class-based solutions would totally work, you could also use Javascript to dynamically add a new <link> tag to the page. For instance, if you have:
stylesheet1.css:
#print * {font-family:verdana;}
stylesheet2.css:
#print * {font-family:comicSans;}
You could then use jQuery to do something like:
$(document.body).append("<link href='stylesheet2.css'/>");
(you could do it without jQuery too, but I forget that syntax and am too lazy to look it up ;-)).
However, if you're only changing small amounts, a single stylesheet + different classes is probably the better way to go; the new <link> tag solution is only worthwhile if you have a bunch of different style changes happening.