A Lighthouse audit of my site suggests preloading the file https://partyfavorz.com/wp-content/themes/customizr-pro/assets/front/css/magnific-popup.min.css to speed up my load time.
I created a header.php file for my child theme and using their suggested format of
<link rel="preload" href="styles.css" as="style">
and used this between the opening and closing head tag:
<link rel="preload" href="/wp-content/themes/customizr-pro/assets/front/css/magnific-popup.min.css" as="style">
After clearing my cache and CDN and running a new audit - the critical alert remains. It has something to do with the as="min"> I'm guessing this is a style sheet and tried using that but it had no effect.
I went back and tried something simple like adding the theme color code in the child header and it still didn't work - even though the code was correct and I had copied the theme's header.php file over to the child theme.
I removed the code from the child theme and then installed a basic plugin called "Insert Headers and Footers" and entered the same code again. Once saved - it entered the identical code into the child theme in the exact location and now works.
I did the same thing with preload code that started this thread and it worked as well.
The issue appears to be with the Customizr theme itself. In both instances, the same code I manually put into the header file in the child theme did not work. Once it was used in the plugin - it did.
Related
I'm trying to create a website on GitHub Pages, but for some reason, my CSS is taking a very long time to update. I just want to be clear that my CSS does load, it just isn't updating. I tried everything, like clearing the browser cache. But when I go to deployments, my changes were never deployed, and the CSS file https://virxec.github.io/CSWeek/assets/main.css also hasn't updated. The page is here: https://virxec.github.io/CSWeek/MiniGames/ and the file is here https://github.com/VirxEC/CSWeek/blob/master/assets/main.css Is there a way to make GitHub Pages updated CSS files faster? I checked in the commits and it actually says that it hasn't built the page with the edits to the CSS file - only the other pages.
UPDATE: I just waited for a while and then made another small change and then committed it. It updated immediately. Why does this happen? Why didn't it just auto-rebuild?
It looks like you have to bust the cache manually on Github pages.
Here's how I do it in my Jekyll project:
<link rel="stylesheet" href="{{ "public/css/style.css" | prepend: site.baseurl }}?{{site.time | date: '%s%N'}}">
This spits out something like this:
<link rel="stylesheet" href="/public/css/style.css?1634299829608420276">
The timestamp appended after the ? changes on each build which invalidates the cache.
Today I started changing some CSS on a Symfony (2.6) project. I added some styling to my newly created css file and everything was working fine. My problem occured when I went to add another style and nothing happened. I checked the dev window and couldn't find my styles anywhere. I've deleted the cache multiple times. Im using Symfony with a vagrant box. If I open the css file in the url it is filled with diamond/question marks and my first style entry is still there. I checked and the encoding is set to UTF-8. Ive never had issues like this with css, does anyone know what the problem could be?
I am using Assetic to include the style sheet within the project like this:
`<link href="{{ asset('css/print_production_report.css') }}" rel="stylesheet" type="text/css" media="print" />`
So to show you whats happening I'll start from the beginning. I had this stylesheet (ignore the error):
And upon checking the browser I still have:
Now when I add some random text or css to my stylesheet as so:
You will see that all my changes are being converted into these diamonds:
I think this issue of caching files and replacing them with the unicode 'REPLACEMENT CHARACTER' (�) has to do with sendfile. Turn sendfile/EnableSendfile off in nginx/apache.
Related question is here: yeoman and angular utf8 issue and caching
Insert
#charset "utf-8"
at the top of your file and make sure you've saved the file in UTF-8.
Helpful link
Takie this lower text and comment it, i mean use
//comment blabla
In your css file.
I have a website hosted by siteground, and my custom 404 page is SOMETIMES missing it's stylesheet. I contacted support but they saw it working fine, assumed I just codded it wrong, and told me to get help form a professional web programmer... (of course I did test before contacting them to be sure it was not my fault)
Anyways, the way that siteground allowes you to create a custom 404 page is to add your html code to a form in your control panel, wich creates a 404.shtml in your main folder. The .shtml contains all your html. I have done the following test to narrow down the problem.
created a not404.html in my main folder with code copy pasted from my 404.shtml that is in the same folder. It loaded with my stylesheet applied no problem.
tried prompting a 404 page with both bad hyperlinks, and by typing pages that do not exist. When I am having the problem with my stylesheet missing, none of thease pages have css, but when I am not having the problem, they all have css applied.
What I think it is: I think that the 404.shtml is not really in my main folder, but just appears to be there, and sometimes that link breaks and the 404.shtml is actualy acessed somewere else on sitegrounds server, therefor the style link would not work properly. This would explain the intermittent css failor. But this is just logic, not understanding.
The only thing I can think of that would be wrong on my end is if there is more than one way to link stylesheets, and my way is a bit unstable. Here is the format I use.
<link type='text/css' rel='stylesheet' href='css/404.css'>
I know this might be a difficult question, but it would be pretty satisfying to figure this out and inform them of the problem with their site.
Change the href for the style tag to be absolute. So this:
<link type='text/css' rel='stylesheet' href='css/404.css'>
Becomes this:
<link type='text/css' rel='stylesheet' href='/path/to/css/404.css'>
css/404.css is a relative path. If the path is something like /path/to/nonextant/page it will try to load the stylesheet from /path/to/nonextant/page/css which does not exist.
Use an absolute path:
/css/404.css
This is my first time creating a WP template. I used this tutorial: http://themeshaper.com/2012/10/22/the-themeshaper-wordpress-theme-tutorial-2nd-edition/
I am editing the style.css file that is in the template folder (WCCB Theme - Copy). It is on XAMPP, a local server, so there is no FTPing anything. I edit the file, and refresh my browser and nothing happens. Currently I only have one style in there, making H2s red, and the rest is blank (except for the header comment). Not sure what I'm doing wrong.
1: When I view the source, the file is listed as a stylesheet that is applied.
2: When I go directly to the URL of the file the browser can find it.
3: When I use the developer tools to inspect my H2, it says only user agent styles are being applied.
Initially it appeared as a caching issue, but I have cleared my cache (Chrome). I have no idea what is wrong. How can I get my CSS to udpate?
Go to the template folder (usually under: /var/www/html/wp-content/themes/<your theme>) and edit the file: header.php (don't forget to back it up first!)
replace the line:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" media="screen" />
with:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>?v=123" media="screen" />
and refresh the page.
If it wasn't refreshed and you're using WP Super Cache - delete the cache.
Still didn't refresh? run from prompt service httpd restart (it restarts the Apache) and try again.
Worked for me!
I know I had problems like that before. Try ctrl+f5 to do full reload.
Not sure how I fixed this. I deleted the template from the WP admin panel and added it again with a different name and some CSS changes already made. It worked. Now I can change my CSS file and refresh my browser and the changes appear. Not sure what happened.
What I usually do is open the page on the Incognito Mode(Ctrl + Shift + N) - if you are using Mac (cmd + shift + N).
https://friends-with-you.myshopify.com/
I'm trying to develop my first shopify theme. I'm trying to load a stylesheet which is hosted on another server, but the CSS is not loading. If I copy and paste that CSS directly into a file in the shopify theme, it works.
<link type="text/css" rel="stylesheet" href="http://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
What am I doing wrong at the above URL, and why isn't the css loading?
thanks!
Can you load your CSS file over both http and https? If so, change your tag to look like this:
<link type="text/css" rel="stylesheet" href="//fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
That way whether a user visits using http://yourstore.com or https://yourstore.com, they'll get the stylesheet served using the protocol they're on (and you won't get any mixed content warnings).
A little more background: http://paulirish.com/2010/the-protocol-relative-url/
Under IE7 and IE8, using this in a <link> tag will result in your content being fetched twice.
Change your link tag to use a secure URL:
<link type="text/css" rel="stylesheet" href="https://fwy.pagodabox.com/magic/themes/fwy/fwy.css" />
^
The URL you're using now works fine on its own, but since you're browsing to the Shopify store over SSL, many web browsers are going to be hesitant to load the CSS over an unsecured connection.
I just checked and pagodabox serves the CSS file just fine over SSL.
In normal HTML documents one can load stylesheets from anywhere, as long as they exist and you're able to load them by typing the URL in (which I can).
I see the page as two navigation bars with a logo on the left hand side. There are hover states with transitions to a colour background on each item. Although, when I loaded the page, Chrome warned me not to load supposedly insecure content. Before this is loaded I just see text in Times New Roman. I think this is you problem.
I use themes with WordPress and style-sheets come with them (mostly). I don't see why you couldn't just put the style-sheet in with the rest of the theme.
Overall, the answer is yes (normally) but in this case browsers may regard it as un-safe and therefore not load it.
Yes you can! But it is faster to host the stylesheet on your server/where the other files reside. If you plan to include a stylesheet from elsewhere, you could run into problems of that server being down/busy and hence your theme will not display as required. As #Blieque mentioned, some browsers may question external content causing unnecessary warning popups to a user/user-agent.