Here is my folder hierarchy:
/flask_app_2
run.py
/main
__init__.py
/static
/js
/styles
styles.css
/templates
html_page.html
I am trying to add styles.css to my html_page but I keep getting a 404 error.
<link rel="stylesheet" type = "text/css" href="/static/style/style.css">
Am I loading it correctly? Or do I possibly have a typo in my CSS file?
You're missing an "s" from your path.
<link rel="stylesheet" type = "text/css" href="/static/style/style.css">
Should be
<link rel="stylesheet" type = "text/css" href="/static/styles/style.css">
so "/static/styleS/style.css" instead of "/static/style/style.css".
It looks like you forget an "s" on styles
try this
<link rel="stylesheet" type = "text/css" href="/static/styles/styles.css">
Related
Here is my main page, localhost:8000/helloworld/greeter at helloworld\templates\hello:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hello!</title>
{% load static%}
<link rel="stylesheet" type = "text/css" href = "{% static 'hello/site.css' %}" />
</head>
<body>
<span class="message">Hello there, {{ name }}!</span> It's {{ date | date:'l, d F, Y' }} at {{ date | time:'H:i:s' }}.
</body>
</html>
and here is the CSS file at helloworld\static\hello (so it should look for localhost:8000\helloworld\static\hello\site.css):
.message{
font-weight
color: blue;
}
and here is the file structure:
The expected behaviour would be that the phrase "Hello there, [name]" is bolded and in blue, but here is what the code actually yields: (this is the problem)
And looking within the console gives this error:
GET http://localhost:8000/static/hello/site.css net::ERR_ABORTED 404 (Not Found)
Notice how it seems to think that "static" is at the root directory, when it is in localhost\helloworld.
I would like to find a solution to this problem and change it so that it links to the correct directory
I tried to change the block, specifically:
<link rel="stylesheet" type = "text/css" href = "{% static 'hello/site.css' %}" />
to：
<link rel="stylesheet" type = "text/css" href = "{% 'helloworld/static/hello/site.css' %}" />
I expect that it will apply the site.css but it didn't and threw a TemplateSyntaxError.
The problem is fixed like so:
In the file settings.py, I changed the line to become STATIC_URL = '/helloworld/static/'
I have a html file like this:
<html class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<!-- main css -->
<link rel="stylesheet" href="../src/vendors/clarity-ui/css/clarity-ui.min.css">
<link rel="stylesheet" href="../src/scss/main.css">
</head>
I want to read html file for do that:
Extract name and path css or js file
Minify css or js
Copy to dist directory
Rename css or js path/name to new location and name
How to do that with Gulp and Gulp plugins?
Look at gulp-useref. It has a good example:
var gulp = require('gulp'),
useref = require('gulp-useref'),
gulpif = require('gulp-if'),
uglify = require('gulp-uglify'),
minifyCss = require('gulp-clean-css');
gulp.task('html', function () {
// I made a small change to gulp.src below
return gulp.src('./app/*.html')
.pipe(useref())
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', minifyCss()))
.pipe(gulp.dest('dist'));
});
[EDIT : Added your html]
<html class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link rel="stylesheet" href="../src/vendors/clarity-ui/css/clarity-ui.min.css">
<!-- build:css dist/css/main.css -->
<link rel="stylesheet" href="../src/scss/main.css">
<!-- endbuild -->
<!-- build:js ../dist/js/myJS.js -->
<script src="../src/js/myJS.js"></script>
<!-- endbuild -->
</head>
I assume you do not want to change the already minified vendor css. So there is no need to put a directive around it.
And useref will not concatenate the vendor css because it will not grab that asset since their is no build directive around it.
You can do something similar for your js files.
[EDIT : added folder structure.]
-[your working directory]
---[app]
-----test.html
---[src]
------[scss]
--------main.css
------[js]
--------myJS.js
-gulpfile.js
So the gulpfile.js is in your base working directory above the app and src folders.
Running gulp html from your working directory will create a 'dist' folder with your minified css and uglified js in it and your modified main.html.
I have run this on a test system with this folder structure and it works perfectly. Let me know if you still have problems.
I have a html file called myfile.html that displays 'Hello World'. My css file called myfile.css is used to insert background image. My bootstrap files are used to insert a image in the form of a circle.
The HTML file is as follows:
<!DOCTYPE html>
<html>
<head>
<title>MY FILE</title>
<link rel="stylesheet" type="text/css" href="public\css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="public\myfile.css">
</head>
<body>
<h1>Hello World!!</h1>
<img src="public\pinky.jpg" class="img-circle">
</body>
</html>
My CSS file is as follows:
body {
background-image: url('fishy.jpg');
}
My node.js file called new.js is as follows:
const express = require('express')
const app = express()
app.use(express.static('public'))
app.get('/',function (req,res) {
console.log(__dirname)
res.sendFile(__dirname+"/myfile.html")
})
app.listen(3000, function() {
console.log('Example app listening on port 3000!')
})
My main folder is called Bootsstrap and it has the following contents:
Bootsstrap
-myfile.html
-public /*Folder*/
/*inside public folder*/
-myfile.css
-css
-js
-fonts
-fishy.jpg /*background image*/
-pinky.jpg /*circular image*/
I open Command Prompt from Bootsstrap folder and run
node new.js
I get the message as:
'Example app listening on port 3000!'
When I open Chrome Browser and type localhost:3000, I get only 'Hello World'.The images are not getting displayed. I get an Error 404.
What can I do in order to run my HTML file in server using node.js by including all my css and bootstrap files?
You must not use the public path in your html. Also, in URLs use always forward slashes. Backslashes are just for Windows directories.
<!DOCTYPE html> <html> <head> <title>MY FILE</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="myfile.css">
</head> <body> <h1>Hello World!!</h1>
<img src="pinky.jpg" class="img-circle"> </body> </html>
replace
<link rel="stylesheet" type="text/css" href="public\css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="public\myfile.css">
by
<link rel="stylesheet" type="text/css" href="css\bootstrap.css">
<link rel="stylesheet" type="text/css" href="myfile.css">
If you want to serve static files, such as html files, css, images, you need to make them available for the public. In your existing setup, only myfile.html is available for the public. Since you use css and other files from your server, you need to make them available also. The best way to achieve is to create a public folder and let express to make all the files available in the public folder.
Add to node.js
app.use('/', express.static('public'));
and rename your myfile.html to index.html
and in your index.html file
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="myfile.css">
For example, your node.js should look like something
const express = require('express');
const app = express();
app.use('/', express.static('public'));
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
For more info Serving static files in Express
Edit
Your folder structure should be. no need of bootstap folder
public //public folder
-index.html
-myfile.css
-css
-js
-fonts
-fishy.jpg
-pinky.jpg
I have these css files included in layout
<!-- Dropdown Menu -->
<link rel="stylesheet" href="~/Content/superfish.css">
<!-- Date Picker -->
<link rel="stylesheet" href="~/Content/bootstrap-datepicker.min.css">
<!-- CS Select -->
<link rel="stylesheet" href="~/Content/cs-select.css">
<link rel="stylesheet" href="~/Content/cs-skin-border.css">
<!-- Themify Icons -->
<link rel="stylesheet" href="~/Content/themify-icons.css">
<!-- Flat Icon -->
<link rel="stylesheet" href="~/Content/flaticon.css">
<!-- Icomoon -->
<link rel="stylesheet" href="~/Content/icomoon.css">
<!-- Flexslider -->
<link rel="stylesheet" href="~/Content/flexslider.css">
<!-- Style -->
<link rel="stylesheet" href="~/Content/style.css">
now I want to move these files in bundle so I did that:
public static void RegisterBundler(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/Content/style.css").Include(
"~/Content/superfish.css",
"~/Content/bootstrap-datepicker.min.css",
"~/Content/cs-select.css",
"~/Content/cs-skin-border.css",
"~/Content/themify-icons.css",
"~/Content/flaticon.css",
"~/Content/icomoon.css",
"~/Content/flexslider.css",
"~/Content/style.css"
));
BundleTable.EnableOptimizations = true;
}
and in my layout:
#Styles.Render("~/Content/style.css")
but from this:
it goes to this:
some of css code is missing when i open this new css file (from browser developer tool). Especially whole first file is missing (superfish.css) but it is in the same folder as others
What did I wrong?
It might get confused and renders the actual style.css instead of the bundle. Try changing the name of the bundle to something else, i.e. new StyleBundle("~/Content/main.css"). Also, you probably using the render wrong - it should be #Styles.Render("~/Content/style") (note the removed .css part)
Bundling is a new feature in ASP.NET 4.5 that makes it easy to combine or bundle multiple files into a single file.
The Bundle class Include method takes an array of strings, where each string is a virtual path to resource.
Change your code like below:
Note : remove the file extension inside the StyleBundle()
public static void RegisterBundler(BundleCollection bundles)
{
//
bundles.Add(new StyleBundle("~/Content/style").Include(
"~/Content/superfish.css",
"~/Content/bootstrap-datepicker.min.css",
"~/Content/cs-select.css",
"~/Content/cs-skin-border.css",
"~/Content/themify-icons.css",
"~/Content/flaticon.css",
"~/Content/icomoon.css",
"~/Content/flexslider.css",
"~/Content/style.css"
));
BundleTable.EnableOptimizations = true;
}
In Layout: Call like below
#Styles.Render("~/Content/style")
Hope it was helpful
<head>
<title>Free Jokes!</title>
<meta charset="utf-8">
<style type = "text/css" src = "final project.css"></style>
</head>
I have a separate css file that is validated. But the main reason I think this isn't working is that when I validated the html, it says,"Attribute src not allowed on element style at this point."
Any suggestions? Thanks in advance!
Also any other syntax errors would be much appreciated...
replace
<style type = "text/css" src = "final project.css"></style>
with:
<link href="final project.css" rel="stylesheet">
have a look at this on how to include css : http://www.w3schools.com/css/css_howto.asp
<head>
<title>Free Jokes!</title>
<meta charset="utf-8" />
<link type="text/css" href="final project.css" rel="stylesheet" />
</head>
Link element uses "href" not "src"
try
<link rel="stylesheet" href="final project.css">
add only rel attribute:
<link type="text/css" href="final project.css" rel="stylesheet" />
and also avoid using space in file name.