I created a Github page following this tutorial: https://guides.github.com/features/pages/
I have my index.md and _config.yml file. I added a /images/font-awesome/address-card-solid.svg file to add this image https://fontawesome.com/icons/address-card.
I displayed the image by adding this to index.md
It displays properly when I go to the site (username.github.io). But the image scales and takes up the whole screen, and also is only black and white in color. How do I make the image smaller and change the color of it? I am using Github markdown (modifying index.md file).
I tried importing the font-awesome CDN and using HTML to display the image but that does not show anything (as expected, as I am in a .md file).
You can use CSS, set color, or backgroundcolor. Be aware that the SVG includes a path object that maybe need also the CSS class.
<!DOCTYPE html>
<html>
<head>
<style>
img {
background-color: #FFFFFF;
}
</style>
</head>
<body>
<p align="center"><img src="image.svg" /></p>
</body>
</html>
This will set the background white only for the specified image in a .md file, it should support other css stuff as well did not try.
I'm currently trying out Dygraphs (which seems really great btw!), but for some strange reason, the annotations feature won't work for me, AND it also fails in the exact same way on the jsFiddle version of Dygraphs' own gallery example of annotations, so this is most likely a bug/problem the devs really might want to take a look at(!).
To reproduce (same thing happens in both latest Firefox and latest Chrome):
1.
Look at the "annotations" example in the Dygraphs gallery, here:
http://dygraphs.com/gallery/#g/annotations
It works just fine and looks great, like this:
2.
Press the "Edit in jsFiddle" button, for that very example on that very page.
You are now sent to jsFiddle, and if you press the "Run" button there, the chart itself (colored curves etc) is shown just fine, but, only the "stems" of the annotation "signs" are shown, while the text contents of the annotations are all displayed as normal text to the left of the chart?! Like this:
Seems like some kind of CSS problem or similar to me, am I correct?
Since the example is Dygraphs' own example, which also works on their own site but not on jsFiddle, all suspicions of incorrectly formatted data or code can also be let go, I guess. It also happens to all my own Dygraphs charts on my own computer that I try to annotate, but this native Dygraphs gallery example is a much better example to investigate from I guess?
So, my question is of course, why does this happen, and how do I fix it to get the annotations working and displaying correctly?
ADDITION:
Let's make it even simpler, in order to isolate the problem without any hesitation.
Here is a very simple example for Dygraph annotations that I have put together on my own local disk (i.e. as a stand-alone HTML file):
<html>
<head>
<script type="text/javascript" src="dygraph.js"></script>
<link rel="stylesheet" src="dygraph.css" />
</head>
<body>
<div id="test_chart" style="width:750px; height:350px;"></div>
<script type="text/javascript">
var test_annotations = [
{
series: "TestCol1",
x: "2017-05-26",
shortText: "A",
text: "Test annotation",
cssClass: 'annotation'
}
];
testchart = new Dygraph(
document.getElementById('test_chart'),
"Date,TestCol1\n" +
"2017-05-25,110\n" +
"2017-05-26,80\n" +
"2017-05-27,75\n",
{}
);
testchart.setAnnotations(test_annotations);
</script>
</body>
</html>
When I open this file (locally with file:// in Chrome on my computer, having the latest dygraph.js and dygraph.css in the same directory), this is what I get:
As you can see, exactly the same problem as described above appears here, i.e. only the "stem" of the test annotation is visible in the graph itself, while the annotation text ("A") is displayed to the left of the graph.
The Firebug console is empty after having loaded this file, and no attempts (unsuccessful or otherwise) of loading any images are anywhere to be found in the Firebug network tab either.
Again, this very much feels like some kind of CSS positioning problem to me, but I may of course very well be wrong?
The answer to provide to this question would then be:
How, in as few and simple changes/steps as possible, would I get this local example PoC code for Dygraphs annotations to work as intended, i.e. showing the annotation text "A" inside a square at the correct position inside the graph (i.e. at the position where the "annotation stem" is currently just displayed, just as is done in the working example on the Dygraphs page, in my first screendump above in this question)?
Setting
position: absolute
solved the problem for me.
The gallery example loads images from dygraphs.com. When you load the demo on jsfiddle, it tries to load the images from jsfiddle, which doesn't work. dygraphs annotations are working fine, it's just that the image files are missing.
It seems that I was right about the CSS positioning problem after all.
The annotations are rendered by Dygraphs by adding the following HTML to the DOM of the page (this is the exact HTML for my test annotation in my local example code in the question test above, extracted live using Firebug):
<div style="font-size: 14px; left: 392.5px; top: 241.214px; width: 16px; height: 16px; color: rgb(0, 128, 128); border-color: rgb(0, 128, 128);" class="dygraph-annotation dygraphDefaultAnnotation dygraph-default-annotation annotation" title="Test annotation">A</div>
If I (as suggested by this SO question) add the CSS property position: relative to this div (manually, using Firebug), the graph suddenly looks like this:
See, the annotation text is now correctly positioned! It's still missing its opaque background and colored border though, but I guess this is just the result of even more CSS properties missing for some reason?
So, let's focus then on why there is missing CSS for the annotations I guess?
My best guess is that the dygraph.css file isn't properly loaded under certain conditions (apparently both on jsFiddle and locally on my computer, even though it is indeed there in the same directory as the HTML file and dygraph.js)? Or am I wrong?
A Firebug dump of the applied CSS for the annotation div seems to support this. Here is the CSS from Firebug for the annotation div of my local example (and also same in jsFiddle):
And here is the CSS for the same thing in the working instance in the gallery on the Dygraphs site:
See, the classes from dygraph.css is completely missing in my local example and in the jsFiddle example (even though indeed explicitly referenced in the class attribute of the annotation div's html code, as can be seen above), even though the CSS file is indeed there in the same directory as the dygraph.js file?!
#danvk, do you have any idea why this happens, and if Dygraphs could be patched somehow to avoid this from happening, and thus load all the CSS that it is supposed to for the annotations?
The only working hack-solution I can find for the moment is to dump the entire contents of dygraph.css inline in the <head> of the HTML file, as so:
<style>
/**
* Default styles for the dygraphs charting library.
*/
.dygraph-legend {
position: absolute;
font-size: 14px;
z-index: 10;
width: 250px; /* labelsDivWidth */
/*
dygraphs determines these based on the presence of chart labels.
It might make more sense to create a wrapper div around the chart proper.
top: 0px;
right: 2px;
*/
background: white;
line-height: normal;
text-align: left;
overflow: hidden;
}
...
/* For y2-axis label */
.dygraph-label-rotate-right {
text-align: center;
/* See http://caniuse.com/#feat=transforms2d */
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
</style>
After that it's finally working fine:
Addition:
It seems like others too (1) (2) have this general problem regarding the loading of CSS files. No accepted answer to neither that SO question nor Mozilla support thread though, and indeed, none of the suggested answers work for me either. WTF, how can such a huge problem be generally unknown/unanswered? Please do also note that the same thing happens for me in both Chrome and Firefox, and also on multiple computers, out of which some have never opened the file before, so no strange cache-related effects should be involved either. Either way, it would seem like the bug is outside of Dygraphs' scope.
I'm afraid I'm late to the party, but it looks the problem is still valid (or workaround is not well documented). I was able to have better estimation of position by adding in index.html:
<style>
.dygraph-annotation {
position : relative;
display:inline-block;
}
</style>
However still annotations are not following the chart well:
The option attachAtBottom : true added to annotations might help here a bit, but still annotations are jumping on hovering graph (I guess this is because of legend taking some place)
All day trying to solve the same problem as the author at the beginning of this post. Yes, changing the CSN file allows you to somehow solve the problem, but everything worked by itself without dancing with a tambourine when I added this one line:
link rel = "stylesheet" href = "// cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.min.css" /
As always, you need to be more attentive to the little things)
How do I change the looks of how the source code is presented in doxygen? I mean, when you click the link to view the source code of the file(s) that generated the documentation. I'm interested in changing the font size.
You can use custom CSS to style doxygen output.
As mentioned, you'll need to use custom CSS, which you can do through HTML_EXTRA_STYLESHEET.
To get a CSS template, run:
doxygen -w html header.html footer.html customdoxygen.css
You can then choose out elements from customdoxygen.css that you wish to modify, and add them to your own css file.
The CSS which ultimately informs the font-size of code snippets (fragments), is actually the div.line within:
div.line {
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-size: 15px;
...
}
I was trying to use following code with GWT 2.2.0:
//in my UiBinderFile
<ui:style field="myStyle" src="MyCssFile.css"/>
.
.
<g:Label ui:field="aboutMainHeader" styleName="{myStyle.decorFont}"></g:Label>
and also in MyCssFile.css in same directory as UiBInder xml,
//entire MyCssFile.css
#font-face {
font-family: cool_font;
src: url('cool_font.ttf');
}
.decorFont{
font-family: cool_font; /* no .ttf */
}
When I try to compile this, I get some NPE in UiBinder parser, right afer call of method that does font face parsing. I don't know what is wrong. Has anyone tried face-fonts with GWT, and could you please post working example?
Thanks...
See http://code.google.com/p/google-web-toolkit/issues/detail?id=5247
You'd have to put your #font-face declaration in an external (not-CssResource) stylesheet (could be inlined in you HTML host page for instance)
Because of the limitation Thomas has noted I've developed a small project to define font resources into GWT clientbundle's. It's still a beta but hopes you like it.
It's on http://code.google.com/p/gwt-webfonts/
I am creating an email template which has to display images from external website. I had placed some <img> tags for rendering the images and there are some <td> tags with background-image property set in inline css of the elements.
Now, when an email is received in outlook, the images are not displayed (this is expected as the images are not embedded). And I click the download images to see the images properly. The images in <IMG> tag are only shown and the background-image for the <TD> is not rendered.
Any views on solving this problem?
Thanks!
At last I found the answer.
Outlook 2007 does not use the Internet Explorer's rendering engine for loading HTML content. Instead it uses Word 2007 HTML and CSS capabilities.
Because of this CSS attributes such as background-image is not supported. And hence it's not possible to set a background image for HTML elements in outlook using standard CSS tags.
More info is available at http://msdn.microsoft.com/en-us/library/aa338201(v=office.12).aspx
Background images are not supported in Outlook. As a best practice, you should never use background images in HTML emails. If you must have a background, you can use and image PLUS a solid color. Those with email clients that support background images will get the images, and those that don't support it will fall back to the solid color.
There is actually a method to use background images in HTML emails in Outlook.
As Chaitanya mentions it can't be done with CSS, but it can be done via VML.
The technique is a bit more involved than using background: url(....) and I don't use it as frequently as I would use the CSS technique (if it worked in Outlook). But it is very useful.
I've used it successfully on a number of campaigns.
Full instructions here: including a list of email clients that support this technique.
http://www.campaignmonitor.com/forums/viewtopic.php?pid=14197
Also, here's a guide from Campaign Monitor: http://www.campaignmonitor.com/css/ which proved super helpful for me.
There is a way of displaying HTML images.
Right html emails rendered as MSWord document in outlook.
I got the solution from this https://stackoverflow.com/a/12693917/413032 post.
So we need an alternate.
In fact you may open your html email in MSWORD and finding what seems wrong and considering what can be an alternate gives idea.
Here is what I did ;
Added v namespace to html tag
< html xmlns:v="urn:schemas-microsoft-com:vml"
Added v's style to head block
< head >
<style type="”text/css”">
v\:* { behavior: url(#default#VML); display:inline-block}
</style>
In table or where you need add your MSWord alternate
<table style="background-image: url('https://e-telesaglik.com/images/email/canvas-bg.jpg');background-repeat:no-repeat;" cellpadding="0" width="960">
<!--[if gte vml 1]>
<v:shape
stroked='f'
style='position:absolute;margin-left:-90pt;margin-top:-1.55pt;
z-index:-503306481;
visibility:visible;
width:720pt;
height:475pt;
top:0;
left:0;
border:0;
'>
<v:imagedata src="https://e-telesaglik.com/images/email/canvas-bg.jpg"/>
</v:shape>
<![endif]-->
<tbody> ....
That is all.
Sure it will be a MSWord render. And more, as you notice we use absolute positioning...
Anyway this is a workaround and solves the issue in a way.
We hope one day MS-Outlook renders html e-mails with a web browser not with MS-Word.
This works in Gmail,
I tried this to show div with image in email newsletter, try inline css, sending email guidelines here