I do not know what is going on with my flask app. My project was fine and working the way I wanted it to then the CSS in my style.css randomly stopped applying to the new elements I was adding. After a bit of digging I found out that my index.html file was some how applying CSS by itself and not updating, so I deleted the CSS file (and other aspects of my project, like images and my second html file) and CSS still gets applied to my index.html. How? The file no longs exists and I have checked its path. Why is this? What am I doing wrong?
Please take a look this picture of my directory, html, and web page
Here is my Python file:
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def index():
return render_template('index.html')
if __name__ == "__main__":
app.run(debug=True)
As you can see with this Picture this CSS file doesn't exist
Also, when i remove <link rel="stylesheet" href="static/css/style.css"> from the top of index.html all the styling (apart from the in line CSS) goes away.
There my be cache there for css.
You need to remove the line 9 of your html file.
And remove line 8 if you don't even want the font style.
then ctrl + F5 to force refresh with empty cache
Try to use cache killer or manually disable the cache from inspect menu. Deleting the cache data helps to troubleshoot, helps to increase the loading time of web pages and increases the performance of your computer. If the browser doesn't load the new version of the site, even if there have been changes on the site since the last visit, the cache can cause issues with the view.
This is clearly coming from Cache..
For deleting cache from chrome
Open the Dev tools and right-click the refresh button then select "Empty cahce and Hard Reload"
For Firefox
simiply press "ctrl+shift+r"
Note - These are for Windows machine and not for Linux or Mac..
Related
I have been getting this weird problem where, when I upload a new CSS file to the public_html folder in cPanel, it is not updating on the website.
Whats really weird about it was that I uploaded the entire website again. Every html file, every folder, everything. And when I checked the CSS file it was the updated version, but the browser was somehow reading the old one.
To fix this issue I had to change the name of the CSS file (in all of the html files too because without it they were still using the old one even tho it was nowhere in the folder) and re upload the whole website again.
So, am I missing something here? Is this supposed to happen? Or is this actually weird and shouldn't happen at all?
I've also run into this problem. It seems to be a caching issue. Trying this person's trick is how I narrowed it down to being a caching issue:
https://www.sitepoint.com/community/t/css-html-files-updating-on-cpanel-but-not-on-website/271683/5
Smells like cache to me.
If your recent changes are NOT there, then play a trick on the URL by changing the path a little. For example if the path was /themes/mytheme/assets/custom.css or whatever it is, change the version and do something like /themes/mythemes/assets/custom.css?v=1234567
By changing the URL in this way, it would bypass any kind of cache that would be looking for the previous URL. In other words, you should now see your correct CSS file.
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.
I have a wordpress website. I usually make changes in CSS file of theme without any problem but there is file in which CSS changes do not appear. But they do appear while inspecting element.
But while inspecting it shows some digits after the file name. The file name is theme.css, but inspector show me the file name: theme.css?ver=15350008013:1
CSS is compacted and all codes are in one line.
Any change in the CSS file not happen but in the inspector shown. Why CSS editing not working?
This is fairly standard of most caching plugins for Wordpress.
theme.css?ver=15350008013:1
Is requesting a cached version of the file.
The CSS being all in one line is a minified version of the file. This is done to reduce the load on the server by making the file smaller.
Suggestions:
Look through your theme settings to see if there is any mention
of caching.
Look through your plugins and see if there is any
mention of caching.
Once found, clear / flush the cache.
Your changes should now be loaded by the server.
Generally what happens when you clear out the cache is that your plugin / theme will be unable to find a cached version and will minifiy and generate you a new version based off the original and you will see a new number at the end of the request string to tell the browser that the version it has downloaded previously is old and that it needs the new one.
I'm working on a project in Django and I'm trying to clean some of the CSS up. The project is called 'rs'. The path to the stylesheet in the project folder is :
rsinterface/static/rsinterface/style.css
At the top of my file, I include static files using {% load staticfiles %}.
I then link the stylesheet using the line:
<link rel="stylesheet" type="text/css" href="{% static 'rsinterface/style.css' %}" />
I made some changes to the stylesheet that should be immediately visible, saved and closed the stylesheet, reloaded the page, and nothing was changed. There was some stylesheet that was loaded, as all the previously existing styling stayed the same, but the edits I made were not reflected. I didn't revert any changes, and roughly an hour later I reloaded the page again and the changes were there. I then changed the stylesheet again and, once again, the page didn't change. Ever since then its been intermittent in actually changing the page.
The one way I found to always make the style changes go through is by modifying the CSS file's name each time, but this leads to issues with version control software. Is there an explanation for this phenomenon, and is there any other workaround to make sure it doesn't continue to occur?
Try updating your browser and delete the data after saving your CSS.
For example, in Chrome, use Ctrl + F5 (Windows/LInux) or Cmd + Shift + R (Mac)
Because your website is still using a cached version of your CSS.
you can easily see this in your chrome debugger under network tab.
enter image description here
just open in a different browser or clear cache memory in your browser.
I'm trying to get Chrome's DevTools to auto reload a page when I save a watched SCSS file which will compile and make changes to the CSS file.
I have the Auto-reload generated CSS option checked, but sadly, it isn't working as expected.
Whenever I make changes to the SCSS file and save it, the page doesn't reload. I have added my working folder to the workspace and also mapped the files (both the SCSS file and the generated CSS) to their respective versions on my local system drive. This, however, doesn't help.
The SASS source maps seems to be working fine as the scss files are reflected in the DevTools inspector:
I'm using Chrome version 31:
Have I missed out anything that I don't know of? What else do I have to do to get this to work?
I used drupal in this case and drupal generate css link like 'style.css?abc'. Problem in this suffix '?abc'. You need to start file mapping from LOCAL (press right-click on local) 'style.css' to WEB 'style.css?abc' (shown in list). Not from WEB to LOCAL. If result is correct WEB-links disappears from list in 'resourses' tab.
here is a good solution, to avoid this mapping issue of .css?201203241721 / .js?201203241721-files as szdv mentioned with drupal. I have had it with typo3 and this solved it:
/* remove in production *************************************************/
//filter typo3 temp file src/href with ?date ending for chrome workspaces
$('script, link').each(function(){
rpString = /\?[0-9]*/;
if(this.src){
this.src = this.src.replace(rpString,'');
}
if(this.href){
this.href = this.href.replace(rpString,'');
}
});
/* ******************** *************************************************/