Font awsome icons not showing - font-awesome

I am developing a webshop (www.kipos.nl). Since one day, suddenly the icons don't work any more.
I can see the cart in de header, but all the other icons are replaced with squares or with numbers.
The drop down arrows in de main menu are all numbers now.
I can't seem to fix this. I tried to add a line of code according to this tutorial,
but this unfortunately doesn't work either.
Gabriela

The reason is that the Divi ETmodules font cannot be loaded. When you check the network tab in the dev console you can see that the following URL is "forbidden", yet it is necessary for a correct rendering:
https://kipos.nl/wp-content/themes/Divi/core/admin/fonts/modules.ttf
Make sure your Divi WordPress theme is correctly installed, and the above file location is allowed access by the application server.
All this has little to do with programming, so please consult guides provided by Divi on how to verify the installation or redo it.

Related

Weird CSS behaviour in react production code

I'm developing a personal website using react and I'm facing a very werid issue.
I've developed this website using create-react-app and tested it using the npm start command and made sure that everything in my website runs exactly as I would imagine it would. During testing the website looks totally fine.
I've now built my website using npm run build but I'm finding that some of the CSS works while some does not. This happens despite all of my CSS being in a single file.
I should not that I'm not getting any errors in the developer tools in chrome at all or anything of that sort.
Here is an example of what I mean. The image below is taken when the website is run through npm start
However, after building the website and opening the index.html file, the following screenshot is obtained
As you can see the styling for all of the other components is present except the styling the for Contact Us title at the beginning. Other titles on the page seem to be okay but this title does not seem to have the styling in place at all.
Additionally, there are other parts of the page where the styling if off too in the built version despite it being fine during testing.
My code is on https://github.com/Lm7m/Lm7m_website and I would appreciate any help I can get on this issue.
apply like this in index.html
create variable before return and then assign to tag
let colorstyle={
color:black
}
<h1 style={colorstyle}></h1>

Wordpress drops file prefix after update

TL;DR - why does Wordpress remove file:// from file links?
Our intranet page has a section containing icons with links behind them. All of a sudden (our guess is after an update), one of the links stopped working. The link is as follows (1):
<img src="/img/meetings.jpg" style="width:75px; height:75px;"/>
The expected behaviour (in Internet Explorer (2)) is that the file explorer opens, and points to the share \vmdata\meetings, which has always worked up until now.
When I hover over the icon image I see the following code however:
http://vmdata/meetings
and when I check the HTML by viewing the source of the page, I see that the file:// prefix is indeed gone:
<a href="//vmdata/meetings" target="_blank" rel="noopener noreferrer">
To work around this issue, I had a look at a page on which the original creator had added the same type of links. My idea was to create a similar page, copy the HTML code on the page and link the icon to said page. I added the page and HTML link but after viewing the page, the result is exactly the same: the file:// prefix is gone.
My guess is that something within Wordpress is rewriting/removing the file:// link. My question now is twofold: how do I stop this rewriting/removing behaviour, and/or how can I add a link to a fileshare as before?
PS: the creator of the website is no longer available, and the website is running yet unmanaged. Only content creators are left. We have no Wordpress knowledge in house, so we're basically just trying to keep the site up and running (in wait for a new site).
(1) I realise that pointing to a server share from an intranet site is a very ugly way to publish files. However, as stated before, we're in a situation of if it ain't broke don't fix it with this website, so we just want to go back to a working situation. Creating a page to link to (hosted) documents would be a lot better, but is for various reasons not feasible.
(2) please don't bother pointing out NOT to use Internet Explorer (anymore), we all know that but we are stuck with it because it is a requirement for one of the major tools we all use everyday. As long as that tool doesn't support other browsers, we're stuck with IE (unfortunately).
I found another question regarding this issue: can't save network share path as a link in wordpress 3.1
Apparently the correct way to add an allowed protocol into WordPress is to modify the functions.php file and add the following code:
function allowed_link_protocols_filter($protocols)
{
$protocols[] = 'file';
return $protocols;
}
add_filter('kses_allowed_protocols', 'allowed_link_protocols_filter');
More information can be found in the following article: https://developer.wordpress.org/reference/hooks/kses_allowed_protocols/
Adding the code above solved the problem for me, so I hope this helps others to solve similar issues in the future.

