This question already has answers here:
CSS doesn't work on HTTPS pages in Chrome and IE
(2 answers)
Closed 7 years ago.
My personal blog works when you connect via http but not with https. When you use https it doesn't load the CSS code. Any ideas? The certification is via Let's Encrypt program.
My site:
http://nicktehpro.xyz/
Broken Link:
https://nicktehpro.xyz/
At each place in the document where u have used:
href="http://nicktehpro.xyz/wp-content/themes/enigma/style.css"
Please change it to:
href="wp-content/themes/enigma/style.css"
or use a protocol relative uri:
href="//nicktehpro.xyz/wp-content/themes/enigma/style.css"
because your references are non-secure links they are avoided when using a secure connection
It looks as though there is an error accessing the stylesheets, images, and other objects you are linking to on the page. When you go to https://nicktehpro.xyz, it is trying to load other links from http://nicktehpro.com Its not allowing you to load insecure data onto a secure page. Make sure that you are either loading all from http or https not a mixture of both. you can fix this by using relative links, starting with
href="/wp-content/link-to-file"
or
src="/wp-content/link-to-file"
instead of
href="http://nicktehpro.xyz/wp-content/link-to-file"
all the links should start with https which is not the case for your css and js files , example :
<link rel="stylesheet" href="http://nicktehpro.xyz/wp-content/themes/enigma/style.css" type="text/css" media="screen" />
should be
<link rel="stylesheet" href="https://nicktehpro.xyz/wp-content/themes/enigma/style.css" type="text/css" media="screen" />
and the other links too
I went ahead and downloaded the theme you're using to further help you, navigate to Header.php and replace on
line 18
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
with <link rel="stylesheet" href="/wp-content/themes/enigma/style.css/" type="text/css" media="screen" />.
EDIT:
After looking into it' there's also a plugin which can achieve this for you for anything that may not be working because it displays as http and not https you should consider giving it a try here.
Related
This question already has answers here:
WordPress: Loading multiple scripts with enqueue
(3 answers)
Closed 12 months ago.
I have an application that I'm trying to include in a wordpress page, I passed it the include of the index.php file and everything is displayed but when it looks for the JQuery and Bootstrap files for the style these are not detected.
The style files are located in the same folder as the index file and I pass them as follows (they are just examples):
<link rel="stylesheet" href="include/bootstrap4/css/bootstrap-select.min.css">
<link rel="stylesheet" href="include/bootstrap4/css/bootstrap.min.css">
<link rel="stylesheet" href="include/bootstrap4/other/jquery-ui.css">
<script src="include/bootstrap4/other/jquery-3.3.1.min.js"></script>
Also I tried to include Bootstrap with cnd and the style is detected but with Jqueys still nothing.
The application without the jquery files does not work, can anyone tell me how I can include bootstrap and Jquery in the page?
If you want to add files just enough, use the parameter get_template_directory_uri():
<link rel="stylesheet" href="<?php echo get_template_directory_uri() . '/your/path/and/file.css' ?>">
But don't do that.
Better to use CDN with these libraries as it has very good compression and file caching support.
Take a look here getbootstrap
I am creating a template page in Wordpress that contains a custom contact form in it, using php and ajax.
I have two files in the same directory:
wp-content/themes/verbo/template01.php (contact form) and wp-content/themes/verbo/sendEmail.php (ajax)
In template01.php I have the ajax request like this:
xhttp.open("POST", "sendEmail.php", true);
However, that line is giving me an error:
"failed to load resource server responded with status 404"
template01.php and sendEmail.php are in the same directory, so the problem is not in the reference, I think. I even tried with absolute references, but the result is the same.
This form works on my localserver. Just not as a Wordpress template.
I was having the same problem with my styles.css. After googling it a bit, I solved it by replacing <link rel="stylesheet" type="text/css" href="style.css" media="screen"> with <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri();?>/style.css" media="screen">.
So, I guess the problem lies with how wordpress handles these things.
I am not very experienced with wordpress so, any help is appreciated.
Following on from a question I asked yesterday that I ended up finding a solution for, I've now run into another problem that I've been trying to solve with no luck.
I'm testing php files with XAMPP and in order to allow stylesheets in header.php to work everywhere, I used the following line in the header.php file.
<base href="http://localhost/folder-name-here/">
It works while I'm testing locally, however, I'm working on a site cleanup for someone else as practice (I'm a beginner) and I've already assumed that this won't work if the site is pushed to the server - the person I'm working with has also asked why I don't use something relative to the root.
I've seen various suggestions online, like using:
<base href="~/>
or
<base href="/">
but unfortunately, none of these are working.
Not sure of what else I could try at this point. Any ideas?
Instead of the base tag i would use $_SERVER['HTTP_HOST'], this returns the base url from your site (localhost) or when it is online the website (example.com).
I picked the link from your previous post and modified it.
<link rel="stylesheet" type="text/css" href="<?php echo $_SERVER['HTTP_HOST']; ?>/assets/sf.css"/>
Ofcourse if this is not working as you like you could also create a php variable for it that you modify
<?php
$baseUrl = 'localhost/folder';
$baseUrl = $_SERVER['HTTP_HOST'].'folder';
?>
<link rel="stylesheet" type="text/css" href="<?php echo baseUrl; ?>/assets/sf.css"/>
this way it is easy to adjust all the links at once when you deploy to a webserver
edit:
for when discussion chat room closes this was the solution that kinda worked,
<link rel="stylesheet" type="text/css" href="//<?php echo $_SERVER['HTTP_HOST']; ?>/kinderwunschpraxis_site/assets/sf.css"/>
I have a big prob. We have a site that was working just fine but I was doing some fine tuning and somewhere along the line i messed things up. possibly in the .htaccess file.
My problem is that my css style sheet doesn't load nor do my images. ahh! They are all there.
I emptied my .htaccess file and deleted my robots.txt just to eliminate any blocking but that didn't fix it.
I validated my css file with The W3C CSS Validation Service and it said:
file not found: http://easybuildingproducts.ca/www.easybuildingproducts.ca/style.css
I feel like it has something to do with the fact that the URL is duplicated. It does that now when i click a link to any of my pages. It should be either or not both those links together. Is it possible a google cached my .htaccess or robots.txt when there was a potential redirect error? Is there a loop happening somewhere?
I was in the midst of making a custom 404 error page when this all went down.
www.easybuildingproducts.ca
Easy fix
<link href="www.easybuildingproducts.castyles/inside.css" rel="stylesheet" type="text/css">
That needs to be either one of the following
<link href="/styles/inside.css" rel="stylesheet" type="text/css">
or
<link href="http://www.easybuildingproducts.ca/styles/inside.css" rel="stylesheet" type="text/css">
I looked at the actual website source to find this example. there are quite a lot like it
Change the href to "/style.css" instead of writing your full domain out. Do the same kind of thing for all other resources that failed to load, too.
This will fix your problem, and it will also make your markup compatible if you decide to migrate to a different dsomain name in the future.
Your resources aren't being loaded (css, js, jquery, etc). Take a look at the screenshot taken from my Chrome Dev Tools > Sources tab:
This is because of your resources' file paths. It is definitely not a good idea to reference all of your resources with "www." in the file path.
Change
<link href="www.easybuildingproducts.castyle.css" rel="stylesheet" type="text/css" />
into
<link href="/castyle.css" rel="stylesheet" type="text/css" />
In an attempt to learn a little bit about Facebook and their coding techniques, I've viewed their source code. Here is one thing that I found:
<link rel="stylesheet" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yN/r/JUrfX0ucXVq.css" />
<link rel="stylesheet" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y2/r/gpxPzqCou0g.css" />
<link rel="stylesheet" href="https://fbstatic-a.akamaihd.net/rsrc.php/v2/yD/r/OWwnO_yMqhK.css" />
My question is about how Facebook composes their directory structure & filenames. Obviously the css files weren't named for readability. Is there a reason behind these random filenames? Could someone provide any information about this? Thanks in advance.
The CSS files are given random filenames to prevent browsers from caching them.
When a browser caches a resource, it will download the file and keep it on the user's computer to prevent the same file from being downloaded multiple times. The problem is that if you change your CSS file and keep the filename the same, a browser will keep using the cached version of the file and won't download the updated version. By giving the CSS files unique names, browsers are forced to download them.
It's similar to doing this with your CSS files:
<link rel="stylesheet" href="style-v1.css" />
<link rel="stylesheet" href="style-v2.css" />
<link rel="stylesheet" href="style-v3.css" />
...