I'm using grunticon to add svg's.
Everything working but I'm struggling to style the svg's with css.
I simple want to chnage the fill color of the svg.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!--jQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<!--css-->
<style type="text/css">
.icon-heart{
background: red;
}
.icon-heart{
fill: red;
}
</style>
<title>Title of the document</title>
<script>
/* grunticon Stylesheet Loader | https://github.com/filamentgroup/grunticon | (c) 2012 Scott Jehl, Filament Group, Inc. | MIT license. */
window.grunticon=function(e){if(e&&3===e.length){var t=window,n=!(!t.document.createElementNS||!t.document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect||!document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image","1.1")||window.opera&&-1===navigator.userAgent.indexOf("Chrome")),o=function(o){var r=t.document.createElement("link"),a=t.document.getElementsByTagName("script")[0];r.rel="stylesheet",r.href=e[o&&n?0:o?1:2],a.parentNode.insertBefore(r,a)},r=new t.Image;r.onerror=function(){o(!1)},r.onload=function(){o(1===r.width&&1===r.height)},r.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="}};
grunticon(["images/output/icons.data.svg.css", "images/output/icons.data.png.css", "images/output/icons.fallback.css"]);
</script>
<noscript><link href="icons.fallback.css" rel="stylesheet"></noscript>
</head>
<body>
<div class="icon-heart-1" style="height: 50px; width: 50px;"></div>
<div class="icon-heart" style="height: 50px; width: 50px;"></div>
</body>
</html>
You need to ensure that the svg's you are using do not have the fill="{color}" or style="fill:{color}" hardcoded in them as these will override any css style you apply.
I think you will have to do this by manually updating the svg unless there is a grunt way to do it.
To change the style attributes via css, you need to embed the svg into the dom. Grunticon (above v2.0) offers a easy way to do this.
You need to enable the enhanceSVG option in your gruntfile and then you can use the data-grunticon-embed attribute on your div to embed it.
Look at their documentation for more information
https://github.com/filamentgroup/grunticon#version-20-is-out---heres-whats-new
Related
Im developing google sheet side bar.
For that link to google side bar css package is used.
bt1 has an inline style background-color declarations with important!.
however when page loads the color is something gray.
I went over the google css trying to understand, with not much success.
bt2.onClick() - change bt1.disable. You can see the inline statement have effect only when bt1is disabled.
If not linking to google css - behavior as expected.
My understanding is that inline style must always win. especially when specifying important!
my questions are:
Is this statement true in 100% cases?
If not - in what cases?
Is there a way to overcome that?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<button id="bt1" style="background-color: rgb(43, 226, 137) !important;">bt1</button>
<button id="bt2" onclick="bt2OnClick()">bt2</button>
<script>
function bt2OnClick(){
let bt = document.getElementById("bt1");
// Switch state
bt.disabled = !bt.disabled;
}
</script>
</body>
</html>
Your style is in fact being applied but the add-ons1.cssyour adding add a background property with a linear-gradientso your background-color does not change the background-image property that represent the gradient
So if you want to override it, just select the background property instead of background-color
And you dont need you !important anymore :)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>
<body>
<button id="bt1" style="background: rgb(43, 226, 137)">bt1</button>
<button id="bt2" onclick="bt2OnClick()">bt2</button>
<script>
function bt2OnClick(){
let bt = document.getElementById("bt1");
// Switch state
bt.disabled = !bt.disabled;
}
</script>
</body>
</html>
I have a css class .menu-bar.
<style>
.menu-bar { width: 100%; text-align: center; }
</style>
If I place the class in external stylesheet, it won't load ( has no effect in html file ).
If I place the class in local stylesheet (in head tag), it only works if the class is also defined in the external stylesheet. I know this, because I removed the class from external stylesheet and the local class did nothing. My observations have been, this is being caused by text-align. What is going on?
My implementing code:
<div class="menu-bar">
<div> Content </div>
</div>
My intention is to place my css code in external stylesheets. In this scenario, I am having to duplicate this code which seems to demean the point of having external stylesheets. Any thoughts would helpful.
I personally Use VS code as far I can see your problem is that you are not able to link your external stylesheet (CSS file) If You use vs code you can use this.
Maybe some problem in the live server or anything if the code doesn't work the problem maybe something else.
Correct me if I am wrong!
MY CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="menu-bar">
<div>
<p>Content *Text align - center Text horizontally*. </p>
</div>
</div>
</div>
</body>
</html>
CSS CODE (External Sheet)
.menu-bar{
width: 100%;
height: 100%;
text-align: center;
background-color: aqua;
}
Click me to view result
The external CSS code did not run because you did not import it in your HTML.
Add this to the start of your HTML:
<link rel="stylesheet" href="PATH_TO_CSS.css">
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trial </title>
<link rel="stylesheet" type="text/css" href="trial.css">
</head>
<body>
<div class="container1">
<p>
Hello
</p>
</div>
<img src="D:\Trial Website\Grow Image.jpg" alt="image">
</body>
</html>
Image file location seems to be working in HTML in image tag, but it is not working in css where I use the same file location.
This is my CSS code:
h1 {
color: green;
}
.container1 {
background-image: url(D:\Trial Website\Grow Image.jpg);
text-align: center;
}
You must put URL that is web accessible, not path.
So if your webroot is under Trial Website, then do
<img src="/Grow Image.jpg" alt="image"/>
background: url("/Grow Image.jpg") ;
Place the resource path within quotes and the path should follow web standards, i.e, use forward slashes while defining a path.
Change this:
background-image: url(D:\Trial Website\Grow Image.jpg);
To:
background-image: url("/Trial Website/Grow Image.jpg");
This shall fix the issue.
I am trying to style the paper-drawer-panel using the Custom CSS Mixins as mentioned here. The paper-drawer-panel.css file applies
#apply(--paper-drawer-panel-left-drawer-container);
#apply(--paper-drawer-panel-main-container);
respectively for the drawer and the main containers. But, the styles set using the mixins do not seem to be working
The below is the code for paper-drawer-panel demo I have used.
<html>
<head>
<title>paper-drawer-panel demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="stylesheet" href="bower_components/paper-styles/demo.css">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<style>
#drawerPanel {
--paper-drawer-panel-left-drawer-container: {
background-color: #eee;
};
--paper-drawer-panel-main-container: {
background-color: gray;
};
}
</style>
</head>
<body class="unresolved fullbleed">
<paper-drawer-panel id="drawerPanel">
<div drawer>
<div>Drawer content... </div>
</div>
<div main>
<div>
<paper-button paper-drawer-toggle raised>toggle drawer</paper-button>
</div>
</div>
</paper-drawer-panel>
</body>
</html>
The documentation over at https://elements.polymer-project.org/elements/paper-drawer-panel states that this is valid too.
Styling paper-drawer-panel:
To change the main container: paper-drawer-panel {
--paper-drawer-panel-main-container: { background-color: gray; }; }
To change the drawer container when it's in the left side:
paper-drawer-panel { --paper-drawer-panel-left-drawer-container: {
background-color: white; }; }
So, what am I doing wrong in trying to get this simple thing working?
I am also testing the new styling schema of Polymer 1.0. It seems that you need to add is="custom-style" to the style tag.
I have this page
<head>
<title>Real Life Achievements</title>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width">
<link rel="stylesheet" type="text/css" href="frameworks/jquerymobile.css"/>
<link rel="stylesheet" type="text/css" href="application.css"/>
<script type="text/javascript" charset="utf-8" src="frameworks/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="frameworks/jquerymobile.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", initApp, false);
</script>
</head>
<body>
<div data-role="page" id="start">
...
</div>
</body>
I read here that I can apply styles for the whole data-role="page" container by doing this
.ui-page {
background: #eee;
}
but it doesnt work. My background for the page is always white. I dont want to use JQM styles. How can I apply my body-styles to the jquery mobile "page"?
.ui-content will style the data-role=content area. So for example if you want to style the whole page area you would do this:
.ui-content, .ui-page{background: #eee;}
Keep in mind you will have to move your css underneath the JQM style sheet as someone else already suggested.
Here is an example of it working http://jsfiddle.net/codaniel/7M4Pg/1/
You need to move the application.css header below the framework css files, because your styles are being overwritten by the framework loading. Alternatively, you can add !important to the background rule, like background: #eee !important;, to prevent being overwritten by later stylesheets.