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.
Related
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).
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;
}
I'm trying to create a page which uses java script to get data via PHP and then display it using a custom font declared in a CSS style sheet.
The entire page should use one custom font which I have declared in the main CSS file using #font-face like so:
#font-face {
font-family: 'bauhaus';
src: url('fonts/Bauhaus.woff') format('woff'),
font-weight: normal;
font-style: normal; }
My HTML file looks like this:
<html>
<head>
<script type="text/javascript" src="resources/raphael-min.js"></script>
<script type="text/javascript" src="resources/index.js"></script>
<link href="Main.css" rel="stylesheet" type="text/css">
<style type="text/css">
#canvas_container {
width: 100%;
border: 1px solid #aaa;
font-family:'bauhaus', "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<div id="canvas_container">FONTTEST</div>
</body>
</html>
Within the index.js I can create text objects using Raphaeljs' syntax like so:
var txt = paper.text(150, 590, 'Test123').attr({'font-family': bauhaus, 'font-size':'70', fill:'#000'});
If I do it like that no 'Test123' text appears at all (I assume because it can't find or use the style 'bauhaus') and if I remove the font-family attribute it shows me text using the browser's default style which in my case is Arial.
The 'FONTTEST' text on the other hand is displayed correctly using the correct #font-face Font.
Now my question is how to automatically have text created by Raphaeljs (or other Javascript libraries) follow the style declared by the CSS statements? I like using custom fonts but I can't find a proper solution on how to easily use the stylized text with Javascript.
Thanks for your help!
Rather than writing out your CSS attributes in-line in your JS, why not change your CSS at the top from #canvas_container to .canvas_container , and then put the attribute "class='canvas_container' " on all of your elements which you want that font on? Should be easier to specify the class attribute than the style attribute.
An even better approach, if you want the entire page to use your font, would be to put this in your CSS (in your case, the style element):
html, body { font-family: 'bauhaus', "Times New Roman", Times, serif; }
That will make all HTML and BODY elements use your font unless later overwritten.
Well, after a bit of searching through Raphael's code I found it automatically sets its own font style (Arial) on all its text elements. I don't think that really makes sense, especially since I couldn't figure out on how to override it with a CSS '#font-face' font, but ok.
My solution was to simply delete the automatic setting of the font attribute in Raphael's source code.
For anyone interested, it's in the part where theText is declared. Just delete the font: availableAttrs.font bit in res.attrsand everything will obey the CSS style you want.
You need to register the font with cufon. See http://raphaeljs.com/reference.html#Raphael.registerFont and https://github.com/sorccu/cufon/wiki/about.
You can assign the style of your text explicitly not thinking about what really does.
Write a specific styler object function like:
function Styler( style )
{
this._style = style;
this.get = function( text)
{
return "<span style=" + this._style + "'>" + text + "</span>";
}
}
and then use everywhere:
myStyler = new Styler( 'font-size: 20px; font-weight: bold' );
...
text1 = myStyler.get( "text1" );
text2 = myStyler.get( "text2" );
I'm using sifr for the first time today. I have it up and running; however, I need some help. Rather than explain, I'll show you the code below:
<div id="pullquote">“Fantastic property, facilities and location. We
couldn’t have asked for more!” <em>Mr & Mrs. Smith</em></div>
So far, so good. I have then styled that in the same document in case flash/JavaScript is disabled. No problem.
sIFR.replace(journal, {
selector: 'div#pullquote',
wmode: 'transparent',
css: [
'.sIFR-root { text-align: center; color: #be7705; font-size: 30px; background-color:#fdefd4; }',
'em { font-style: normal; color: #1d5d69; font-size: 26px; }']
});
That's what is included in my JavaScript file. Am I correct in styling the element like this? I got slightly confused with the selector, then using a second selector within js-css. Once again, there is also sifr.css. What should be included in this document? Should I be styling the element here?
I suppose my question is: What should be included, and what styling should be done in sifr-config.js and what styling should be done in sifr.css?
Thank you :)
In the CSS for the HTML page (sifr.css) you can add a style to hide the elements that sIFR will replace before does so, and you can do some tuning of the text so the text size maps better to the Flash font.
The selector parameter for sIFR.replace() is used to select the elements you wish to replace by sIFR.
The css parameter contains the CSS used inside the Flash movie. At this point, all CSS selectors are relative to the element you replaced, so if you replace an h1#foo, then you select em rather than h1#foo em. This is the only place you can style the text inside the Flash movie, aside from font size, which, if not specified here, is derived from the font size of the replaced element.
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.