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.
Related
I have Asp.net Core 5.0.1 app with multiple MVC views. I also have a CSS file, generated by an app. I want this file to be unmodified (as it will be changed in future using same app). I want separate CSS file, which styles certain elements (eg input or button) to be styled using classes from the generated CSS. I dont want to write class on each input or button etc element (there are 35 views needs to be styled).
For example if generated file has class dx-theme-text-color I want a CSS file which has something like input { color:.dx-theme-text-color}
How can I achieve this?
To clarify: the question is - how to use a class from one CSS in another by name not copy/pasting values etc
I can only think of #extend from SASS:
.dx-theme-text-color {
border: 1px solid red;
}
input, button {
#extend .dx-theme-text-color;
}
You can use css variables.
define css variavles in global scope:
:root {
--my-custom-color: #000;
}
use variables in every css file like this:
.my-element {
color: var(--my-costum-color)
}
You can also use css pre-proccesors like sass(scss), less and etc.
For some reason my Angular app doesn't use the styles I'm defining at my component's .less file. It simply ignore it.
As I am very newbie with CSS, I don't any way to debug it.
My layout is consisted by a lot of defined styles being imported by other less files. I am using trying to modify the style of a mapboxgl.
This is how the map current looks like:
And it's defined on HTML by:
<div eds-tile class="column xl-3">
<eds-tile-title>Location</eds-tile-title>
<eds-tile-actions>
<div class="action">
<eds-icon icon="maximize">
</eds-icon>
</div>
</eds-tile-actions>
<div class="map" id="map"></div>
</div>
On this component's less I have:
#import "~#eds/vanilla/variables/light";
#import (reference) "~#eds/vanilla/font/styles";
#import (reference, multiple) "~#eds/vanilla/variables/global";
#import "./map/map";
And on ./map/map.less I have a lot of theme stylization:
https://pastebin.com/b8CpakH9
My trouble is that there's some classes that are indeed being used by Angular, like this one:
.map {
min-height: 200px;
width: 100%;
height: 100%;
a {
color: #text;
}
}
But others are not, like this (you can see on image below that there's nothing related by that definition on browser's styles inspection):
.mapboxgl-ctrl-bottom-left {
display: none !important;
}
What is happening on my case?
I'm following another example that it's working fine. On the component.less file it uses:
#import (reference) "~#eds/vanilla/font/styles";
.dark {
#import "~#eds/vanilla/variables/dark";
#import (multiple) "./map/map";
}
.light {
#import "~#eds/vanilla/variables/light";
#import (multiple) "./map/map";
}
And the map.less file is the same except the by the min-height value.
The example:
You can clearly see that on this example it's using ".light .map {}" to set the style. Different that my case, that converts to ".map[_ng-content-c5] {}" for some reason. I don't have any clue of what this means.
Sorry by being so vague about the problem description. It's simply because I'm don't have enough experience even to name it.
I think I know what the problem is.
If you open your generated css file you see that there is no .mapboxgl-ctrl-bottom-left {
You will instead see something like: .mapboxgl-ctrl-bottom-left[_ngcontent...] {
That's how angular works, it adds some attributes to ensure a style only applies to one component.
You can control if styles are encapsulated or not with ViewEncapsulation
Most likely this happens because the content (in this case the map) is getting rendered with JS after the DOM is loaded and is not handled by angular itself, therefore it doesn't get the attributes.
Without any more information I can't help you any further since I don't know all the details. I don't know exactly which map you are using, maybe there is a tutorial on how to integrate it with angular somehow.
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");
}
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
I am creating a small personal project mainly with HTML and CSS, but I am new in this and have some problems. I want to use the W3.CSS framework but I don't want to explicitly use it in the html files (like <div class="w3-container">...) because I might want to use something else later and don't want to refactor every file. Googling I learned about less mixins I had the idea of using my own style.less file and from there import w3.css and inherit, for example, .w3-container class for header tags, which I believe cannot be done with only CSS. Anyway, what I am trying to do is:
#import "w3.css";
header {
.w3-container;
}
Both files, "style.less" and "w3.css", are on the same folder and I use the following command to try and compile it:
lessc style.less style.css
Which outputs the error:
NameError: .w3-container is undefined in <path to style.css> on line 3, column 2
I am probably not using less how it's supposed to be. I looked at other questions, for example this one but couldn't do it. I also noticed that my node.js and npm were really outdated: node: v0.12.4, latest: v5.11.0 npm: 2.10.1, latest: 3.8.7 but that wasn't it.
Why doesn't it work?
What other way can I avoid explicitly using classes such as "w3-container"?
Thanks.
Question part 1
With regards to the error:
NameError: .w3-container is undefined in on line 3, column 2
You've used .w3-container as a mixin, but the mixin hasn't been defined. You'd need to define the mixin like so:
#import "w3.css";
.w3-container() {
/*Styles to apply to the mixin would go here*/
}
header {
.w3-container;
}
However it doesn't sound like using a mixin was actually your goal.
Question part 2
With regards to your comment:
What other way can I avoid explicitly using classes such as "w3-container"
LESS compiles down to CSS, so there's no magic that LESS can provide in terms of selectors (such as aliasing W3.css), other than providing some extended functionality to reduce repetition and make your code more maintainable. If you don't want to add new CSS classes, your options are limited to using valid CSS selectors using a higher specificity. The example below is based on path. If w3.css contains:
header {
color: blue;
}
Then to target a header in a section you could use the more specific selector (in LESS):
section {
header {
color: orange;
}
}
This will compile to the CSS:
section header {
color: orange;
}
Question part 3
When you're trying to target an instance of an element of a particular class, it is important to prefix the class with & and include brackets for defining the properties to style like so:
header {
&.w3-container {
color: orange;
}
}
This will compile to the following CSS:
header.w3-container { color: orange; }
If you use .w3-container; by itself, LESS will assume you want to use a mixin here, and will throw the error from Question part 1 since there is no mixin defined with the name .w3-container.
#import (less) "w3.css";
header {
.w3-container;
}