I am writing an HTML code and have linked it to an external CSS file. My CSS file was working normally, but suddenly any extra change I make was not reflected to my HTML. I deleted some CSS code to check if anything will change but nothing happened.
For example, I wrote a code to change the background color of my <body> tag to blue:
body {margin:0px; width:100%;font-family:sans-serif; background:#333; color:#d0d0d0;}
When I delete that code then nothing changes and the background is still blue. I have made a research about that problem and some say that this is because Chrome is caching my file.
Could you please advise?
can you paste some code?
or else I don't understand the problem, ill try help as quick as I can!
The problem is due to Browser Caching.
You can use a strategy to bust the cache.
I personally use versioning the Query String Strategy to resolve this issue.
I do it by adding a version number in the linked resource like below:
<link rel="stylesheet" href="style.css?v=3.4.1">
You can change the version number before publishing the website.
For local debugging, you can use Ctrl + F5, it'll hard reload the website and request all the resources from the server.
Related
I'm using Atom and it's HTML preview feature. If I change my CSS file, nothing happens. But then if I go to my HTML file and make any change, even just adding a space somewhere, everything updates.
I've referenced my CSS file in my HTML file as:
<link rel="stylesheet" type="text/css" href="css/style.css">
Help?
If I understand the question correctly, you are making updates to your files but when you refresh the page in the browser, you are not seeing the style changes getting applied.
If that is the case, you can do a hard reload of the page by clicking Ctrl + F5
More information here: https://refreshyourcache.com/en/cache/
If your stylesheets are external file, then your browser may store it somewhere and loads the old content. If you use Google Chrome, then press F12, navigate mouse to refresh page button (with <- and ->) buttons and right click it, you will see options on how much you want to reload. :)
Is this what you asked?
Because this is what happens to me, when I do not reload the page completely.. Before it, no new content of externa files is updated.
guys I closed and opened Atom and it fixed the updating problem but I've still got the drop down menu problem. I think I'll create a new post for that since it's probably code-related
My problem is that I linked the CSS correctly when I created my HTML file, but then when I try to edit the CSS the other day, it just didn't update my HTML file and I did save it of course. One way I can get around this is by deleting the CSS in my htdocs and creating a new stylesheet with the exact same contents then linking the new one to my HTML. Can you guys tell me why is this happening and how can I prevent this from happening again?
I think that the problem is with cache. You can try running the site in an incognito/private window of your browser.
You can also inspect the page and see if the new styles are loaded. You can also try Empty Cache and Hard Reload option when you right click the reload button on chrome browser while inspecting.
one way you can prevent it is by doing all your css in the actual html file like so
<head><style></style></head>
I am not sure why I can't get an image to show up in the background of this site: http://backroadsbrewing.com/
I have tried using the !important; tag, uploading the photo into the Wordpress' library, and linking within the stylesheet to the URL.
Not sure if you're able to see the code of the site without me putting it up somewhere? If you need me to post it, please let me know.
You are not linking the correct css, you are linking the editing link.
<link rel="stylesheet" href="http://backroadsbrewing.com/wp-admin/theme-editor.php?file=style.css&theme=onesie">
If you open http://backroadsbrewing.com/wp-admin/theme-editor.php?file=style.css&theme=onesie in an inkognito window or after logging out, you get redirected to login page, which is wrong.
You need to link to your generated css file instead of some wp-admin/ url (which will never work).
The correct link would be in your case:
http://backroadsbrewing.com/wp-content/themes/onesie/style.css
Regards, Max
Additionally, you have added an obsolete semicolon:
background-image: url("http://wallpapercave.com/wp/Tb3g7Fv.jpg"); !important;
# instead of
background-image: url("http://wallpapercave.com/wp/Tb3g7Fv.jpg") !important;
And you should:
never link to external pictures (they can always change or being removed)
only link to pictures where you own rights to publish (or it can get really expensive, like a customer of me payed 900€ for a single picture he used for a couple of years.
I'm working on an application and styling it right now, however occasionally when I save my style.css file (my temporary change stylesheet before changing it to LESS) I get some messed up elements that were fine before I reuploaded. I made no changes to those elements and I'm 100% sure it's not my CSS, it's also not my browser cache as I've cleared it and reloaded the page with the same issue. I've also added
?v=1.0.1
onto the end of my link to the stylesheet to trick the browser into believing it's a new one. (Learned that trick on StackOverflow to use with favicons, will give credit when I find where I got it)
It tries to search for the CSS in .LESS files that are non-existent on the web server. Could it be a problem with my bootstrap.css.map file being on the server?
EDIT: Another thing I can't seem to figure out, is why the CSS actually shows up under the LESS file reference?
I found my problem, it turns out I was using the wrong media attribute. For some unknown stupid reason I had set the style.css file to only display for print.. I just removed the entire media attribute to be displayed on all types and it works like a charm.
I'm running a large site, one that has a nav bar at the top. Rather than change the 100+ html files each time we want to change one of the buttons in the top nav, we want to switch the navbar to be displayed using an include of some kind. I want these includes to work on both Firefox and IE, and I don't want to have to change the extensions of each file either.
So far I've tried:
Javascript read file - This works fine on firefox, but IE has file reading blocked it seems.
HTML include - So far only works if we change the extension to shtml
PHP include - I know you can set up apache servers to run php scripts within html, but I don't know how to make this happen in SunOne.
iframes - I had to block iframes in order to comply with security standards.
I'm more than open to suggestions I haven't considered, or ways to make the above attempts work. Any ideas?
Eureka! I've found it!
So rather than include the html, why not just include the javascript and css? Every page will include a .js and .css file. The css can set the image src, and in each image I can use "onclick" to tell it to execute a function in the .js file with a simple window.location. Voila! Two quick changes will change the whole site!
Thanks to Mr. Lister for the CSS idea. That set me on the path.