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">
Related
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.
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.
I downloaded the minified version of bootstrap and put it in the root directory of my project. Then in a HTML file in /views/ I added:
<link rel="stylesheet" href="/bootstrap.min.css">
However, the page continued to look the same because Bootstrap styles weren't added. I know I can use a CDN, I did and it worked, but for now I want to try including it locally. I tried to similarly include Semantic-UI but it didn't work too. What am I doing wrong?
I think I figured it out. Assuming that you have your stylesheet in /public then you have to add this line to your application file (usually app.js):
app.use(express.static(path.join(__dirname, 'public')));
From now on you can link to your stylesheets from anywhere in the project using this code:
<link rel="stylesheet" href="/bootstrap.min.css">
Note that we no longer have to specify the full path, which is "/public/bootstrap.min.css" - we omit the "/public" (in fact href="/public/bootstrap.min.css" would be an error).
If anybody reading this can explain why the first line is necessary please comment below. I believe I understand what it does but why the Express creators insisted on doing it that way i.e. why can't I <link> to my local files normally is what I don't get.
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?
My pages in pretty basic html hold styling when kept in the root folder. Created a new folder for a group, but when I move pages to that folder they seem to lose connection to the css file.
Thought the problem might be the link since it now had to move up one folder. So I changed this:
link href="assets/css/readable/bootstrap.css" rel="stylesheet"
To this:
link href="http://www.example.com/assets/css/readable/bootstrap.css" rel="stylesheet"
but that changed nothing. Still page works fine in root folder, but not in /new folder.
Thank you for pointing out the basic premise I could be missing.
link href="/assets/css/readable/bootstrap.css" rel="stylesheet"
Add a / at the beginning of the path to refer to the Document Root instead of using a relative path.