I have imported some css files in my component.
<template>
<link type="text/css" rel="stylesheet" media="screen" href="https://cdnglobal.immowelt.org/global-assets/4.0.0/fonts/fontello.css">
<link type="text/css" rel="stylesheet" media="screen" href="https://cdnglobal.immowelt.org/global-assets/4.0.0/legacy/0/base.css">
...
<template>
The thing is I want this styles to apply on this component.
They affects on other parent and sibling templates.
Is it possible to enable this to be applied on one template's elements?
If you are writing .vue single file components you can use this:
<style scoped src="./something.css">
</style>
you can try to import your CSS in component with
<style scoped>
#import url("https://cdnglobal.immowelt.org/global-assets/4.0.0/legacy/0/base.css")
#import url("https://cdnglobal.immowelt.org/global-assets/4.0.0/fonts/fontello.css")
...your CSS...
</style>
I use Fontello too with Vuejs, are you trying to use your own icons?
Related
In order to style a next js app, do I really have to import styles from "./stylesheet.css" and add class with className={styles.aClassName}?
if so, what if I want to style an element by Id or TagName?
Is there a way to style like a normal react app? ie. import "./stylesheet.css" & className="aClassName".
You can add global stylesheet.
You can also place your stylesheet.css in the public folder and refer to it from any component.
<Head>
<link href="/stylesheet.css" rel="stylesheet" type="text/css" />
</Head>
Then you can use the className="stylename" format anywhere in your component.
have several css's in my HTML5, each css is for a different thing, such as a css for a button type, a css for a specific effect ...
What should I do to "pack" all these css's?
Example:
<link rel="stylesheet" href="/css/fonts/_font-icons.css">
<link rel="stylesheet" href="/css/fonts/_font-trebuchet.css">
<link rel="stylesheet" href="/css/fonts/_font-verdana.css">
<link rel="stylesheet" href="/css/utilities/_colors.css">
<link rel="stylesheet" href="/css/utilities/buttons/shapes/_circle.css">
<link rel="stylesheet" href="/css/utilities/buttons/types/_switch-indicator.css">
<link rel="stylesheet" href="/css/utilities/_sizing.css">
<link rel="stylesheet" href="/css/components/partials/cards/charts/main/_main.css">
<link rel="stylesheet" href="/css/components/partials/cards/charts/secondary/_sales.css">
<link rel="stylesheet" href="/css/effects/_no-select.css">
You won't improve the load time, but if you just don't want to have so many link tags, you can link only one css file and use #import to import the other files.
main.css (place inside /css/)
#import 'fonts/_font-icons.css';
#import 'fonts/_font-verdana.css';
#import 'fonts/_font-trebuchet.css';
#import 'utilities/_colors.css';
#import 'utilities/buttons/shapes/_circle.css';
#import 'utilities/buttons/types/_switch-indicator.css';
#import 'utilities/_sizing.css';
#import 'components/partials/cards/charts/main/_main.css';
#import 'components/partials/cards/charts/secondary/_sales.css';
#import 'effects/_no-select.css';
And then in the html file:
<link rel="stylesheet" href="/css/main.css">
If possible, I would recommend using sass, and compiling all of those files into one.
How do you override a BootStrap CSS file? I have created another file called site.css and linked it to the index.html file; however, this still does not allow me to override. Is this not a correct action?
If you want to override the bootstrap CSS so you can try this trick.
put your bootstrap css and site.css in head section like below example
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="site.css">
now site.css will be override to bootstrap.css :)
Proper way to override bootstrap is to create your own style class.
<div class="bootstrapclass yourownoverrideclass"></div>
in your css
.bootstrapclass.yourownoverrideclass {
margin: 5px; //override content
}
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?
Bootstrap includes some (very nice) styling for HTML inputs/selects/etc. However, for the project I'm on, they already have styling for these HTML elements that they want to keep.
Is there a way for me to turn off Bootstrap styles for inputs? Perhaps with some kind of css class? Or, do I have to override them manually?
The order of inclusion of the stylesheets can help you.The inclusion of bootstrap.css followed by your own stylesheets makes elements in your stylesheet to override those in bootstrap.
For example,
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<script src="/static/jquery.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<link type=text/css rel='stylesheet' href=/static/main.css><!-- custom stylesheet -->
For eg,
If the main.css contains
body
{
background-color:red;
}
And bootstrapp.css contains
body
{
background-color:blue;
}
The site will be with a red background.