I have a website favicon or head tag:
<head>
<link rel="icon" href="{% static 'images/favicon.png' %}" style="background-color: rgba(0, 56, 103, .94) !important;">
</head>
This will display here:
My question is, how can I change the background color of this favicon.
I have tried to add css to it, and it doesn't work.
You define a favicon with a link tag. This tag doesn't accept style and can't be changed via CSS. You'll have to change the icon itself.
You can learn more about the link tag at: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link.
Related
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.
How can i use material design feature for aggrid? In my angular2 application i have used ag-grid and mentioned the class name as ag-material and set the row height to 48. But material design look doesnt apply for my grid. Should i include any CSS file in my index or it will take from the aggrid packages?
This is how i applied ag-material class to the grid and overrided the row height at the end.
<ag-grid-ng2 style="width: 100%; height: 100%;"
class="ag-material"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[rowData]="rowData"
rowSelection="single"
(selectionChanged)="onSelectionChanged()"
rowHeight="48">
</ag-grid-ng2>
can somebody help me in getting material design look for aggrid ?
The guide on the angular 2 implementation says
You will need to include the CSS for ag-Grid, either directly inside your html page, or as part of creating your bundle if bundling.
and then it demonstrates including the stylesheets needed:
<link href="node_modules/ag-grid/styles/ag-grid.css" rel="stylesheet" />
<link href="node_modules/ag-grid/styles/theme-fresh.css" rel="stylesheet" />
Looking into the github repo it shows that there is a separate stylesheet for the material theme that you would need to include:
<link href="node_modules/ag-grid/styles/theme-material.css" rel="stylesheet" />
For purposes of embedding very long Gists from Github in a Wordpress blog, what code will permit me to set the height so that vertical scroll-bars are generated? Something around 500px would be perfect.
EDIT: The issue is now resolved, but I spent so much time on this issue, I believe it would be helpful to have a thread dedicated to that issue. I've posted an answer below that is working.
<style type="text/css">
.gist {width:500px !important;}
.gist-file
.gist-data {max-height: 500px;max-width: 500px;}
</style>
<script src="https://gist.github.com/user-name/123456789.js"></script>
Example: Boilerplate webpage borrowed from : http://www.dummies.com/how-to/content/a-sample-web-page-in-html.html [The answer works as advertised as of February 24, 2016 with Firefox 44.0.2 on OSX Snow Leopard 10.6.8.]
<html>
<!-- Text between angle brackets is an HTML tag and is not displayed.
Most tags, such as the HTML and /HTML tags that surround the contents of
a page, come in pairs; some tags, like HR, for a horizontal rule, stand
alone. Comments, such as the text you're reading, are not displayed when
the Web page is shown. The information between the HEAD and /HEAD tags is
not displayed. The information between the BODY and /BODY tags is displayed.-->
<head>
<title>Enter a title, displayed at the top of the window.</title>
</head>
<!-- The information between the BODY and /BODY tags is displayed.-->
<style type="text/css">
.gist {width:300px !important;}
.gist-file
.gist-data {max-height: 300px;max-width: 300px;}
</style>
<body>
<h1>Enter the main heading, usually the same as the title.</h1>
<p>Be <b>bold</b> in stating your key points. Put them in a list: </p>
<ul>
<li>The first item in your list</li>
<li>The second item; <i>italicize</i> key words</li>
</ul>
<p>Improve your image by including an image. </p>
<p><img src="http://www.mygifs.com/CoverImage.gif" alt="A Great HTML Resource"></p>
<p>Add a link to your favorite Web site.
Break up your page with a horizontal rule or two. </p>
<hr>
<p>Finally, link to another page in your own Web site.</p>
<!-- And add a copyright notice.-->
<p>© Wiley Publishing, 2011</p>
<script src="https://gist.github.com/lawlist/12345678.js"></script>
</body>
</html>
None of the above answers work anymore. Here is the updated CSS that displays the gist correctly with visible scrollbars where needed.
.gist {
max-width:350px;
overflow:auto;
}
.gist .blob-wrapper.data {
max-height:200px;
overflow:auto;
}
See this blog post for example:
How to set custom height and width of embedded Github Gist.
They seem to have changed something, so now you need to do this:
<style type="text/css"> .gist {width:500px; overflow:auto} .gist .file-data {max-height: 500px;max-width: 500px;} </style>
If your gist is inside an iFrame, which is generated and you can't access since it's and embedded HTML, you might want to take a look at this.
On iPhone5 Safari I am finding that most of the time my page renders using default fonts before a google web font loads BUT the page is not re-rendered when google fonts finish loading. I'm not seeing this problem in desktop browsers or WindowsPhone, on these platforms I have not seen any problems wrt fonts being displayed.
Do I need to use the webfonts API to manually tell the page to redraw somehow? This seems overkill so maybe I'm missing something?
I load the fonts in as follows:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>New Web Project</title>
<link href='http://fonts.googleapis.com/css?family=Dosis:300,400,500' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
I define some styles in a separate CSS file and then use these styles in the body of my page.
.defaultHeading {
font-family: 'Dosis', sans-serif;
font-size:36px;
color:#a02422;
font-weight:500;
line-height:36px
}
OK, I fixed all my problems by specifying the following in the CSS
#media only screen and (max-device-width: 480px) {
#main { -webkit-text-size-adjust:100% }
}
This stops Safari from resizing fonts on iPhone.
I cannot for the life of me figure out why there are scroll bars appearing on my iframe Page tab. The width is set at 500px, after knocking it down 5px at a time from 515px. There are no margins, and the height setting is on "fluid." When I view the html page that the iframe is showing directly, there is no extra white space, so it looks like Facebook is adding white space (a margin or pad?) on the left side of the iframe. The odd thing is that the scroll distance has remained the same as I've narrowed the page down from 515px to 500px. Further, the "fluid" option for the height does not seem to be applying to the iframe, so I can't use the hidden tag in my CSS or half of my content is chopped off.
Is this an issue for anyone else, or am I just doing something wrong? I'll post the code for the page below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>index_loc3</title>
<link rel="stylesheet" type="text/css" href="loc_styles.css" />
<script language="javascript" src="facebox/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="facebox/facebox.css" />
<script language="javascript" src="facebox/facebox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
</head>
<body>
<div id="container" style="width:500px">
<div id="header">
<img src="images/logo_slice.jpg" alt="" width="199" height="152" hspace="8" vspace="40" align="left" />
<img src="head_images/ymca1.jpg" align="right">
</div>
<div id="name"><img src="images/text_slice.jpg" alt="YMCA of Greater Fort Wayne" width="485" height="37" hspace="12" />
</div>
<br />
<div id="content1"><img src="images/cent_loc3.jpg" vspace="5">
<img src="images/park_loc3.jpg" alt="Parkview Family Y" vspace="10">
<img src="images/wells_loc2.jpg" alt="Wells County Y" vspace="6">
</div>
<div id="content2"><img src="images/jorg_loc3.jpg" vspace="5">
<img src="images/ren_loc3.jpg" width="240" height="216" vspace="10">
<img src="images/whit_loc3.jpg" vspace="5">
<img src="images/camp_loc3.jpg" vspace="5">
</div>
</div>
</body>
</html>
UPDATE: I found a bit of code that got the iframe to resize properly and get rid of the scroll bars. However, this seems to have caused my Facebox implementation to get messed up. It doesn't appear Facebox recognizes the change in screen position to change the center for Facebox, so it is popping up at the top of the page instead of the current center of the screen.
I had a similar problem where I had vertical and horizontal scrollbars being shown even when they were inactive (in Opera and Firefox, while in IE and Chrome the page was shown without the scrollbars). I had "fluid" height and width selected in the application settings. The problem finally disappeared when I reverted the height setting to "settable" and used the FB.Canvas.setSize function again.
To me it seems that Facebook's "fluid" setting for the height isn't working correctly for all browsers at the moment, maybe try setting it back to settable and going from there.
go to https://developers.facebook.com/apps/YOUR_APP_ID/advanced then
scroll to Canvas Settings then set Canvas Width and Canvas Height as you wish