I am working on a project that uses Polymer. One component that is unclear to me is how to use the style mixins. For example, I have something like this:
<html>
<head>
<script src="bower/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower/polymer/polymer.html">
<link rel="import" href="bower/paper-styles/paper-styles.html">
</head>
<body unresolved class="fullbleed">
<template is="dom-bind" id="app">
<paper-material>
<paper-item>
<span class="paper-font-title">Welcome</span>
<span class="flex"></span>
<div class="secondary">
Today Is: <span>[[ date ]]</span>
</div>
</paper-item>
</paper-material>
</template>
</body>
</html>
Basically, I'm trying to use the paper-font-title and secondary typography styles. For some reason though, its like the styles aren't loaded. I looked in the console and I am not getting any 404s. For that reason, I assume the paper styles are being loaded. Why can't I use them?
To use style mixins add a <style is="custom-style"></style> to your body.
As content of the style tag add CSS rules like
some-selector {
#apply(--some-mixin-name);
}
Here is an explanation on how to use the mixins: https://www.polymer-project.org/1.0/docs/devguide/styling#custom-style
I found it very helpful.
Related
<meta charset="utf-8">
<meta name="viewport" content="width=device-width"> <!--Supporting All devices width-->
<meta name="description" content="Lowa State University Library">
<meta name="keywords" content="For a Web Design Assignment">
<meta name="author" content="Tharuka Dananjaya">
<link rel="stylesheet" href="./css/style.css">
<!--<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">-->
</head>
<body>
<header>
<div class="container">
<div id="head_top">
<h1>LOWA STATE UNIVERSITY | <span class="highlight"> LIBRARY</span></a></h1>
</div>
<nav>
<ul>
<li>
<li class="current">Home</li>
<div class="dropdown">
<button class="button_book">Books</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
</div>
<!--Login
Register-->
Student Info
</ul>
</nav>
</header>
<section id="search_bar">
<div class="container">
<form>
<input type="text" placeholder="Search">
<button type="search" class="button_1">search</button>
`I have external CSS file and Bootstrap. i already link my CSS style in my page and it's work perfect. so I'm try create a table using bootstrap. but after linking bootstrap files in page change every styles. ex. header fonts, everything. So how do i link both Styles and i need both styles.After Linking Bootstrap file
Please first add bootstrap style and then your style.css.
Like
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
in your index.html file in the head section.
The priority of css works from bottom to top.
If you're importing your custom styles BEFORE Bootstrap; as soon as you import bootstrap it will override the classes you may have created in your CSS file.
Try importing bootstrap before your own CSS and see if that makes a difference.
Without any code it's all I can help you at this moment.
Edit
<link rel="stylesheet" href="./css/style.css">
<!--<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">-->
As I can see you were indeed importing bootstrap after your own CSS rules. That way Bootstrap is going to override your classes in your CSS files. To get around this flip the order of these two statements so your CSS has prevalence over what Bootstrap states.
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
Also, if you're not providing any font-family attributes in your CSS it's going to use Bootstrap's default. Don't forget to override all necessary classes AND elements (body, p, div...).
Further info on how to apply theming in your own Bootstrap instance can be found here, in the official Bootstrap docs.
Extra tip while debugging: Check in the developer environment you're not getting any 404 in the network requests regarding your links to your own stylesheets since it feels like your styles are not working but actually they are never reaching the browser
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
Compiler tends to read code from line 1. If you put bootstrap.css after the style.css. Definitely bootstrap.css will overwrite style.css.
hi Tharuka Dananjaya,
the problem was totally made from bootstrap external css only.
how to solve?
1. first to check which section is breaking and inspect the element, you can see
the browser take the boostrap css not your style.
so what to do , make that particular css as !important
eg: color:red!important;
make your style high priority!
copy your whole code from style.css, and paste in your html page
as internal css styling way, which means put in b/w head and body.
I'm using a style module with polymer 2.0 (https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom#style-modules).
The styles are working. However in Chrome the css content prints out onto the web page looking like gibberish. Works perfectly in Firefox. How can I fix this in Chrome? Thanks in advance.
Here is what I have:
lbw-css-styles.html
<dom-module id="lbw-css-styles">
<template>
<style>
:root {
background-color:green;
...
</style>
</template>
</dom-module>
page-test.html
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/polymer/polymer-element.html">
<link rel="import" href="lbw-css-styles.html">
<dom-module id="page-test">
<template>
<style include="lbw-css-styles">
...
</style>
</template>
<script>
Polymer({
is: 'page-test',
</script>
</dom-module>
Figured it out. My css referenced a ":root" selector which is now deprecated in polymer 2.0. Removing the deprecated selector resolves the issue.
Back with another Polymer question, I have a Polymer/Electron app that I'm trying to style.
I want to create a theme.css that contains a :host block with my entire theme in it that I can then import into my modules stylesheet but I've tried a few different things and tried finding anything in the documentation to no avail.
So far, I have tried in, and outside of the <template> definition:
<link rel="stylesheet" href="./account-list.css"> with an #import
<style>#import 'my-theme.css';</style> just above my <link>
:root instead of :host in my theme.css
But neither seem to work, the theme.css is definitely being requested but has no affect on the module's style.
Is there anyway to have a theme like this for Polymer, I really don't want to have a build step.
There's a new concept called style module (actually a dom-module element behind the scene) introduced in Polymer 1.1 (read it here) and the old way of including external stylesheets has been deprecated (read it here).
Basically, you need to create an html file like how you normally create an element to store your styles. The id defines the name of this file that will be referenced later on.
<!-- shared-styles.html -->
<dom-module id="shared-styles">
<template>
<style>
.red { color: red; }
</style>
</template>
</dom-module>
Then obviously you need to import this file in your page.
<link rel="import" href="shared-styles.html">
Now, there are two scenarios.
If you are using custom-style at the document level, you need to
include the style module you previously defined like this -
<style is="custom-style" include="shared-styles"></style>
If you simply want to include the style module inside one of your
elements, do this -
<dom-module id="my-element">
<style include="shared-styles"></style>
Have a look at this plunker that demonstrates both scenarios.
Keep in mind that in your particular example, since you are using :host, I assume you will go with scenario 2. So this plunker should be a bit more clearer.
Using dom-module concept, and in order to use a external third party I did the next and it is working, but probably is not a Polymer best practice.
Dom module with 3rd party css (third-party-styles.html)
<dom-module id="third-party-styles">
<link rel="stylesheet" href="../bower_components/thirdParty/external.css">
</dom-module>
I created a container (elements.html) where import all needed html modules, and there I registered the third party style module and my module
<link rel="import" href="third-party-styles.html">
<link rel="import" href="my-module.html">
And I added the elements.html in the head of my index.html
<head>
...
<link rel="import" href="elements.html">
<head>
<body>
<my-module></my-module>
</body>
In my Polymer Element (my-module.html)
<link rel="import" href="third-party-styles.html">
<dom-module id="my-module">
<style include="third-party-styles"></style>
<template>
<p class=".thirdPartyClass">Content with third party css rule</p>
</template>
</dom-module>
any feedback?
I'm trying to get to grips with Polymer 1.0 after doing a little work with 0.5. I'm struggling with what should be a very simple styling problem. I just can't seem to apply a style to a custom element.
Here is my element definition, my-element.html:
<link rel="import" href="../core/polymer/polymer.html">
<dom-module id="my-element">
<template><h1>Hello World</h1></template>
</dom-module>
<script>
Polymer({
is: 'my-element',
});
</script>
And here is the main page using it, index.html:
<!doctype html>
<html>
<head>
<script src="../core/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="my-element.html">
</head>
<body>
<my-element></my-element>
</body>
</html>
This works fine... but now suppose I want to put a style on the instance of my-element. I add this to index.html:
<style>
my-element {
margin-top: 50px;
}
</style>
Nothing happens, no margin is added. Stangely the Elements inspector in Chrome doesn't seem to "see" the custom element, it looks like it's floating outside the page and doesn't enclose the elements contained within. See screenshot:
I initially suspected a bug in Chrome but it's the same problem in Firefox.
Any help appreciated, many thanks.
Try putting the attribute is="custom-style" on your style tag.
<style is="custom-style">
...
</style>
Also, by default an element will be displayed inline, but you can change this by applying a display property in your element :host style.
<dom-module id="my-element">
<style>
:host {display: block;}
</style>
<template>
...
</template>
</dom-module>
because my-element is not a default DOM element, you should "enable" it, like those html5 shivs are doing it for older browser that dont understand the new html5 elements
This tutorial should help you
var XFoo = document.registerElement('my-element');
document.body.appendChild(new XFoo());
The first argument to document.registerElement() is the element's tag name. The name must contain a dash (-). So for example, , , and are all valid names, while and are not. This restriction allows the parser to distinguish custom elements from regular elements but also ensures forward compatibility when new tags are added to HTML.
The second argument is an (optional) object describing the element's prototype. This is the place to add custom functionality (e.g. public properties and methods) to your elements.
I need to print web pages in my website and I'm wondering how to make row and spanX classes of Bootstrap work so I can easily manage the content of the printed page.
For example:
<div class="row-fluid">
<div class="span12">
<strong>Some stuff</strong>
</div>
</div>
and
<div class="row-fluid">
<div class="span6 offset6">
<strong>Some stuff</strong>
</div>
</div>
look exactly the same when calling window.print().
In the example above, <strong>Some stuff</strong> is not being pushed ahead by the offset6.
I've done 2 things:
Taken all #media print code from bootstrap.css and
bootstrapresponsive.css;
Changed media to all: from <link rel="stylesheet" type="text/css"
href="/path/css/bstrapmin.css" media="screen" /> to <link
rel="stylesheet" type="text/css" href="/path/css/bstrapmin.css"
media="all" />;
With these changes, header, footer and the bootstrap (original) font have appeared on the printed page but still no effect from/of the classes.
Thanks.
Did you make a separate stylesheet and place it after all other stylesheets and do
<link rel="stylesheet" type="text/css" href="/path/css/print-stylesheet.css" media="print" />
Anything you put in there will override any other styles you have in your media="screen" stylesheets. Just make sure it is the last CSS file called in your DOM.
I forget if you have to include #media print in your print style sheet, I think the media="print" will take care of that