I am currently learning polymer and I am struggling with one of the example on the Polymer website. The example is this one : https://www.polymer-project.org/1.0/toolbox/app-layout#condensing-header.
My index.html is the same as the one in the Sample toolbars section, I have just replaced the body with the one in the Condensing Header.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<!-- import latest release version of all components from polygit -->
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="app-layout/app-header/app-header.html">
<link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<!-- sample-content included for demo purposes only -->
<link rel="import" href="app-layout/demo/sample-content.html">
<style is="custom-style">
body {
/* No margin on body so toolbar can span the screen */
margin: 0;
}
app-toolbar {
/* Toolbar is the main header, so give it some color */
background-color: #1E88E5;
font-family: 'Roboto', Helvetica, sans-serif;
color: white;
--app-toolbar-font-size: 24px;
}
</style>
</head>
<body>
<app-header id="header" effects="waterfall" fixed condenses>
<app-toolbar>
<div title>Left</div>
<div title>Title</div>
<div title>Right</div>
</app-toolbar>
<paper-tabs selected="0" primary>
<paper-tab>Food</paper-tab>
<paper-tab>Drink</paper-tab>
<paper-tab>Life</paper-tab>
</paper-tabs>
</app-header>
</body>
</html>
To make things easier: Plunker
In the Polymer tutorial, Left / Title / Right are resp. on the left, center and right of the header but in my version, they are all on the left. Any idea why ?
Thanks
Related
I am trying to learn Bootstrap and wanted to make an exercise by building this site on my own:
https://konect.co.za/
I am seriously having trouble with overriding to Bootstrap and also adding my custom font. To add my custom Google font, I've tried this, but did not work;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
and in css
html{
font-family:"Roboto", "Arial";
font-size:20px;
font-weight:300;}
Here's the img that I cannot style;
<section class="container">
<img class="rounded-circle profile-pic" src="/resources/img/profile_pic.jpg" alt="">
</section>
And the styling;
section img .profile-pic{
margin-left:150px;
}
Try to add in Body
body {
font-family: 'Roboto', sans-serif !important;
}
The html styles will apply to all document but it has very low precedence. it will work only until and unless their is not specified styles inside body. but in your case bootstrap added their own styles in body tag.
body {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
Thats why your style was not working
You need to put "!important" with your custom CSS style to override any bootstrap styles. Also, CSS will always use the most specific style to style an element so if you put your styles in html{} it will be overridden by p{} h1{} etc. Remember that style sheets are cascading so any styles at the top will be overwritten by styling the same element below.
You need to put "!important" with your custom css style to override bootstrap css.
One more thing if you are using external custom css file than import after bootstrap css file.
See, below example for more.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<style>
html{
font-family:"Roboto", "Arial" !important;
font-size:20px !important;
font-weight:300; !important;
}
.h1-override{
font-size:12px !important;
}
</style>
<body>
<div> testing bootstrap overriding </div>
<h1 class="text-center text-uppercase h1-override">Konect</h1>
<p class="text-center">Technology & Data Management Specialists</p>
<h1 class="text-center text-uppercase">without custom style</h1>
</body>
</html>
/*This is for the overall look of the page, what font and the repeated background image*/
body {
background-image: url("../Assets/crossword.png");
font-family: Rockwell, "Courier New", Georgia, 'Times New Roman', serif;
}
/*This is just to get the main content of the page centered*/
#mainBody {
width: 80%;
margin: auto;
margin-top: 10px;
}
.navbar-custom {
background-color: none;
}
<!DOCTYPE html>
<html>
<head>
<!-- This is the title of the first page -->
<title></title>
<meta charset="utf-8" />
<!-- This is the viewport settings for bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- These are the javascript, CSS, and jquery file scripts -->
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/MyStyleSheet.css" rel="stylesheet" />
</head>
<body>
<div id="mainBody">
<nav class="navbar navbar-inverse navbar-custom">
</nav>
</div>
</body>
</html>
Not sure why I am having so much trouble with this nav bar. Trying bootstrap because its supposed to make things easier..
But I can change the color of navbar background to say blue. But if I give the background color none. it does nothing.
I have tried marking it important, I seen suggestions to make it navbar-default and can't get it to work. I just want to background to be transparent and not have anything in it.
none is not a color, so you can't use it as the background color. You can use transparent instead.
Another problem you have is the navbar-inverse class in your <nav> element, and it will get higher precedence.
You can use .navbar-custom.navbar-inverse to fix this:
/*This is for the overall look of the page, what font and the repeated background image*/
body {
background-image: url("../Assets/crossword.png");
font-family: Rockwell, "Courier New", Georgia, 'Times New Roman', serif;
}
/*This is just to get the main content of the page centered*/
#mainBody {
width: 80%;
margin: auto;
margin-top: 10px;
}
.navbar-custom.navbar-inverse {
background-color: transparent;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="mainBody">
<nav class="navbar navbar-inverse navbar-custom">
</nav>
</div>
For transparent background you need:
.navbar-custom {
background-color: transparent;
}
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
.category::before{
content: "◼";
margin-right: 0.5em;
}
</style>
</head>
<body>
<div class="category" style="color:red;">Category One</div>
</body>
</html>
Plunkr link: https://plnkr.co/edit/FUzEmrbN23ow6gyMAHCf?p=preview
content property not behaving consistently across the browsers.
How can I set the background-color of a paper-toolbar to --paper-teal-500?
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<style is="custom-style">
paper-toolbar {
background-color: paper-teal-500;
}
</style>
</head>
<body style="margin: 0;">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<paper-toolbar>
<div title>Tabara</div>
</paper-toolbar>
Well I managed to figure it out.
background-color: var(--paper-teal-500);
will do.
Hope it helps anyone in need!
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.