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.
Related
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.
My computer is having an error where the CSS stops working. For example before, when I modify the CSS and save it, it would work on the webpage and all would be fine.
Now however, if I edit and save the CSS the webpage does not change at all, its almost as if the CSS is stuck in a cached version or something.
I am using sublime text 3, wamp server and chrome.
Anyone have any ideas on what the error could be?
Do
CTRL + SHIFT + R
This will hard refresh your browser. This command helps you to clear the browser's cache for a specific page.
Try deleting images and files in cache.
Then you can also use a workaround if it's a cache problem: you can add a get version parameter to your css src when you include it, and upgrade the parameter.
For instance:
<link rel="stylesheet" type="text/css" href="your/src?v=0.1">
Then if you modify the css, you can change the v value
<link rel="stylesheet" type="text/css" href="your/src?v=0.2">
Without have to delete cache or something else
Close your files in text editor and open again your files in text editor.Recheck the file address you want to open in wamp server or open again.
Long title, sorry. Anyway:
I've got a WordPress site with a custom theme and its child theme. For a while, updating the child theme's style.css would produce results as expected - a refresh (or hard-refresh) of the website, and it would work from then on out.
Now, however, my updates are only reflected when I hard-refresh a certain page. If I then refresh the same page, or navigate to a different page on which the changes should be applied, the changes are reverted and the old style.css file is called instead.
I am using, and have tried purging all the caches available through the "W3 Total Cache" plugin. I have tried disabling "W3 Total Cache" entirely and installing the "Style.css Load Last Version" plugin, which as far as I know is using this trick to always call for the latest style.css file. I've tried visiting the page using incognito mode. In all cases, the behavior is the same - hard refresh works as a one-time deal, either refreshing the same page or navigating to different parts of the site which should be effected results in the browser calling for an older style.css file version and the changes are reverted.
Long test, sorry :) Anyway, I would love some feedback on this issue as its driving me nuts.
Which method are you using to load your child-theme's css file??
If you are using a link to include your child css as
<link rel="" ..............> then try appending the version at the end of you file name
<link rel="stylesheed"...... href="your_child_style.css?v-=1.10"> where ?v=1.10 is the version number. Every time you update your css increase the version number(In case you don't want to change the version every time i suggest you use the php time() function to generate a unique number eveytime the css is loaded)
If your css file is loaded automatically then make sure you have version decalared in you css file as
/*
Theme Name: yourchildtheme
Version: 1.2
*/
Try to change the version and it will work just fine.
Good luck
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
function my_child_theme_scripts() {
wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' );
}
My goal is to have a page, served by a web site, containing a to a stylesheet, that is available not on the web site, and not on a different web site, but on a local drive.
Something like;
<!DOCTYPE html>
<html>
<head>
<link href="/styles/something.css" rel="stylesheet" />
<link href="file:///C:/custom.css" rel="stylesheet" />
</head>
My initial research shows that browsers don't seem to support this, but I'm willing to be proved wrong, or discover some sneaky way of doing it. (I tried the above, that doesn't work.)
[I know, I know, you wanna know "why". This is for the site designer - it would allow him to edit the css locally while designing and see the effect on the "semi-live" site. ie the round-trip for edits would be very fast, and I wouldn't need to give him access to the actual site. By extension, for teaching purposes, it would allow multiple people to simultaneously practice their CSS skills locally]
Obviously any edits made to the local file will only be visible on that local computer - that's the whole idea. If you had 10 students each would see the same site with a different css file.
Well, if you can setup Apache on your machine, this is easily done.
This is assuming the question is this
I want to be able to have a site in a
central location (live) and allow users
accessing that site to be able to make
changes to the site by editing a local
file. These changes will only be
visible to the person making the
change and the rest will just see
whatever CSS is on their local copy.
So this means that you have to serve a local file from multiple computers and each person viewing the site may have a different looking copy. If I'm right, read on.
Setup a local environment (maybe with WAMP?) on all the machines you want to be able to allow local edits. The important thing is that everyone must have the same hostname defined (either localhost, or something else - don't forget to add it to your hosts file). Place the CSS file inside your webroot and add a link to your live site pointing to that link.
<link href="http://www.mysite.com/base.css" rel="stylesheet" />
<link href="http://localhost/custom.css" rel="stylesheet" />
And voila! Local editing.
Caveats
Everyone needs to have their files placed in the same local URL otherwise it won't work
You need to setup a local environment (very easy)
Just press Shift+F7 on Firefox (or Tools->Web Developer->Style Editor). In the window that opens you can import an entire file or you can also edit the styles loaded.
Obviously, you can't. But why not try it and find out if this didn't work?
If the purpose of your needs is only for testing, i'll advice you install web developer extension where you can add local CSS to a website - for testing only.
Just for the purpose of answering the question, yes he could serve a CSS file to your website, but he would have to have a server installed on his computer and a public access to his server IP.
Then in the href of the stylesheet you would write something like <link href="190.181.169.118/styles.css" rel="stylesheet" />.
Of course this is not the recommended solution, i would advise you to use some sort of browser extension / plug in for that.
Yes you can!! Just need Firefox as a browser and you also need add on WEB DEVELOPER installed on it...
It allows to disable the inline CSS and add user CSS...
Download the add on WEBDEVELOPER
Once installed...after you restart firefox you will get a menu on the firefox window in which click on the CSS menu which will allow you options to disable and add user CSS
You will have to disable the inline CSS to see the CSS applied by the user to full effect