I have got a problem with Materialize Themes.
I tried to apply themes in various ways and it does not work.
I installed it by npm, added to angular cli.
I added theme to style in angular.json, imported to styles.css...
And it still does not work. - is not applying to elements:
My Cli console:
What have I done already?
In angular.json I added css files.
"styles": [
"./node_modules/#angular/material/prebuilt-themes/deeppurple-amber.css",
"./node_modules/#angular/material/prebuilt-themes/purple-green.css",
"src/styles.css"
]
In styles.css I added following import: #import "~#angular/material/prebuilt-themes/purple-green.css";
3 links added in index.html
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="lib/#angular/material/core/theming/prebuilt/deeppurple-amber.css">
put inside of your src/styles.css
#import '#angular/material/prebuilt-themes/deeppurple-amber.css';
Related
I'm currently working on an email template with thymeleaf in a jhipster application.
My problem is that i can't use bootstrap css in thymeleaf template.
I understand that thymeleaf is a server-side technology and cannot load bootstrap css that exists on client-side (via node_modules), but when i saw answers to these two questions question1 and question2 i tried by similarty to import my css like this
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/content/css/global.css|}" />
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/content/css/vendor.css|}" />
but thymleaf still can't load this two files, i have no errors on console but css classes (bootstrap and mine) are just ignored.
PS : global.css contains my css classes, and vendor.css is the default jhipster file that calls bootstrap
vendor.css
#import '~bootstrap/dist/css/bootstrap.min.css';
#import '~font-awesome/css/font-awesome.css';
My template is located under
/src/main/resources/mails/applicationReport.html
My css is located under
/src/main/webapp/content/css/vendor.css
/src/main/webapp/content/css/global.css
So how can i use css classes from global.css and vendor.css in thymleaf?
UPDATE
After Gaël Marziou's answser i added these two lines to /demain/webpack/webpack.common.js
{ from: './src/main/webapp/content/css/global.css', to: 'global.css' },
{ from: './src/main/webapp/content/css/vendor.css', to: 'vendor.css' },
and in /src/main/resources/mails/applicationReport.html i call these two files like that
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/global.css|}" />
<link rel="stylesheet" type="text/css" media="all" th:href="#{|${baseUrl}/vendor.css|}" />
but Thymleaf stills ignore my css classes
Your CSS files are bundled by webpack, so content/css/global.css does not exist in your built webapp and cannot be accessed by URL, check it by unzipping your war file.
However, you could have both bundled stylesheets and original css files in your war file by adding these files to the configuration of CopyWebpackPlugin see in webpack-common.js file.
I am using bootstrap-4 in my Vue webapp, But I am not able to customise this as is explained here.
I have my index.html which uses Bootstrap CDN, like following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Sample</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="/static/custom.scss" type="text/x-scss"> ==> where I am overwriting variable
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</head>
<body>
<div id="app"></div>
<script src="/dist/client-vendor-bundle.js"></script>
<script src="/dist/client-bundle.js"></script> -->
</body>
</html>
I also tried changing the order of custom.scss and bootstrap.css in index.html as well.
Following is custom.scss, where I am overwriting variables:
$body-bg: #f5f5f5;
$body-color: #f5f5f5;
$enable-flex: true;
But this is not working.
I also tried importing this in my app component, like following:
<style lang="scss">
#import 'custom.scss';
// Following also did not work
$body-bg: #333;
$body-color: #999;
</style>
How do I overwrite these variable to customise my webapp.
You can make this a lot cleaner by using the npm package and a webpack customisation.
If you first install bootstrap in your project:
npm install bootstrap#4.0.0-alpha.5
and make sure you can use sass-loader in your components:
npm install sass-loader node-sass --save-dev
now go to your webpack config file and add a sassLoader object with the following:
sassLoader: {
includePaths: [
path.resolve(projectRoot, 'node_modules/bootstrap/scss/'),
],
},
projectRoot should just point to where you can navigate to node_packages from, in my case this is: path.resolve(__dirname, '../')
Now you can use bootstrap directly in your .vue files and webpack will compile it for you when you add the following:
<style lang="scss">
#import "bootstrap";
</style>
To customise it I'd recommend pulling in the bootstrap _variables first and then you can reference everything like normal, i.e.
#import "_variables";
// example customisation - I'd recommend importing a file here to store them all
$body-bg: $gray-dark;
// just place all your customisation work above the below import of bootstrap
#import "bootstrap";
This will mean you need to remove any CDN CSS versions or they could overwrite things, but you should now be able to fully customise bootstrap.
As another benefit this method allows you to strip out any bootstrap components you are not using. To do so rather than #import "bootstrap"; which is the entire bootstrap library, instead navigate to that file, i.e. node_modules/bootstrap/scss/bootstrap.scss and then copy across the #import's you actually want. Essentially optimising your project...
I tried following approach which worked:
cloned the bootstrap repo
modified _custom.scss in this directory.
ran npm install
ran grunt dist as is in documentation
copied generated bootstrap css and js files from here in my index.html
so my index.html has following:
<link rel="stylesheet" href="/static/bootstrap.css" type="text/css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script href="/static/bootstrap.js"></script>
As of now, I don't think customising is possible when using CDN link of bootstrap.
For example: I changed this line in my www/lib/ionic/css/ionic.css file:
background-color: #f39200;
But always that I run ionic lib update this line change to an older version:
background-color: #11c1f3;
Why?
Your ionic.css file is being overwritten when the ionic.scss file is compiled. Your directory should look as such:
...
resources/
scss/
ionic.app.scss
www/
css/
style.css
lib/
css/
ionic.css
scss/
ionic.scss
...
All you need to do is edit such styles inside of style.css. ionic.css is compiled straight from ionic.scss and therefore is overwritten every time you save. If you want to use pure CSS only then make sure to write all of your styles inside style.css.
If you want to use SASS then write your styles inside scss/ionic.app.scss and run gulp sass.
The index.html that is built at the beginning explains this to some extent:
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
In the docs you can read the following:
Import Bootstrap into a Sass file (for example, application.css.scss) to get all of Bootstrap's styles, mixins and variables!
#import "bootstrap";
https://github.com/twbs/bootstrap-sass
I have several scss files. One for every major section of my app (user-page.scss, admin.scsss etc).
I tried making one application.scss and imported bootstrap as in the docs. I added the file in index.html after bootstrap.scss and before all my other scss files.
<link rel="stylesheet" href="bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap-compass.scss" />
<link rel="stylesheet" href="styles/application.css">
<link rel="stylesheet" href="styles/intro.css">
<link rel="stylesheet" href="styles/admmin.css">
I get the following error:
/usr/bin/scss --no-cache --update intro.scss:intro.css
error intro.scss (Line 22: Undefined mixin 'make-row'.)
So it seems it does not find bootstrap. It works if I import bootstrap in each file. Is this the right apporach? I think not. I get problem when I try to manually override a bootstrap variable.
How can I have several scss files and only import bootstrap once?
Think you're mixing SCSS import with HTML CSS links. So this bit here is wrong:
<link rel="stylesheet" href="bower_components/bootstrap-sass-official/assets/stylesheets/_bootstrap-compass.scss" />
<link rel="stylesheet" href="styles/application.css">
<link rel="stylesheet" href="styles/intro.css">
<link rel="stylesheet" href="styles/admmin.css">
I assume this is from your built HTML file. Your HTML does not know what an SCSS file is. Your SCSS must be processed into a CSS file before it is usable in your final HTML file.
The way to import an SCSS file is to use that import command inside the parent SCSS file at the top. So if your main SCSS file is application.scss, then at the top of that, you import your other SCSS files:
#import "bootstrap";
But you need to make sure that the _bootstrap.scss file is in the same directory as your application.scss file for this import to work.
what can I do that "bootstrap/less/bootstrap.less" is not overwriting all my css -styles (I could only use the .less files I only needed(e.g.: bootstrap/less/buttons.less ), but I need all classes).
When I import "bootstrap/less/bootstrap.less" it's going to overwrite my bootstrap menu and all standard selectors like input, textarea ..., but I want only to overwrite the css classes i want, but not everything ...
thanks :)
[UPDATED: 09-04-2014]
Background information for my project:
Important NuGet Pakages:
Bootstrap (v 3.0.0 ) -> imported in the master page
Bootstrap.Less (v 2.3.2 ) ->these files I use for impor in
"Site.less")
dotless (v 1.4.0.0)
html5shiv (v 0.1.0.8)
Modernizr (v 2.6.2) -> imported in the master page
Respond JS (v 1.2.0)
Visual Studio 2013
MVC5
my "Site.less" looks like
/*#import "bootstrap/less/buttons.less";*/
#import "bootstrap/less/bootstrap.less";
.BWButton {
.btn;
}
Its a little bit strange when I only import "bootstrap/less/bootstrap.less" everthing is going to be overwritten, it doesn't matter which order of the css/less import I have made in the master page and when I use only "#import "bootstrap/less/buttons.less"" no effect is on the page not even if I remove all css/less imports in the master page...But intelli sense works on both imports("bootstrap/less/buttons.less" and "bootstrap/less/bootstrap.less") (when imported inside the site.less), but on the client site Site.less(when i import "bootstrap/less/buttons.less" before in site.less ) is empty(when I select "Site.less" in fire bug)..
my master.page(Shared/_Layout.cshtml) looks in the header like this:
#Scripts.Render("~/bundles/modernizr")
#Styles.Render("~/Content/dataTable.css")
#Styles.Render("~/Content/popup.css")
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
#Styles.Render("~/Content/Site.less")
#Styles.Render("~/Content/bootstrap.css")
#Styles.Render("~/Content/site.css")
the output on the client side:
<script src="/speScripts/modernizr-2.6.2.js">
<link rel="stylesheet" href="/Content/dataTable.css">
<link rel="stylesheet" href="/Content/popup.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="/Content/Site.less">
<link rel="stylesheet" href="/Content/bootstrap.css">
<link rel="stylesheet" href="/Content/site.css">
May be this helps you a little bit more :)
In your html , make sure you include your own stylesheet at last !
<head>
<link href="includes/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="includes/css/style.css" rel="stylesheet">
</head>
In my example above, my custom stylesheet will overrule the bootstrap.min.css sheet.