I'm currently using the CDN url and JS to fallback to local copy of the CSS file. In both cases our client isn't able to see the icons, just squares. "Our new firewall does packet inspection" is what the client says.
He is able to, however, go directly to the CSS file via the CDN URL without any issues; yet the icons will not show up. Any thoughts or recommendations?
Related
What tool/editor do you recommend to (live) test your local CSS changes against an externally hosted site?
A site lives on a domain.test (no server access), and I need to write extensive CSS overrides to reskin the entire site. All changes will be in a single CSS file with no preprocessor.
The ideal setup is using the comfort of my regular code editor (Visual Studio Code) and having the site open in a browser and have the CSS auto-refresh as I save my CSS changes in a local directory.
It's a big site, so I'm open to setting up a complex setup rather than relying on testing edits using browser inspect mode or mounting CSS files using Firefox.
:: I can inject JS script/library to the site if it helps with my setup.
Bonus: If I can do that for Vanilla JS too.
I would do it as follows with ModHeader and ScriptAutoRunner (chrome extensions).
With ModHeader replace the site's CSS and JS to local files using the "Redirect URL" function. (If necessary use ScriptAutoRunner to inject JS).
In one of these JS files create a rule to download every 2 seconds via ajax (any other way) your local files and check if there is equality with the last request or not. If the file has changed then reload the page (to update).
I know there are some tools that show CSS changes in real time without you having to reload, but I don't use them and the way I mentioned you can also make them run when the JS is updated.
This is a long shot, but I came to a wall and I don't have any idea what to do with it.
There is a site that has section with Google Maps map with custom pins. Location of the pins and configuration of the map are defined in wp-content/themes/mytheme/js/map.js file. I have to add some pins. According to the person who created the site a couple of years ago, new pins may be added by modifying map.js file.
The problem is - nothing changes when I modify this file. Even better - I can remove this file (and all other scripts in "js" folder) and nothing changes. This is the only instance of a script that I found.
There isn't any caching plugin enabled.
There isn't caching on server.
This is not browser cache.
Basically it seems like instead of loading this script, the site is taking it from different location, but I don't have a clue where it could be. Is there anything I can do to find source location of a script?
EDIT: I deleted all css and js folders entirely from FTP and it still shows in browsers. I entered Chrome web tools and used network tab to see initiator for the script and it shows as
xxxxxxxxxxx.xx/wp-content/themes/xxxxxxxxxx/js/map.js?ver=5.2.10
But this file DOES NOT EXIST. I deleted it via FTP. Same thing happens with CSS files. It isn't browser caching because it happens on different browsers, different computers...
In terms of site optimization and speed; is it better to include a font locally or use a css #import? (I'm using google's web-fonts)
You will need to do a test on your own. The simplest way to do so is to use a developer tools console in your browser and to check a network section to see how how long it takes for the files to be loaded. It is possible that your web server may dish out files slower or faster than google.
Additionally, some browsers, like Firefox, by default, may not include font files downloaded from a different domain. To make sure your site renders as expected, I would serve font files from within the domain that the user visits.
I have a website written in Ruby using Ruby on Rail framwork, everything was fine when using HTTP protocol, but when switching to HTTPS protocol.
Some CSS material can not shown, but some of it can.
The font can not be shown, originally the font was designed, but now it is not.
Anyone know what happen?
Without any specific error I assume browser is probably blocking files loading from mixed content, i.e. using both HTTP and HTTPS. Use your browser developer tools network tab to confirm this.
You can use // instead of http:// so that resources load from the relative protocol that the page content is loading from; Can I change all my http:// links to just //?
Also read; How to fix a website with blocked mixed content
Here is picture in chrome:
I just woder what does user stylesheet mean here. The case is that I am 100% sure that these classes does not exists in my stylesheets (it was before). I thought It comes from cache but it remains even after cache is cleared. Any ideas? Thanks.
First of all, read this definition of what a user style sheet is. It is an extra stylesheet to help you (the user) browse the web. Hence if you prefer certain CSS settings over what the web page designer intended, you can overrule those settings with your own.
This user stylesheet that you found, may therefore just be a local CSS file on your pc.
Therefore we need to know: where did you find that .CSS file?
If the same file is in this location:
PC: C:UsersYourUsernameAppDataLocalGoogleChromeUser DataDefaultUser StyleSheetsCustom.css
MAC: ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css
Then the answer is:
The file above is, as it sounds, a CSS file that you can modify and add your own custom styles to, to change the look and feel of your Google Chrome Web Inspector.
Which means that with that specific stylesheet you can change the look of your Google Chrome Web Inspector.
So it has nothing to do with the website you are inspecting, only with how your web inspector looks (it is built with HTML, CSS and JavaScript).
You can read about it here. (Google Chrome version 33 does not feature custom stylesheets)
It could also very well be the case that Google Chrome implements some other user stylesheet that is stored somewhere else on your pc (but I wouldn't know where exactly).
Note that the inspector also shows user agent stylesheets which is the default stylesheet that your browser implements. You can read about those in this question: What is user agent stylesheet
It is possible that the http server itself has cached the previous version of the file and is serving it.
Reload and check the headers in the Network tab, so you can get the full picture. Or if you are using development environment, you can restart the server - just to be sure.