When I run the pagespeed test of Google with my website, it tells me to optimize the CSS delivery.
I checked a lot of websites, tried to combine my CSS files into one and deregistered the wp_enqueue_styles handles. My new CSS file loaded when I tested, but the website was void of CSS . (I deregistered files like Bootstrap and FontAwesome).
It seems that it did not load the CSS of my new file, although I copied and pasted exactly what was in the old CSS files.
For information, I am using the Beaver Builder Child Theme and plugin. I created a folder includes/css in the root directory of my website in which I placed the new CSS file. This new file I loaded in header.php.
I followed exactly the steps described here.
Could someone help me with the steps to resolve this?
Did you link the CSS file you created in the page in question?
Something like this in your head:
<link rel="stylesheet" href="/mynewcss.css" />
Also, if you have a test page set up, I can tell you exactly what you need to do.
Related
I am facing a problem in loading CSS in my app made using express. I have done all the necessary things
correctly like using express.static() to server static file and I know this because when I open view source page and tap on the CSS link I get redirect to my CSS file and it is the same as what I have written so I can't understand why my CSS is not working.
the code is used for serving static files (I use it for css only)
app.use(express.static(__dirname + '/public'))
my CSS link in ejs template
<link rel="stylesheet" type="css" href="css/loginstyle.css">
NOTE: If the question is unclear then sorry I am new to StackOverflow and I know title is a little bit misleading but StackOverflow would not let me post question so I had to change the tittle
Icons not showing , So I've this problem.
I'm using some weather icons provided by erikflowers on github.
They are working and showing up fine when I've opened my app through the live server extension in Visual Studio Code. However, when I open my index.html manually from the folder, they are showing up as blank squares.
Anyone have any clue why this might be?
Thanks in advance
EDIT:
Directory:
<link rel="stylesheet" href="./weather-icons-wind.css">
<link rel="stylesheet" href="./weather-icons.css">
I did try changing to ./ no help
It says it can't find the files but they are there
Your pathing is wrong. As u wrote by urself in a comment -
"To use the Weather Icons, place the main CSS files in your CSS directory, and the font files in a "font" directory on the same folder level as the CSS director. Once you've done that, all you need to do to reference an icon in your HTML is type ""<i class="wi wi-night-sleet""> "
You dont have a CSS directory.
Also look at your console error.
The route is wrong.. your Project Name is missing.
"../JavaScript/Projects/fonts/weather..", where is your Folder "Weather API"?
I would suggest to create a CSS folder (your styles.css stays in the project root), with your icon stylesheet files in it. That should fix your problems.
How are you accessing those icons? CDN? Or do you have them stored locally in some separate folder? Also, share your index.html and folder structure.
For example, you have them in a folder called icons, say a file called cloud.png. Then there are 2 ways to access them in your HTML file:
Using icons/cloud.png
Using ./icons/cloud.png
Both of these approaches work in Live Server, but sometimes we have to use the 2nd one when opening index.html directly or when hosting on Github Pages.
So try both of them and see which one works for you.
I'm on Debian Jessie, 32bit, editing with gEdit and trying to get BootStrap to work without an internet connexion. I went to getbootstrap.com/getting-started, downloaded the files from the left-most button, extracted the various folders (js, css, fonts) into a folder named bootstrap.
I also created custom.css in the css folder and threw in a line
#qlksjhdf { color:#FF0000;}
Within this folder, I created an HTML file. Then I copied some code from a working example. When I use the CDN links, all works fine, as expected, but when I replace the CDN with local linking such as "css/bootstrap.css", the styling disappears, although the H1 styling in "css/custom.css" works.
Do I need to "install" something or wouldn't just downloading and linking the files suffice ? And yes, I've also downloaded jQuery and linked it locally...
Are you sure that you're using the right file path for the Bootstrap resources. If you put everything in a folder called bootstrap, you should be able to link the css file like this from your index.html:
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
Double check the path you are using to reference the bootstrap files. That is most likely the issue. If everything looks fine, can you add some code to the example or create a JS fiddle with the code you are working with?
So i was doing some basic formating to my html page using CSS, and when i ran it on netbeans nothing happened. I double checked the <link> on my html page and it was correct.
So kind of confused now I went to the folder where netbeans project is saved and copied the files to a new folder on the desktop. I made the same edits on my css file using notepad++, and then ran my index.html file (double clicked and it opened with browser) and viola, changes i made appeared. Has anyone else experienced this encounter? Why will it not work on netbeans? Am i missing a plugin or something?
The CSS file first need to be listed on the directory tree on the left side of Netbeans. If its not there, the program won't run the css file that you're trying to include in the html.
It'll also help if you put the
your_css.CSS
In a sub folder... e.g. Folder Name: CSS
and then have your CSS file in there.
Then you should have this to link the css to the HTML document
<link type="text/css" rel="stylesheet" href="directory/css.css">
There are two stylesheets for Wordpress theme - Trending:
style.dev.css (30kB) uncompressed ( „dev” means it’s for development).
style.css (23kB) compressed.
Doesn’t matter which file I change in many variations and upload through FTP it doesn’t work! That means layout takes no changes. Edited CSS, uploaded to the server but no change is taken.
Tried out many ways –
1.edited „style.dev.css”, loaded it to the server (don’t work), then renamed to „style.css” (still don’t work).
2.after editing „style.dev.css” compressed it and then loaded to the server (don’t work), then renamed to „style.css” (still don’t work).
when both are on server, server chooses the dev version „style.dev.css”, when I delete it, server jumps to „style.css”.
tried to edit one of them and then send to server (there is still no chage in layout).
Please someone give me a hint where the problem could be?
I have no idea where the problem could be, searched for a solution like for 2 days already.
Link to my site on which I'm working
At the moment your site is pointing to
<link rel="stylesheet" href="http://cfs-gometzlaville.fr/cfs/wp-content/themes/trending/style.css" type="text/css" media="all"> for its style, to replace the stylesheet you will need to rename the updated / modifed sheet AFTER you have named the orignal style.css to something like style_orig.css and then change the name of the updated / modifed file to style.css. Once you have done that you will need to reset the cache from any caching plugins that you use. If this still doesn't work clear your browser cache.
EDIT
If i change the style.css in the websites HTML to style.dev.css changes are made.
As an alternative maybe you should look at Child Theme's here as this will be much more manageable for you. All you will have to do is follow the instructions on the link and then copy and paste the css from your dev.css into the child themes css and it will override the parent styles.
The website is currently referencing style.dev.css, which doesn't exist. It could be a problem with some caching plugin.
Read this page