PhpStorm: Save as Live Template does nothing

Trying to create a Live Template in PhpStorm by highlighting a block of text, going to Tools > Save as Live Template.
When I do this, nothing happens. The Live Template dialog does not open and there is no other indication of an error. I can manually open the Live Template menu and add one there.
Is there a setting or configuration that is needed for this to be enabled?
PhpStorm 2017.1.4 on Windows 10
You can turn a highlighted block into a live template, but you need to make sure that there is no leading whitespace in your selected text, or it won't do anything, as explained in the original question.
This is likely a bug, see the issue in the comments to track resolution.

Heroku/Node.js - Deploying does not load CSS?

I'm trying to deploy a site to Heroku using node.js, and I've run into a bit of an issue. When I run my site locally, it looks as I expected it to. However, once I deploy it to Heroku, it seems that it does not recognize the CSS file I have included, despite the fact that it is using the same exact files and file structure.
I have confirmed that my HTML and CSS code is syntactically correct, and that the CSS file is being pushed through Git. I made a commit by changing one thing in the CSS to make sure that it was being pushed (it did).
Here's how I access the CSS file:
<link rel="stylesheet" type="text/css" href="css/style.css">
Here is an image of how the website looks locally (left) and deployed on Heroku (right) using the same exact code (the black boxes are just from me obscuring some personal details).
Website Comparison
Does anyone know why Heroku refuses to use my CSS? I've been racking my brain for 2 days on this can can't figure it out.
I had the exact same problem, it happend I miss one character in my whole code. Let me explain
When I heroku opened my project no css loaded, but interestingly enough jquery was working fine and the css that jquery was getting from the css file was just fine. The css file was not the problem.
Then I found that the browser was blocking some
content.
If you tell the browser to read the blocked content anyways, it will show the page no problem, but it will show a https with a horrible red line crossing it, not an option. Then I checked what content the browser was blocking
(blocked content)
it was my bootstrap link.
So I was linking my bootstrap with http and not https.
I added that letter s and it is working fine now.

Some weebly features don't work when exporting to HTML and hosting on a different server

Recently I've been tasked with redesigning a website for the current company I'm working at. I've been using weebly to make the site, and then exporting the HTML to be re-hosted on the company's servers.
However, I've noticed that some functionality in weebly's code has stopped working. I imagine this might be due to weebly hosting some elements on their own servers, but this is merely a beginners best guess.
1. The picture for the logo on the banner does not appear once the HTML is rehosted
For comparison, here's the site while hosted on weebly:
http://mjmacoustique.weebly.com/
and the site on the company's servers:
http://www.mjm.qc.ca/redesign2015/
When weebly hosts, the ''MJM'' image should be on the top left and function as a return to home page button when clicked. However, when it's hosted on the company's server, the image is not found.
2. On Firefox, the background image of the home page is replaced with an all black background
When opened in firefox, it fails to load the background image of the main page.
Any help or solutions to these problems would be greatly appreciated.
Thanks.
I can help with question #1: the logo is hosted on weebly's servers, but in the html it's written in a shortcut method like this example: /uploads/2/6/8/5/26851316/1434298489.png"
the easy workaround would be to keep the weebly version of the site working, in in the html change the src value of the missing images to something like this http://mjmacoustique.weebly.com/uploads/2/6/8/5/26851316/1434298489.png
So you haveto add the http://YOURSITE.weebly.com before all the src values of your images.
otherwise, just load all the images you need on a blank page of the site on your servers, copy image urls of those and replace the urls in the html with that.
Hope that helps?
The firefox issue might also be solved if all your src values are linked correctly but I cannot be sure about that.
When I tried exporting a site from weebly, some assets were missing from the zip it produced. This resulted in some images failing to appear because they simply weren't there. I don't know how often this happens (or if it happens only for some sites), but weebly's export feature definitely seems to have bugs.
I worked around this by using wget to recursively fetch the content that weebly was hosting. Then I hand-copied the missing assets (and only the missing assets) from the directory structure saved by wget and merged them into the directory structure from weebly's export zip. This is time-consuming, but necessary since the directory structure fetched by wget includes dynamically-generated content (meta data for weebly's editor, assets with decorated names, etc) that you probably don't want in the content you host elsewhere.