Under wwwroot in the css folder I have created a new css file with just the following class (i'm just trying to change the colour of the navbar for a particular area, not the whole site).
.navbar-inverse .recruiter {
background-color: #278e00;
border-color: #196700;
}
I've minified the file and I've also added the file to the budleconfig.json file:
{
"outputFileName": "wwwroot/css/recruiter.min.css",
"inputFiles": [
"wwwroot/css/recruiter.css"
]
}
in the _Layout file for the area that I want the navbar to override I have made a reference too the minified version as the last css file that is refernced and I've appended the recruiter class to my div tag. When I run the code the default bootstrap still seems to take precedence pressing F12 (Chrome) doesn't show my css file being referenced at all
Related
I've added angular material to my project and after creating a custom theme I wanted to change the style of .mat-fab.
_theme.scss:
#use '~#angular/material' as mat;
#include mat.core();
$wb-nightblue: ( ... );
$wb-yellow: ( ... );
$wb-primary: mat.define-palette($wb-nightblue);
$wb-accent: mat.define-palette($wb-yellow, 500, 300, 800);
$wb-warn: mat.define-palette(mat.$red-palette);
$wb-theme: mat.define-dark-theme((color: (primary: $wb-primary, accent: $wb-accent, warn: $wb-warn)));
#include mat.all-component-themes($wb-theme);
.mat-fab {
border-radius: 3px;
}
styles.scss:
/* You can add global styles to this file, and also import other style files */
#import '_theme';
The mat-fab button still doesn't show my custom border-radius, however. Taking a look at the page with the dev-tools I can see that my css-rule exists, but it is overwritten by the default material style. Apparently, angular material adds four <style>-tags to the end of the HTML header, just after my stylesheet gets added by angular, which then overwrite my added style.
...
<link rel="stylesheet" href="styles.css">
<style>/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJhcHAuY29tcG9uZW50LnNjc3MifQ== */</style>
<style>.mat-button .mat-button-focu...</style> // contains a lot of angular material button related styles.
<style>.mat-icon{background-repeat:...</style> // contains some angular material icon related styles.
<style>/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJtYXAuY29tcG9uZW50LnNjc3MifQ== */</style>
</head>
Now this construct makes it of course pretty much impossible for me to overwrite default button styles without resorting to !important. I don't know what the sourceMappingURL styles are doing but I guessed they're responsible for the other two tags being added. I've tried to look for them in my project but couldn't find anything. Google wasn't any help either. If I just remove the styles in the html via developer tools, the buttons then lack the proper material style so they are required, but I'd like to have my styles.css placed at the end of the HTML head, so I can overwrite the parts I want.
I've also checked angular.json for any style entries but the only one is my styles.css, which isn't any surprise, since I'd have other stylesheet links in there instead of the direct <style>-tags.
Is there a way to get my stylesheet to the end of the head?
UPDATE
The reason the below does not work has nothing to do with Angular, but with CSS.
.mat-fab {
border-radius: 3px;
}
Basically, CSS applies styles according to how specific they are.
If you want a style to be applied over another one, you need to be more specific about it.
You can read more on this here.
Now onto possible solutions, which are three:
The important!:
A way to make your styles always apply over another is the use of the important! attribute.
This means that your style will only be overwritten by another style with an important! that is more specific that yours.
Given that Angular Material avoids important! there is little change that this happens. The solution would then be:
.mat-fab {
border-radius: 3px !important;
}
Being more specific with material styles:
Lots of people see the use of important! has an indicator that the CSS was poorly written. An alternative to this is simply being more specific with material on what styles we want to overwrite, like so:
.mat-button-base.mat-fab {
border-radius: 3px;
}
In this case we are using Material's own class to specific that we want to apply our style not just to the mat-fab but to a html element that contains both mat-fab and mat-button-base.
The mat-button-base class is a class that all buttons from Angular Material share.
Define your own class and combine it:
Similar to the previous sugestion, instead of using angular material, you can create your own class and combine it with the mat-fab like so:
.border-3.mat-fab {
border-radius: 3px;
}
And in the html you would have:
<button mat-fab class="border-3">
<mat-icon><!-- Icon here --></mat-icon>
</button>
This approach is clearer if somethings you will use the original material style and sometimes your own styling.
Keep in mind that in all cases, the styles need to be defined in a global style sheet.
According to the Official Documentation if you want to override the style of material component, you should create a file with all your custom styles, them pass it to the styles array of your angular.json.
The above describes how to find it:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app-name": {
...
"architect": {
"build": {
"options": {
...
// Add the file here.
"styles": [
// By default, Angular adds the material theme you choose and the src/style.scss file, see below
"./node_modules/#angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
}
}
}
}
}
}
The file you are edditing is related to theming (color palettes and what not).
An example of this is the src/style.scss file. This file is created by default to allow you to create css that will be applied to all HTML Elements and components.
With the above in mind, I would advise that you add your code in the src/style.scss file like below:
/* You can add global styles to this file, and also import other style files */
.mat-fab {
border-radius: 3px;
}
Description:
I just copy and pasted login page from other module and redesigned it.
Let's say structure is like below now:
HTML
login.html
login_redesign.html
CSS
login.css
login_redesign.css
I am including both css file in some global file in sequence of login.css first and login_redesign.css second.
Senario:
I am working on login_redesign.css
Now, to avoid my changes overriding login.css component (as I am loading login_redesign.css at last), I added
class = "new_login_page"
at top level element of login_redesign.html
login_redesign.html:
<div class = "main new_login_page">
<div>....
</div>
login.html:
<div class = "main">... </div>
Also, added that class in my login_redesign.css file as:
.new_login_page.main {
.header {
width:320px;
}
}
While, original page has as below:
.main {
.header {
width:1020px;
}
}
My concern is as follow:
What if in future if someone add back-ground color property in original css file i.e. login.css as below:
.main {
.header {
width:320px;
}
.body {
.background-color:orange // this line was there for both the codes
.leftHalf {
background-color:white; // new line added
}
}
}
It will give white color to my file's (login_redesign.html's) leftHalf part as well, because there is no background-color property defined inside .leftHalf in lgoin_redesign.css file.
How can I prevent this changes to my file?
One more level of complexity: both login.html and login_redesign.html are using css from root level file 'common.css' which is loaded even before login.css
With this added dependency, I want to block changes from login.html but not from common.css
Thank you for reading though the whole question and the answer may be really simple for this question as I am really just reading through stackoverflow to get my task done on css, which I have not worked with much.
I have a project where I am trying to apply different CSS styles for different layouts (which I am detecting by the URL, basically we have two different domain names). In the webpack.config file, I have excluded the style sheet used for the 2nd layout as it was loading all the CSS and putting it all in a single file during the build (which overrides the body color set for layout 1 with layout 2). But after excluding that particular CSS file it was not adding the style sheet back when viewing the 2nd website. Its a react app, and I am using an if condition to apply the style:
index.js file:
if (window.location.hostname.includes("website2")) {
require("./assets/css/style1.css");
require("./assets/css/style2.css");
} else {
require("./assets/css/style1.css");
}
webpack.config
module: {
test: /\.css$/,
exclude: /\style2.css$/,
....
}
I am new to webpack, so I am not sure if I should exclude the CSS file in this manner.
Webpack is a development / build tools. It only compiles source files. So your code won't work in runtime.
You should set a root css class as namespace/theme in each css file, then just change class name in body tag.
// note: scss styles
.style1 {
// style theme 1
}
.style2 {
// style theme 2
}
if (window.location.hostname.includes("website2")) {
body.classList.add("style1");
body.classList.add("style2");
}
else{
body.classList.add("style1");
}
I'm working with materialize and I'm trying to not touch your code, so that I can just upgrade it when a new version arrives, but I want to change the primary color and I can't find an easy way to just switch the whole thing to say the blue palette.
I heard about sass but I don't know how to use it
This is my CSS and JS file how to reuse it
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.min.css">
<link rel="stylesheet" href="sass/materialize.scss">
<script src="js/bin/materialize.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
Using sass is very easy, install sass cli in your system
gem install sass
The base color you want to change was inside the below folder
materialize-src/sass/components/_color.scss
Do the required changes
just run the below code in terminal
sass materialize.scss materialize.css
RUN while you are inside the scss folder of the materialize-src
materialize-src/sass/
replace the newly created materialize.css file in your existing project.
You could even create a minified version of your new file by using https://cssminifier.com/ and save file with name materialize.min.css
Fore more reference on sass please look into the following link SASS Simple DOC
UPDATE - as per request
Give me the color codes as per your requirement by replacing the below i will generate your file by the same procedure i have explained above.
$teal: (
"base": #009688,
"lighten-5": #e0f2f1,
"lighten-4": #b2dfdb,
"lighten-3": #80cbc4,
"lighten-2": #4db6ac,
"lighten-1": #26a69a,
"darken-1": #00897b,
"darken-2": #00796b,
"darken-3": #00695c,
"darken-4": #004d40,
"accent-1": #a7ffeb,
"accent-2": #64ffda,
"accent-3": #1de9b6,
"accent-4": #00bfa5
);
Did you try to use like this by defining it in head tags
<style>
* {
background-color: yellow;
}
</style>
IF you use this universal styling it will applied on your whole page in same way you should use if you using paragraphs heading tags or some thing else just define your tags in this curly brackets with your own styles .
I am trying to make a global theme for a polymer app.
I've defined some variables inside a theme file like this.
#global-theme.html
<style is="custom-style">
:root {
--default-primary-color: #00BBD3;
--primary-background-color: #FFF;
}
:root paper-button.primary {
color: var(--primary-background-color);
background-color: var(--default-primary-color);
}
</style>
Then in another element I use a paper-button with the .primary class... but no .primary class style is applied.
<paper-button class="primary" id="search" on-click="onSearch">Search</paper-button>
If I just put paper-button.primary definition in a normal .css file then it works except that I obviously can't use the variables when it's not inside the polymer system which defeats the purpose.
This all works fine when in development but doesn't work when vulcanized for production
How do I define the global styles correctly so that any paper-button with .primary class has my custom styles applied from within the custom-style definition that also works when vulcanized?
----- update -----
I've looked into my vulcanized html file (that is built with the default yeoman/polymer starter kit gulp tasks) and replaced my custom styles that were flattened there with a link to the actual element like <link rel="import" href="../custom/my-polymer-theme/my-polymer-theme.html"> it works!!
Why would flattening/vulcanization cause this to happen when it's exactly the same code and how would I get around it?
---- FIXED ----
Problem was a boundary between a mixin & variable when vulcanized...
:root {
/* dark theme mixin */
--dark-theme-colors: {
color: #fff;
background-color: var(--secondary-text-color);
};
--dark-theme-secondary-text-color: var(--divider-color);
...
}
When this was flattened to vulcanized html file it doesn't work any more.
To fix it was as simple as closing off the :root bracket and opening a new one.