XAMPP not loading CSS files - html

I am running Ubuntu on a VM.
I installed XAMPP.
htdocs is the root directory.
File in question: htdocs/index.php
CSS Directories: htdocs/css/, htdocs/lib/
When I enter "https://localhost/home/index.php" in the search bar, only the html loads.
I have ran XAMPP on Windows for over a year and never had any problems.
I have tried several solutions already online and none of them have made any difference.
htdocs/index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Favicons -->
<link href="img/favicon.png" rel="icon">
<link href="img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i|Montserrat:300,400,500,700" rel="stylesheet">
<!-- Bootstrap CSS File -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Libraries CSS Files -->
<link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="lib/animate/animate.min.css" rel="stylesheet">
<link href="lib/ionicons/css/ionicons.min.css" rel="stylesheet">
<link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
<link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">
<!-- Main Stylesheet File -->
<link href="css/style.css" rel="stylesheet">
<!-- =======================================================
Theme Name: Template
Theme URL: https://bootstrapmade.com/bizpage-bootstrap-business-template/
Author: BootstrapMade.com
License: https://bootstrapmade.com/license/
======================================================= -->
</head>
<body>
This is such a petty issue. Any help would be appreciated.

Have you tryed to reset your Browser Cache?
Shortcut for that is SHIFT + F5

You may be using browser caching? Maybe just try a hard refresh CTRL+F5 (Sorry if this is obvious but try it out)
OR
You can Use this while linking Css:
<link href="style.css?<?=filemtime("style.css")?>" rel="stylesheet" type="text/css" />

Related

Failed to load resource (Not Found) (Internal Server Error) after uploading website on server

PROBLEM SOLVED BY DELETING ALL THE FILES ON THE SERVER AND UPLOADING AGAIN MY WEBSITE!
Screenshot of the console error
Hi,
my website looks fine when I open it offline on my browser but after having uploaded it on the server when I go to the web address it only shows the text and images without any formatting and CSS.
I don't know what to do to fix this :\ What could be the problem?
If it can be of help here is the current folder structure of my website:
"public_html" >
css, img, js, mail, scss, vendor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta name="description" content="">
<meta name="author" content="">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>website title</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="css/agency-edit.min.css" rel="stylesheet" type="text/css">
<link href="css/adjustment.css" rel="stylesheet" type="text/css">
</head>
And here some scripts that are at the end of the "body".
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Contact form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom scripts for this template -->
<script src="js/agency.min.js"></script>
Thank you
In your case, it can be:
Uncorrect relative location (your css and other files are not found by code, check paths of included files)
Files are not uploaded to server (try to upload them again)
I bet if you put a slash / in front of all of your local paths, things will magically work for you.
Explanation:
vendor/ looks in the current folder for the "vendor" folder.
/vendor/ looks in the root of the site.
../vendor/ looks in the parent of my current folder.
./vendor/ looks "here". (Side note: This is more useful within the server itself when files are referenced by other files in another location for server-side processing.)

Unable to link CSS to website after Deployment

I bought a template online, and edited some of the HTML. I use x10Hosting for free server and domain name. The website is deployed;
http://www.wizerwish.x10host.com
However, the CSS is not recognised or executed no matter what path I write in the index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Unishop | Universal E-Commerce Template
</title>
<!-- SEO Meta Tags-->
<meta name="description" content="Unishop - Universal E-Commerce Template">
<meta name="keywords" content="shop, e-commerce, modern, flat style, responsive, online store, business, mobile, blog, bootstrap 4, html5, css3, jquery, js, gallery, slider, touch, creative, clean">
<meta name="author" content="Rokaux">
<!-- Mobile Specific Meta Tag-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Favicon and Apple Icons-->
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-retina.png">
<!-- Vendor Styles including: Bootstrap, Font Icons, Plugins, etc.-->
<link rel="stylesheet" media="screen" href="css/vendor.min.css">
<!-- THIS IS WHERE THE CSS FILES ARE -->
<link id="mainStyles" rel="stylesheet" media="screen"
href="css/styles.min.css">
<link id="mainStyles" rel="stylesheet" media="screen"
href="css/styles.css">
<!-- Modernizr-->
<script src="js/modernizr.min.js"></script>
</head>
That is the html. The CSS folder path is as follows, starting from the desktop;
template-1/dist/css/
NOTE: the template-1 folder is on the desktop.
I have even copied and pasted the CSS files in the same folder (dist) where the html and other file are. But it is still not working.
I accessed your css file and got it working by removing the css & js path. all files are in same path. so no need of path extension.

How to link customized bootstrap into index.html file?

I am new to bootstrap (just started learning) and I have recently customized my bootstrap file on http://getbootstrap.com/docs/3.3/customize/
i compiled and downloaded and then i find it hard to link it with my index.html file. Source of bootstrap files is on local drive and in my code it looks like this
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="desc">
<meta name="keywords" content="content">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" >
<link rel="stylesheet" href="css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<title>TITLE</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/bootstrap.min.js"/>
</body>
</html>
pls help :)
If you are new to Bootstrap, the first thing you should do is use the latest version (ie. Bootstrap 4.0).
A good way to kickstart your project is to use CDN, Bootstrap files are hosted in remote server so you don't have to manage Bootstrap files locally. https://getbootstrap.com/docs/4.0/getting-started/download/#bootstrapcdn
Check the console in your browser to be sure everything is correctly loaded.
To include your custom css, just put in head your css like you would do with any html page.
<head>
<link rel="stylesheet" type="text/css" href="custom_main.css">
</head>

Index.html file CSS loading error

I just pushed a website live, and it's only loading "raw HTML." I've been troubleshooting on this for a few hours, and can't seem to work out why.
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" type="image/ico" href="http://www.example.com/favicon.ico"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Example</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/freelancer.min.css" rel="stylesheet">
Any help would be much appreciated.
You are doing it right, the problem is that CSS files are residing in different folders. It is an advisable practice to create a CSS folder in the root of your site containing all the CSS files, something like that:
Then you just need to slightly modify your link elements in the header:
<!-- Bootstrap Core CSS -->
<link href="css/vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/freelancer.min.css" rel="stylesheet">
And so you could keep adding more CSS files if needed.
I hope it was helpful!
Please double check the location of you css
if you put it in separate folder, you might want to use something like this
<link rel="stylesheet" type="text/css" href="../min/freelancer.min.css">
if its just in the same folder as your index.html
<link rel="stylesheet" type="text/css" href="freelancer.min.css">
now if you put in a separate folder with you index.html file
<link rel="stylesheet" type="text/css" href="min/freelancer.min.css">
just take note that "../" makes you go back one folder from the current location of your index
Problem solved. I had to combine all of the files into .index.html
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Theme CSS -->
<link href="css/freelancer.min.css" rel="stylesheet" type="text/css">
Type is required please check with type.

Attempting to include font-awesome without CDN

Before I being I just want to say I did research this question, and I saw this post and followed the top answer's instruction but still nothing.
Okay here is a picture of my directory:
The fonts folder is just the regular fonts folder that comes with the font-awesome download. I then put the css file that came with font-awesome under css/font-awesome as shown below:
Here is a picture of my HTML code:
Here's my HTML Code:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tinyone</title>
<!-- CSS -->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet" >
<link href="css/font-awesome/font-awesome.min.css">
<!-- jQuery/JS/Fonts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
</head>
I must be missing something, if anybody has any ideas could you please share them?
Thank you so much for reading, it's greatly appreciated.
The paths were all correct, but I forgot to include the rel="stylesheet" attribute to font-awesome <link>.
Thank you to RompePC for pointing this out to me.