This is happening randomly out in the field. I am embedding the editor in a ASP.Net MVC application. When users clear their cache and restart the browser, it works again. Any ideas how to fix it?
You must convince your browser to clear it's cache for the icons.png image.
Go to htt://yoursite.com/path/to/ckeditor/skins/moono/icons.png
and then use Ctrl+F5 or Cmd+Shift+R (mac users) to tell your browser to not use the cache and fetch a new one, which will then be stored in the cache.
You CANNOT do this from the editor page for some reason, probably by the way that the css and image is loaded. And for me, this trick only worked in Firefox and not Chrome. However, if in Chrome you do Shift+Ctrl+N (new incogneto window) then go to your editor, you'll see that it is working. That's how your visitors will see it UNLESS they have the icons.png image cached in there browser as well. The only way to fix this is to change the URL of the image, which will require replacing the new url in the CSS file (it's the background image for all the buttons).
Related
The problem is that - after upgrading/updating your CKeditor library, or changing packages from basic, standard, or full to another - some button icons are missing and others have the wrong icon, yet functionality of each plug-in still works.
For the editor to appear correct for yourself, you must convince your browser to clear it's cache for the icons.png image. Go to htt://yoursite.com/path/to/ckeditor/skins/moono/icons.png and then use Ctrl+F5 or Cmd+Shift+R (mac users) to tell your browser to not use the cache and fetch a new one, which will then be stored in the cache.
HOWEVER, you cannot expect your website users to do this. If the image is cached on their machines as well, then they will still be seeing the problem. The only way to fix this is to change the URL of the image, which will require replacing the new url in the CSS file (it's the background image for all the buttons).
I'm trying to re-skin an existing site using CSS only. I will be taking one of their CSS files and redoing it to match a new design, without changing any HTML. I want a good way of continually updating and then testing, but I have to do it locally because they do not have a dev environment. The site itself is dynamic and authenticated, so I can't just download pages from the site and test the entire thing locally. I was hoping that there is a way to tell my browser (Firefox, preferably) to disable that specific remote CSS file and replace it with a local file.
I don't want to use something like Web Develop Toolbar or Firebug because that requires me to manually make the changes each time I load a page. I want something more seamless.
I was thinking one possibility is to load my new stylesheet in userContent.css, but I would still need a way of telling the browser not to load the original stylesheet from the server.
Any ideas?
UPDATE: I found this Mozilla bug report https://bugzilla.mozilla.org/show_bug.cgi?id=208641 discussing the issue of being able to change userContent.css without restarting Firefox. One of the posters (Simon Wilper) posted some files and info about adding a menu item to refresh userContent.css, but it talks about modifying browser.xul and I can't find that file on my system. This seems like the last piece of the puzzle.
You can use AdBlock Plus to create a custom filter to block that one particular stylesheet, so it will not load when you go to the site. This rule will always be in effect, so as you refresh the page, you will not have to do anything extra.
https://addons.mozilla.org/en-US/firefox/addon/adblock-plus/
As for adding your own stylesheet onto that external site, you can use Stylish, an add-on for adding your own stylesheets to particular domains. This, too, will always be present as you refresh the page.
https://addons.mozilla.org/en-US/firefox/addon/stylish/
The issues you will run into, I imagine, will be what to do with images you are intending on linking to in the CSS. You will have to upload them somewhere, reference them absolutely, and then once you are finished, replace the URLs with new locations on their server. Also, that editing Stylish stylesheets within their editor is pretty poor (no code colouring, no code completion.) Probably better to edit it in your editor of choice, and then paste it into the Stylish textarea. Hit save, then see your work (I believe you won't even have to refresh, but I might be wrong.)
Also, both these add-ons are available for Chrome too.
https://chrome.google.com/webstore/detail/adblock-plus/cfhdojbkjhnklbpkdaibdccddilifddb
https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en
I am not sure why people are suggesting to install extensions for this simple task. I would suggest you to just follow these steps to disable whichever file you want from being loaded in your browser that you want. Just follow these few simple steps:
Hit Ctrl + Shift + C to open source inspection
Navigate to Network tab
Right Click on any file from the list and and click Block request URL
Now the file won't load. Cheers!
PS: Steps are same for Google Chrome and Mozilla Firefox browsers. Not tested on Opera and/or Safari.
Install web developer extension
http://chrispederick.com/work/web-developer/firefox/
And then it will create a menu under the Address bar, click on the css tab and then "Disable Styles" > Disable Individual Style Sheet" > then select the style sheet file you want to disable
after this, again click on the css tab and then "Add User Style Sheets" , next select your css file.
I'm working on a Rails app and was updating a page.
The page has a whole bunch of background images defined in css. When I refreshed the page (cmd+r on the mac), nothing changed. When I went into the Chrome inspector and unchecked then rechecked the css rules, the images appeared. Also, if I opened a new private browsing window (cmd+shift+n), the images all correctly displayed.
Am I running into some weird kind of cacheing issue?
Chrome: Version 21.0.1180.89
Mac OS X: 10.8.2
You need to do a hard refresh that bypasses the browser cache. I don't know the key combination on a mac, but it's probably similar to Windows: ctrl-shift-R. This is not the same as a normal refresh (ctrl-r on Windows) that does not bypass the cache.
Aparently on a Mac the equivalent key combination is cmd-shift-r.
Try forcing the browser to load your new css file. I usually add a query string (?v=1.0) to the link, like this:
<link rel="stylesheet" href="style.css?v=1.0" "type="text/css"/>
and then I change the number (?=1.1) each time I've done some changes in the css file.
This usually fixes it in Chrome.
Hope that helps!
I have this issue from time to time myself, especially when I am making lots of changes, I find clearing your browser cache works best, unless you have specifically set up some sort of caching.
Also make sure to check the "Disable Cache" is the inspector settings.
Screenshot taken October 10, 2016. Please update if changes have taken implemented by Google.
Command + Shift + Delete
Empty cache from the "beginning of time"
I am having some problems with browsers displaying images correctly. Most of the browsers are affected except Chrome.
The problem here seems to be the caching problem of images. I am not very sure if this is the case, so I will tell you guys what I did.
My page allows users to upload their photos. So these uploaded photos will be saved into a folder. The user will then use the crop tool to crop their images to their preference, and saved them back to the same folder again. If they chose to use the same name, the image will be overwritten.
Here comes the problem. In Chrome, the browser will show the new cropped images, but not for the other browsers. If the image was renamed, then this won't happen either. Is there anyway to solve this?
Try to add a new guid at the end of the filenames as image.jpg?id=asdf
Change the file name each time you save. You really need caching, but you don't want it to happen at the wrong times. Adding a random number will prevent browsers from caching images at all, prevent http.sys level caching, and prevent any edge caching you implement from working.
I am developing a site that uses Google Chrome as its browser.
(Yes - I do not need to be compatible with any other browser - I guess I'm lucky as this is a feature requested by the user of the system ;-)
I am working on the layout of the screen in VS2008 and am changing the CSS files all the time.
I do not want to change my browsers settings and do not want to clear the cache.
All I need is a browser extension (icon) that when it is clicked re applies the CSS to the page after fetching the CSS from the server.
This functionality exists in the Web Developer extension but it adds some extra clicks I am trying to avoid.
Any ideas will be much appreciated as I am getting tired of all the extra clicks.
Thanks and enjoy life, Julian
I've been looking around for a Chrome extension that reloads CSS from the server without making the page "flickering".
Here's what I found:
J CSS Reload actually does the best job in my opinion, although it flickers sometimes. You can even set a keyboard shortcut at the bottom of chrome://extensions/ by clicking on "Keyboard shortcuts" (although this seems to cause flickering constantly).
CSS Refresh refreshes CSS, but causes flickering (when hitting CSS reload, then all CSS is gone until the CSS is refreshed which makes it hard to spot the differences between before and after CSS reload).
CSS Reloader doesn't work for me.
Another option to consider is LiveReload.js which auto-reloads your web-app while developing (not only CSS but also HTML, etc.). There's a free Chrome extension and for Rack applications (like Ruby On Rails) there's the great Rack LiveReload gem.
CSS Reloader extension: https://chrome.google.com/extensions/detail/dnfpcpfijpdhabaoieccoclghgplmpbd, just press f9 to reload (obviously after installing it :P).
Also checkout Web Developer extention
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
It has alot of great feature. One of them being able to reload the linked style sheets.