I just started to work with CSS and espacialy Sass. What I tryed to do for the last hour was to set a background image from my source folder from my scss. file.
I tryed several ways of accesing my directory. But not a single one worked.
My IDE (IntelliJ IDEA) always tells me that it can not resolve the directory.
I tried:
background-image:url('${resource(dir: "images", file: "bg.png")}');
background-image:url(../images/bg.png);
background-image:url('../images/bg.png');
background-image:url(../images:bg.png);
background-image:url('../images:bg.png');
And also as refered in this topic How to refernce JSF image:
background-image: url("#{resource['images/bg.png']}");
I hope one of you can provide me with a solution.
EDIT
this line gives no error in the .scss file:
background-image:url("/resources/images/bg.png");
but it precompiles wrong in the .css file because the directory can not be resolved anymore.
EDIT
the code that does not get marked as problem in either .scss or .css is:
background-image:url("../../../src/resources/images/bg.png");
But it still does not work my background remains white.
I've found the solution.
The problem was, that I tryed to access my java resources folder.
But I had to access a child of the webapp folder. As the .WAR is build from that context. That means this was the solution.
background-image:url("./images/bg.gif");
while my images folder is a child of my webapp folder.
Related
I have been searching all over for information on where django-cms is storing the CSS and SCSS data for my site, which I am working on localhost. When I go to edit the CSS file directly, it has no effect, so I'm wondering what needs to be done to edit those CSS files. Obviously they have been loaded somewhere. How can they be reloaded, or in general what is the best practice for editing the CSS files?
Apparently I had to do this with both the style.scss and style.css files, which seem to have the same css classes. But even after editing both files, I had to refresh the site on my localhost a few times before I could see the changes. Frustrating, but it does work to edit the files directly in the static folder.
#Lawrence DeSouza At first you should mention which plugins and style frameworks you use.
If you are using some sort of a frontend framework like Bootstrap 4 your should compile its css from scss separately. You can do it right on the dev server in a separate directory outside your project dir and cloned from the official repository. Normally you would only need to change variables in "/bootstrap-4.x.y/scss/_variables.scss" file. On the next step you would compile your *.css files with "npm run dist" command and then copy compiled files from "/bootstrap-4.x.y/dist" directory to your "/projectname/appname/static/css" directory. The process is well-documented here. After copying changed files to your "static" folder you should run "python manage.py collectstatic" and refresh the page. If it's not working after refreshing the page in a browser (normally it should work) - restart the server. I am a bit biased towards Bootstrap, but the logic should be the same in your case.
So I'm working on a web project and I started with an HTML/CSS template created by someone else. It appears to use bootstrap which I don't know much about.
Upon using chrome developer tools I noticed that some of the css styles being applied were coming from scss files which I can not find on my system. I'm wondering where do these files exist?
The screenshots are from
Chrome dev tools that tells me the path to the scss file that is applying styles
That same path on my system where the scss folder was stated to be does not appear to exist. Notice that I'm in the "vendor" folder but there is no scss folder as dev tools shows there to be.
Can someone explain to me where the browser is loading these scss files from? I've tried having Windows display hidden files and folders and that doesn't make a difference. Thanks!
Path to scss file via Chrome Dev Tools:
That same path on my file system
It happened because of scss sourcemap. It generated when compile scss file to CSS, for easy debugging.
I assume you are using development version of bootstrap. If you using production version it's not happen.
You can find more information about this here
There may be files with .map extension (called as the source map in scss world) in your project path. These .map files refer to the path of the .scss files that were used during development to create .css files. So, even though there are no physical .scss files present in your context path; and your html file refers to the compiled .css file, Chrome debugger would still show the original .scss file from which the .css got compiled. If you require the Chrome debugger to show the actual .css file name, then you could delete the .map file temporarily. This suggestion is considering you would like to see the .css file name instead of the non-existent .scss files. You could also check this link to understand more about working with .scss files in Chrome debugger : https://www.sitepoint.com/using-source-maps-debug-sass-chrome/
I have a folder structure like in the following picture. The less node.js I would compile with. I am calling the compiled CSS file in the meta-tag section.
When a change is made in the less file, the CSS file is automatically loaded on to the server I want to be.
Summary : If style.less changes in style.css to upload to the server.
Thanks for your help.
I solved the problem. Tools->Deployment->Options -> Upload external changes chose.
My less style sheets are located in my /public folder for now. I'm trying implement them on my meteor app but to no avail.
This is the error I get:
The stylesheets are located in the /less folder, which is inside the public folder, so the URL should be correct. By the way, all those files that are in the screenshot above are files that import dozens of other variables located deeper in the folder.
I also checked and I have the latest version of less installed. Any help would be appreciated.
The public folder isn't the right place to store the files. Files stored in a “public” folder are served to visitors. These are files like images, favicons, and the “robots.txt” file. So they get served 'as-is', not processed by LESS and served as CSS.
More about Meteor folder conventions.
After discussion in the comments, it seems something is not working right in your less compiler, the less file should not be in the public folder, as already mentioned, and you should not need to include it with a script tag. You can follow these steps to create a new app and test less and see if you can find a difference between this and your current app.
Create a new meteor project
meteor create test
Add less
cd test
meteor add less
Start your server
meteor
add a file sytles.less to the top level folder with this...
.fun {
color: red;
}
Update the test.html file to add the fun class to the text output...
<div class="fun"><p>You've pressed the button {{counter}} times.</p></div>
Load the page, the text should pick up the class and become red. No link to the styles.less file needed. You can try moving it around to different folders, it worked fine from client for me as well. Look around and see what else might be different.
If you still have issues, try providing more information on how the project is set up.
I'm having trouble making my CSS external stylesheet work in my actual hosting. It all works fine when I open the files from my Finder (I'm using a mac), but the stylesheet does not seem to load to my server properly. All other html files load fine and are visible when you visit my website in any browser,this is my website and the File Manager on my cPanel indicates that the CSS folder and external stylesheet file have been successfully uploaded for enough time that the style features should display. I tried clearing my browsing history and reopening my browser.
My link tag is and I have tried it using aswell as with just "css/socialpolarities.css". I've checked to make sure the spelling is right on the path and corresponds to the actual file.
Is the answer to just put all the style files in the public_html folder and then just change the path on all my html files? Or am I missing something?
I'm also using LiquidWeb if that means anything
The file css/socialpolarities.css seems to exist, but is void of content.
try looking at your local file to make sure it is indeed the one with the css code, then upload it to the same folder and override the original one.
You may have had an upload error.
I got it! The problem was actually that I needed to put the css file in the home directory, for some strange reason. My path from my html files definitely specified that the css files were in a css directory so I'm not sure if it's something I did wrong or whether the cPanel just sucks. Regardless, it works so I won't mess with it. Now time to copy all of my webfont files into my home directory...this is going to be messy lol.
Check your permission. They should be 755. You can search about permissions on internet. I changed the permissions and it worked fine.