I have a few dom-modules all of which share some style lines in their style sections. So, I want to store those lines in the style section into another file and load in into my other elements. Any comment will be appreciated.
I know there is a style section in the polymer website, but it's too difficult to those without css background.
Thank you in advance.
I think this is what you're looking for
example-style.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<!-- shared styles for all elements and index.html -->
<dom-module id="example-style"> <!-- -->
<template>
<style>
<!-- insert styles here -->
</style>
</template>
</dom-module>
web-component-name.html
Add this line inside your custom webcomponent's template
<style include="example-style"></style>
Related
I write a website with Vue.js and to handle user interface, I want to use Vue Formulate. All in all it works, but I have trouble to style input errors. So, I tried to make a very simple example to change the background color from the error list, but it doesn't work.
That is my easy component:
<template>
<div>
<p>Test for VueFormulate</p>
<FormulateInput
type="text"
validation="required"
/>
</div>
</template>
<script>
export default {
name: 'HelloWorld'
}
</script>
<style scoped>
li.formulate-input-error {
background-color:green;
}
</style>
After the site is loaded and the error list element is there, I can change the background-color in the Google Chrome devtools. But not bevor.
I hope somebody can explain what I have to do to make it work.
Your style block is scoped meaning you cannot style elements that are not in your immediate <template> (that's the point of scoping). You have three options:
Remove the scoped portion of your <style> block. I don't really recommend this.
Move your general form styles to a global css file. I would recommend this if you use more than 1 input.
Use a deep selector like ::v-deep. This is great for case-by-case overrides, and allows you to select elements that are deeper than your current "scope". Here's an example:
<style scoped>
.formulate-input::v-deep li.formulate-input-error {
background-color: green;
}
</style>
i'm new at nodejs and i'm working on this project, and still learning to render ejs templates ,
So guys i have this template i had downloaded to work on my nodejs project with
"https://github.com/puikinsh/gentelella"
i put my template folders and files in the views folder then in my route i called index.ejs(have changed the type of the file from index.html to index.ejs) then i tested
the result was that my template was working but no css it was plain text and links , no images no style.
so i'v guessed that it's not loading the bootstrap nor the custom css
can you help me and tell me more on the simplest ways to render and how to solve this problem?
Most of the stylesheets of this template are in the vendor folder, you have to copy that folder in your views folder as well.
<!-- Bootstrap -->
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
<!-- iCheck -->
<link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
<!-- bootstrap-progressbar -->
<link href="../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
<!-- JQVMap -->
<link href="../vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
<!-- bootstrap-daterangepicker -->
<link href="../vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="../build/css/custom.min.css" rel="stylesheet">
And make sure that href are pointing in the right folder.Also at the end of the index file there are also js files which point to the vendor folder, make sure to check those as well.
When using HTML5, do you have to have a main element when creating a web page and if so, what is the maximum amount you can use?
The correct answer is the 'C'
look at:
http://www.w3schools.com/tags/tag_main.asp
I believe it is expected that the main element serve as diversionary element, like the header, nav, and footer. So I think it should really only be used once per page. Using markup similar to this.
<html>
<head>
</head>
<body>
<header>
<!-- Page Title -->
</header>
<nav>
<!-- Primary Menu -->
</nav>
<main>
<!-- Primary Content -->
</main>
<footer>
<!-- Stuff at the Bottom -->
</footer>
</body>
</html>
I recently developed a website that looks good on 1024 resolution but gets messed up on larger resolutions. Here are the links to the files you will probably need to review: CSS for the site, CSS for the menu bar. It's a PHP file but I've already linked to the included HTML files.
I have a regular 17' screen while the client has a widescreen. She sees white space on the right side that I don't. I've only seen it as I have used the website viewlike.us to test on different resolutions. How can I make it so it resizes proportionality? Thanks.
This is because you set the body to be 1024 px
body {
width:1024px;
background-image:url(images/top_background.jpg);
background-repeat:no-repeat;
background-color:#FFF;
}
You don't want to do that, what you usually do is to have a page wrapper where you set the size to be 1024px.
For instance you can have this in html
<html>
<head>...</head>
<body>
<div id="pageWrapper">
<!-- all your content here -->
</div>
</body>
</html>
Then in the css you can have something like this:
#pageWrapper {
width:1024px;
margin: 0 auto;
}
You usually have an structure like this:
<html>
<head>...</head>
<body>
<div id="header-wrapper>
<div id="header>
<!-- header content here -->
</div>
</div>
<div id="pageWrapper">
<!-- all your content here -->
</div>
</body>
</html>
Then you can set an image for the header and another for the body, or an image for the header and a background color for the body. It all depends on what are you doing.
The background images usually are not that big. What you usually have are images or patterns that can be repeated either on X or Y or both. On the css you can have something like:
#headerWrapper {
width:100%;
height: 100px;
background: url("/img/background.png") repeat-x;
}
With this the image will repeat horizontally on the header. Then you can set another background for the body, or just a background color.
Again, it depends a lot on what are you trying to achive.
Good luck!!
I want the 2 columns to touch ie. remove the margins, how can I do this?
My code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>testing</TITLE>
<!-- css -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">
<!-- js -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.5.2/build/utilities/utilities.js"></script>
<style>
.yui-b {
background-color: #eeeeee;
}
</style>
</HEAD>
<BODY>
<div id="doc3" class="yui-t1"> <!-- change class to change preset -->
<div id="hd">header</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
bd.main
</div>
</div>
<div class="yui-b">bd.other</div>
</div>
<div id="ft">footer</div>
</div>
</BODY>
</HTML>
Add a class to the right column and set margin-left to 0.
If that doesn't work you might have to increase the width by 1 or 2%. You can use firebug to check the applied styles and change them on the fly.
Notice that you're using YUI (Yahoo UI).
Look for the YUI reset.css. Every browser has potentially different margin, padding, font-size defaults. You should really start every web app with a reset.css file like that to bring everything to a common denominator. Otherwise you might find you "fix" the issue, only for it to appear again when viewed from another machine / platform.
Should hopefully start you off with all block elements having no margins or padding and then you can rather add margins and padding back in where you need it.
Notice that you're using YUI (Yahoo UI).