I'd like to be able to put all of my paths in one file ("property file"), so whenever I refernce them , the provided functionality should imiplement:
some_file.css
#facebook_link {
background:url(../refereced_file/$facebook_link_url); // ?
background-repeat:no-repeat;
width: 12px;;
height: 23px;
}
refereced_file
$facebook_link_url : ../images/old/facebook.png
I'm aware, as a server-side developer (mostly), that the mechanism of the processing of the browser is different from a compiler, and yet, I want to be able to achieve the property file functionality ( "propObject.getProperty(key)").
I'm not using Saas or SCSS, nor CSS variables.
Thought of making another CSS file with an element and referencing to it, but have no idea how to.
I think the only way is either to use SAAS/SCSS or parsing the css file on your server and look for any variables which need to be replaced with a value from your property.
Related
I'm trying to create a Blazor component that I keep in a separate DLL.
Easy stuff: just a div with an image.
The image is being kept in the formentioned separate DLL, in a folder structure that looks something like wwwroot\ComponentName\logo.png.
Then in the ComponentName.razor.css file I try to call it:
.logo {
background-image: url('../wwwroot/ComponentName/logo.png');
width: 200px;
height: 200px;
}
My problem is... it doesn't render when I use in the Blazor WASM website.
I believe I'm doing one thing wrong.
Either I'm using the wrong URL.
Or the image file has wrongly configured properties. And I'm not entirely sure what to pick here. I already tried with Build Action Content and Copy Always as I have with Resource. Not really sure, how the image should be treated.
Please advise.
Comment to the accepted answer
Although Neil's answer which can be found here was on point it wasn't enough.
First of all: both build actions appear to be working: Content and Embedded Resource alike. So it was not the case.
What I noticed is that when I actually put the image as an image:
<img src="./_content/ComponentLibraryName/ComponentName/logo.png" />
It actually works. What is different?
What Neil pointed out: _content folder, not wwwroot. What I consider unclear in the linked documentation was the correct folder structure, and that means I had to first provide the Component Library Name, then repeat the folder structure, then provide the file name.
So I went back to the CSS version, just to check if it still works.
.logo {
background-image: url("./_content/ComponentLibraryName/ComponentName/logo.png");
width: 147px;
height: 80px;
}
Did not work. When debugging it from DevTools level I noticed that the CSS link to the image file actually pointed to https://localhost:7210/_content/ComponentLibraryName/_content/ComponentLibraryName/ComponentName/logo.png. When I removed the doubling string...
.logo {
background-image: url("./ComponentName/logo.png");
width: 147px;
height: 80px;
}
It actually worked.
I did not want to write this explanation as an answer to accept it, mostly because the only thing that changed was what was in Neil's answer anyway. I do not clearly understand anything more than this.
I think you'll need to use "_content".
Specifically, if your image is in the wwwroot folder of a dll (razor class library) called MyComponent, then I believe you'll need to reference such static files using:
background-image: url("./_content/MyComponent/logo.png");
See MS Doc
I am using variables in CSS/SCSS. I want to set a background (using an SVG file), but it is re-loading every time I navigate or perform some other action.
My -Variables.scss file:
:root {
--backgroundTheme: url('triangle-dark.svg') no-repeat;
}
$variables: (
--backgroundTheme: var(--backgroundTheme)
);
My styles.scss file:
#import "~assets/_variable";
body:before {
background-size: cover;
background: var(--backgroundTheme);
}
How can I avoid multiple times loading of this file?
PS: This is an Angular 8 project.
I had the same problem recently. It was caused by the inspector - "Disable cache" was enabled:
You just need to uncheck it and it will stop making new requests.
To use the image multiple times in the DOM with only one request from the CSS you should use the content property of your pseudo element target to render the image:
body::before {
content: var(--backgroundTheme, 'alt text');
}
Although you'll probably need another approach in handling the image. It might not work for you.
I have two possible idea, not sure if they works for you but it's an easy check:
If you can, don't use css variables, use scss instead. My general approach is to have a settings.scss file and import it whenever needed in the other files. It's a personal preference, I find it easier to manage like that.
It could as well be something wrong in the backend, are the caching headers set right? You can check that in Chrome itself, by clicking on tringle-dark.svg, Headers tab, then Response Headers.
I'm still learning the variable scopes and rendering order of AEM. I have this trivial problem where I would like to take an integer input from my dialog box, and set that value as the padding of a specified class.
padding/padding.html:
<div class="my-padding">Pad me up!</div>
padding/clientlibs/padding.less
.my-padding {
padding-top: ${properties.top}px;
padding-right: ${properties.right}px;
padding-bottom: ${properties.bottom}px;
padding-left: ${properties.left}px;
}
The WCMUse properties for the component are outside less' scope, but I don't know the best-practice to accomplish this would be.
I've tried directly injecting Javascript into less, but this doesn't compile correctly and just transforms the function into a string.
padding-2.less
.my-padding-2{
padding: `function(){return 10;}` px;
}
compiles to this:
client-libs.css
...
.my-padding-2{
padding: function(){return 10;} px;
}
...
As such there is no direct way of passing attributes/variables to CSS, you could use JQUERY to do this, that said I am not sure why would you want to give authors flexibility to change the design of a component. Its neither their role to do it nor how an AEM component should be implemented.
Each component adheres to a design, in case you are looking for a way to support different designs for a same component there are other ways to do it all of which will require you to have different CSS classes for each configurations. Once you have done that you can provide authors a predefined choice of design of the component to pick from. This can be done in two ways -
Like RichText components allows for style classes to be applied, you can provide same behavior to author by providing a drop down for different styles that are supported for the component.
You could use concept of choosing a design via providing options for the view (as it happens in the OOTB List component). Each option maps to a component script that have implementation for a specific design.
I want to set up some basic color codes in my css file.
My css looks as below:
#colorGood: #32CD32;
#colorOk: #FFA500;
#colorBad: #FF4500;
.testClass{
width: 80%;
background: #colorGood;
}
My XML has a button control as below:
<Button id="testBtn" class="testClass" />
I create the above view and css in the web-ide. When I run it, it does not show take the color mentioned in the variable.
Is it possible to have variables in CSS [since the SAPUI5 library already contains less pre-processor].
Is this the correct way to implement this in webide?
Also any example to acheive this through the eclipse/HANA Studio IDE would be really helpful
Once I had to use my own CSS file and one thing was obligatory: to include the custom CSS. Not sure if it is the best practice thing; at least worked for me: in my Component init code I added the following:
jQuery.sap.includeStyleSheet({
url: jQuery.sap.getResourcePath("<full path to the CSS file>"),
id: "custom_style"
});
where includes also your name space. Say your name space is com.foo.project and the css file with name mystyle.css is stored in css project folder, then you full path would be:
"com/foo/project/css/mystyle.css".
I need to include the file
"#{request.domain.split(".").first}.css.scss"
into my custom.css.scss file.
I don't know how to proceed. The goal is to declare specific variable, and give them different values in each file, loading dynamically different files for each different request
file one.css.scss
$button_primary_color: #xxx;
$header_background_color: blue;
file two.css.scss
$button_primary_color: #zzz;
$header_background_color: red;
I also tried using CSS3 variables, without success:
home[sn="one"] {
--button_primary_color: #xxx;
}
home[sn="two"] {
--button_primary_color: #yyy;
}
(it doesn't behave standard in the different browser), and also it doesn't substitute the following statement.
div {
color: var(--button_primary_color);
}
I'd like to have a more bootstrap/sass solution. How can I accomplish this?
I'm still trying to figure out a best method, but one thing I've done in the past is to set the config.assets.precompile to effectively have domain specific css files and then have your layout generate the appropriate code to pull in that specific css file.
config.assets.precompile += %w( application.js application.css domain1.css domain2.css)
where you have in your asset pipeline
domain1.css pulling in whatever domain specific code you need.
much cleaner than trying to include logic switches within the css code (which you cannot do btw afaik).