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.
Related
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" />
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.)
I am working on a website and while rendering an ejs file (index.ejs), only the html part is shown meanwhile the stylesheets and fonts and images are not shown.
The code to link the stylesheets is :
<!DOCTYPE html>
<html lang="en">
<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>PUBG Tournaments by Regal Gaming</title>
<!-- load stylesheets -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:100,300,400">
<!-- Google web font "Open Sans" -->
<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Bootstrap style -->
<link rel="stylesheet" href="css/magnific-popup.css">
<!-- Magnific pop up style -->
<link rel="stylesheet" href="css/templatemo-style.css">
I am using a template and i have kept the structure of the directory the same.
Meaning, the css, js, img and the fonts folder are in the same directory as the index.ejs file.
I figured out the answer.
Rendering the static files into an ejs template requires the files to be in public directory.
Added this to the server file:
app.use('/static', express.static(path.join(__dirname, 'public')))
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.
I'm creating a landing page for work using a html template, I've taken this template here (www.switchonbook.com) and am editing it for a different product.
Regardless of what I do the second CSS won't show. I have
-Tested the CSS and the HTML through testers online, no problems
-Tried changing the location of the files
-Compared the code to the original code of the landing page
Here is the code I am using for the new landing page;
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css? family=Open+Sans:300italic,400,300,600,700' rel='stylesheet'>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Switch On: Your DIY Toolkit</title>
<meta name="description" content="Switch On: Your DIY Toolkit">
<link rel="shortcut icon" href="http://www.ripeandready.com/wordpress/wp- content/uploads/2015/03/favicon.png" type="image/x-icon">
<link rel="icon" href="http://www.ripeandready.com/wordpress/wp-content/uploads/2015/03/favicon.png" type="image/x-icon">
<link href="http://switchonbook.com/css/styles.min.css" rel="stylesheet">
<link href="http://switchonbook.com/css/main.css" rel="stylesheet" >
</head>
<body>
Any help would be greatly appreciated!
There are a few errors in your code. For instance, here:
http://fonts.googleapis.com/css? family=Open+Sans:300italic,400,300,600,700
There should not be spaces after the ?. Similarly, there should not be a space here after the -:
http://www.ripeandready.com/wordpress/wp- content/uploads/2015/03/favicon.png
Also, you do not have closing </body> and </html> tags.