I've spent an hour and a half reading other posts about this issue and still haven't solved it. I believe the file is in the right place and the file path reference is the appropriate one. I'm testing my web application locally trying to style it up a bit and chrome dev tools is saying that the CSS file cannot be found. I'm using Python, Google App Engine and Jinja2. Check out the error for yourself if you'd like. Thanks in advance for your time and expertise!
Here are my HTML files. The second one inherits from the first one.
base.html
<!DOCTYPE html>
<html>
<head>
<title>Chores</title>
<link rel="stylesheet" href="static/style.css" type="text/css" />
</head>
<body>
<a href="/" class="main-title">
Chores
</a>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>
front.html
{% extends "base.html" %}
{% block content %}
<br>
<br>
Do Chore
+ Add Chore
- Remove Chore
Chore Details
<br>
<br>
<br>
{% for chore in chores %}
{{ chore.render() | safe }}
<br><br>
{% endfor %}
{% endblock %}
My project directory is structured like...
project-name/
main.py
templates/
HTML files
static/
style.css
Here's my app.yaml...
application: chorestimemadison
version: 1
runtime: python27
api_version: 1
threadsafe: yes
handlers:
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
- url: .*
script: main.app
libraries:
- name: webapp2
version: "2.5.2"
- name: jinja2
version: latest
You're missing a handler for the static directory:
handlers:
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
- url: /static
static_dir: static
- url: .*
script: main.app
Learn more about why this is necessary.
I'm betting you're having an issue with directory access. If your HTML files are under the templates folder and your templates folder is the location that's being served as http://chorestimemadison.appspot.com/, then the HTML files cannot access the static folder (or the CSS files therein) no matter what URL you use because they're not part of the web server's directory structure.
You'll have to either:
Move the static folder into the templates folder.
Change the root directory of your web server to be project-name instead of templates and change the reference to style.css to ../static/style.css.
As your css and html files are in paralel folders you first need to back off 1 directory with "../" and then type your css path like so
<link rel="stylesheet" href="../static/style.css" type="text/css" />
The way you typed, it's looking for your css in templates/static, because tempalates is your current folder (where the html executes)
Use "./" instead of "/". It helps to get the current directory.
In your case, the code should be:
<link rel="stylesheet" href="./static/style.css" type="text/css" />
Related
I have the following code in my skeleton layout.
{% if page.customcss%}
<link rel="stylesheet" href="{{page.customcss}}">
{% endif %}
And in pages I mention the customcss in the frontmatter like this:
---
layout: skeleton
customcss:
- 'assets/css/something.css'
---
This works for normal pages but for blog posts, jekyll generates then in a different directory and can't access the css and js files:
_site
-2021/1/1
-blog.html
-assets
-css
-something.css
-js
-x.js
for js files I've solved it with %link in the skeleton.html layout file:
<script src="{% link /assets/js/mirai.js %}"></script>
But it doesn't work for css files:
<link rel="stylesheet" href="{% link {{page.customcss}} %}">
`render': Could not find document 'assets/css/something.css' in tag
'link'. (ArgumentError) Make sure the document exists and the path is
correct.
I assume jekyll doesn't like the nested {{}}.
Is there a way to keep page.customcss while allowing usage in blogposts? I do not want to make a separate skeleton.html for blog posts.
Or am I doing something wrong here?
I found this within literal minutes. Keeping the ques up if it helps somebody:
Jekyll doesn't apply CSS to posts on GitHub Pages
basically, paths are not relative if is starts with /.
Ex:/assets/css/something.css
No need for %url.
I started a new project in symfony. I'm very new to it, but I followed all the instructions from symfony's documentation for the installation:
/* assets/styles/app.css */
body {
background-color: rgb(177, 44, 44);
}
h1{
color: red;
}
h2{
color:purple;
border: 1px solid black;
}
{% extends 'base.html.twig' %}
{% block body %}
<h1> Bienvenue à tous </h1>
<h2> Bienvenue 2 </h2>
{% endblock %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{% block title %}Welcome!{% endblock %}</title>
{# Run `composer require symfony/webpack-encore-bundle`
and uncomment the following Encore helpers to start using Symfony UX #}
<link rel="stylesheet" href="assets\styles\app.css" type="text/css">
{% block stylesheets %}
{#{{ encore_entry_link_tags('app') }}#}
{% endblock %}
{% block javascripts %}
{#{{ encore_entry_script_tags('app') }}#}
{% endblock %}
</head>
<body>
<div class="container">
{% block body %}{% endblock %}
</div>
</body>
</html>
[enter image description here][1] set up. I downloaded webpack-encore-bundle package with yarn package manager. I think that my () is well placed, but my html file can't find the path to my css.
here are my files
[1]: https://i.stack.imgur.com/RA9FJ.png
my network browser console tell me this "net::ERR_ABORTED 404 (Not Found)"
With Webpack Encore
You should not write your <link>-tag yourself and instead use the commented encore_entry_link_tags instead. The encore_entry_link_tags will make sure it points to the file generated by Webpack Encore (after calling yarn encore dev for example).
When you use Webpack Encore use the webpack.config.yaml to point to your CSS in assets using addEntry('app', ...file..) (or possibly addStyleEntry, but addEntry should be fine). Webpack Encore takes the file under assets/styles/app.css and then puts it in public/ by default public/build. Depending on your configuration it might be, that your file name will not stay the same during that process. The good thing is Webpack Encore usually takes care of everything for you. (If not feel free to open a question for that).
See also: https://symfony.com/doc/current/frontend/encore/simple-example.html
When not using Webpack Encore
You should use forward slashes, e.g. assets/styles/app.css. If you don't use Webpack Encore then you should make sure that you have the file in public/assets/styles/app.css to make it accessible for your browser. You should also wrap this into another helper function called asset. In other words it should look something like (assuming the path is correct):
<link rel="stylesheet" href="{{ path('assets/styles/app.css') }}" type="text/css">
What this will do is make sure that your path is relative to the document root (your public/-directory) instead of relative to the url. This is important, because otherwise your path will not have the same result depending on whether you are for example on https:/example.com vs. https://example.com/blog, because it will look for your css in different places (either public/assets/styles/app.css or public/blog/assets/styles/app.css).
I have a CSS file style.css stored in a CSS folder and tried using <link rel="stylesheet" type="text/css" href="style.css"> to link it into the HTML file. I got a 404 not found error from this and am not sure what I am doing wrong.
Below is the code (there is not much at the moment):
{% extends "base.html" %}
{% block body %}
<div class="MainBody">
<link rel="stylesheet" type="text/css" href="style.css">
<div class="w3-container w3-padding-32 w3-hide-small center-align">
<h1>About Us</h1>
</div>
</div>
{% endblock %}
This shows the full path of style.css within the project
Please let me know what is being done incorrectly.
Actually, you answered your own question:
I have a CSS file style.css stored in a CSS folder
Your href attribute should look something like: href="/css/style.css"
The href should should have the path where the file is located along the file name not only the file name.
Example :
<link rel="stylesheet" type="text/css" href="./css/style.css">
we use "./" to search in the current folder.
we use "../" If you want to come back from the current folder.
Try this:
In the href, would you not leave the first / off? I thought that would go to a root folder. Try and eliminate that first slash and see what happens. As was said, the 404 is because it's looking in the wrong place.
I see this is a structure of a Flask app. In Flask, the CSS files and other assets should by default be stored in the static directory which should be directly inside your home directory.
Your file structure should look like this:
TSAWeb_App
|__ templates
|__ index.html
|__ static
|__ CSS
|__ style.css
Then you to access it inside the web app, first import url_for method
from flask import Flask, url_for
Then you can refer to CSS file as:
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='CSS/style.css') }}">
Then when the app is run, the href tag will have the correct value set
UPDATE: If you're using Django, see this doc
Configuring static files
Make sure that django.contrib.staticfiles is included in your
INSTALLED_APPS.
In your settings file, define STATIC_URL, for example:
STATIC_URL = '/static/'
In your templates, use the static template tag
to build the URL for the given relative path using the configured
STATICFILES_STORAGE.
{% load static %}
<img src="{% static "my_app/example.jpg" %}" alt="My image">
Store your static files in a folder called static in your app.
For example my_app/static/my_app/example.jpg.
I'm trying to follow Symfony best practices with keeping general assets stored directly in the /web root. I am trying to set a background image in css which is not loading.
Folder Structure.
web
assets
css
style.css
images
image.jpg
I'm including the style.css file via assetic. I've installed assets with assets:install web --symlink command. I've also tried the assetic:dump command.
#div {
background: url("../images/image.jpg");
}
{% stylesheets filter='cssrewrite'
'assets/css/style.css'
%}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}"/>
{% endstylesheets %}
I'm trying to import css file inside twig file using assetic.
{% stylesheets 'bundles/sfeuser/css/bootstrap.css' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" type="text/css" />
{% endstylesheets %}
when I load the page. it was only HTML without style
and when I checked the css file. I found out that it contains HTML content of the page loaded.
In the security.yml file I forgot to remove a firewall with authentification that was applied on the whole application.
That's why when the browser tries to access the CSS file it gets redirected to the login page. Therefore the HTML content of the login page was found in the CSS file.