I change a CSS file, run collectstatic but nothing happens - the app keeps the previous styling, even though that CSS no longer exists anywhere in my files. I got frustrated and gave up yesterday, and found that this morning it had updated, but the initial problem persists. Has anyone else experienced this? Is it just an issue with pythonanywhere or might there be a problem in my code?
Method 1 Each time you edit your CSS file you need to either hard reset it with Shift + F5
Method 2 You have the possibility to edit the file in the index page (or wherever you load in the file in. After the .css you need to enter a query like ?q=...
So like this:
OLD FILE: <link href="/css/TestFile.css" rel="stylesheet">
After editing it to refresh the cache: <link href="/css/TestFile.css?v=1" rel="stylesheet"> v standing for version, you can use any character.
Method 3 To disable caching you'll have to look into your web.config file. There might be something similar like this:
<location path="css">
<system.webServer>
<staticContent>
<clientCache cacheControlMode="UseMaxAge" cacheControlCustom="public" cacheControlMaxAge="7.00:00:00" />
</staticContent>
</system.webServer>
Remove that and it stops caching. You might also have to look into the IIS settings but I don't know about that, read more here
Edit: Added the method text. If you have a live website with customers I would recommend using Method 2. Having caching enabled increases your website speed as they do not need to load the css, javascript, media etc etc files every time they visit your page. Only once in a while.
Related
Something is wrong. When I open my site using localhost then everything is fine. What can be wrong here?
And when I click assets/css/style.css I got error like this:
When ew check Network tab, and click on style.css sotmething weird happens because html file is previewed:
As myself and Quentin mentioned in the comments, it is generally good practice (and the intended effect for most situations) to use /assets/path/to/resource instead of the relative path assets/path/to/resource.
Unless it is intended to leave out that slash (which it isn't in your case, as you said in the comments), you'll need to prefix all the asset links with slashes.
<link rel="stylesheet" href="/assets/css/style.css">
<link rel="stylesheet" href="/assets/css/scregal.css">
etc.
There is only one possible causes of the problem I know although your question is not so clear.
1.》 Make sure the assets folder is in the same location as your html file.
》Prefix all your href link with a dot. Check the image to see
I faced a problem like this when I wanted to push one of my electron apps to production mode. The dot makes it easy for the packager to load the whole folder.
I am writing my first web application using Flask and SQLAlchemy.
My CSS file is currently saved under a static folder and the styling is correctly applied to my webpage
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
However when I try to update it (for example changing the fontweight from bold to normal) it will not show.
I could even remove all the content of my css file and my website will still look the same (as if the content was never deleted).
The only way I found to make updates was to create a new file "main2.css" and update the url link from the HTML file which is very inconvenient.
Has anyone found a better way?
It sounds like your CSS file is cached. You can test this by changing 'main.css' to 'main.css?something'. Some people append a date string or other to their CSS file so it busts cache periodically.
It's possible you're getting the cached version of your CSS. After making updates to your CSS file, have you tried doing a hard reload? How you do this depends on the browser, but for Safari this can be done by holding Shift and clicking the Reload button.
I had the same issues and I realised I couldn’t keep asking my users to do a hard reload. Constantly renaming my static folder (where all CSS/JS files were kept) seemed error-prone from a production devops perspective. Then I found this addon called flask-static-digest, which was adding md5 hashes to the file names as well as gzipping them. It is a good fix for my production server.
https://github.com/nickjj/flask-static-digest
Another solution I found was really helpful during testing is to do a full reload in your browser (in my case Google Chrome) by shift-clicking the reload button.
This is a really basic one, I'm afraid, but it's driving me crazy.
I'm making a website using NetBeans. I have my index.html in the Site Root folder that NetBeans gives you, and when I test it with the Chrome plugin, it comes up successfully.
However, if I load CSS by absolute path, <link rel="stylesheet" type="text/css" href="/layout.css" />, it doesn't load properly, because NetBeans runs the local server within a folder with the same name as the project.
What I mean is, instead of NetBeans loading the website from http://localhost:8383/index.html, it instead loads it from http://localhost:8383/ProjectName/index.html and breaks all the paths.
The "site root" setting is set to public_html, which contains index.html directly.
This is the annoying kind of problem to which there is probably a really easy solution that I'm missing. Any help is very much appreciated!
Have you tried using a relative URL to the CSS file?
Like:
<link rel="stylesheet" type="text/css" href="layout.css" />
Note! This solution is working for one Neatbean project (site) at a time so it is not ideal but maybe good enough for many others. If someone have a solution that works for multiple projects I'm very interested in that solution as well.
Set your server configuration to serve documents from your Netbean project folder, in XAMPP it looks like this.
Set your Netbean project URL to "http://localhost/"
Now links starting with "/" will lead to your root as expected but if you switch project you will also need to do step 1 again.
Apache Netbeans 12.1.
Right click on project - > Properties - > Run. Set Web Root to /
Benefits: paths relative to the root are properly working.
Disadvantages: impossible to work on several projects simultaneously.
The default favicon.ico that gets included in a WebMatrix product is added in _SiteLayout.cshtml like so:
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
That icon does not fit my app, so I converted a jpg I created at http://www.coolutils.com/Online/Image-Converter/.
I renamed favicon.ico to YourMotherWearsCombatBoots.ico and renamed the image I had
converted to favicon.ico (after adding it to my project).
I thought that my new .ico file would get used in the browser's tab for the page/site. But, alas, no! The old .ico file is making like the Raven of Poe's poem - it simply will nevermore go away. What's up with that?
UPDATE
Note: If trying this out using firefox or IE as the browser doesn't work (currently testing with Chrome), I am going to bountify this question for 50 points ASAP. If I get an answer prior to that, I will award the bounty post-answer.
Clear the cache :)
As long as the path to the file (including the filename) is correct, and it is a .ico file, it should render.
That having been said, try not using ~ maybe, since it is only an html tag and it uses / to find the root of the site.
I've done this many many times, and never had any issue with any ico in any browser.
Honestly the cache is the only thing I can think of.
----------------------------------UPDATE----------------------------------
I'm expanding my answer to show an example. This is a scenario I have just recently set up and it worked perfect first time (as it does for me every time).
The HTML:
<link href="/Images/Site_Icon/Scribe.ico" rel="shortcut icon" type="image/x-icon" />
The Directory Structure:
The Result:
Since I've been using icons for my sites, I have not noticed that there need be anything else. As far as I know this is all that should be involved with getting this to work as expected.
If this still does not help, do the following:
Re-verify the path, check it one folder at a time.
Delete the old Microsoft favicon entirely, unless you plan on using it for something else (which I doubt).
Open the ico file you are trying to render. Is it really the picture you expect it to be?
Manually (Ctrl+Shift+Del) clear the cache (especially for Chrome) and try again (if you're gonna debug in Chrome, you might as well get used to doing this regularly [okay, actually it doesn't matter what browser you use, you'll always have to do this when something doesn't render the way you expect, so that you'll know it's not a caching issue]).
Make sure you're looking at the right site, when it's open in your browser (i.e., make sure that you're not editing your site locally and pulling a non-updated version from your server or something).
Other than that, I can't think of anything else it could be.
Most likely an issue with the browser rather than anything to do with WebMatrix or code.
So I just finished working on a site on my computer, and I put it on a flash drive and put it in my public_html folder on my server. When I type in http://localhost/ I get my index page but the css is gone and all the images are gone.
How can I fix this?
Sorry, this question is from years ago. For those interested, the problem was due to permissions on my server.
Ensure that you have put the right path for your css and images.
Make sure that inside your html, the path to your css is correct.
link rel="stylesheet" type="text/css" href="mystyle.css"
Your href="mystyle.css" should have a correct reference by using ..(dot-dot) just like "../folderName" in case your css file is one or more directory away from you main folder.
Sometimes all that you need to do is clear your browsers cache, which will store the pages current state and will sometimes ignore any new changes to the css and sometimes even images until the cache is cleared.