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.
Related
I am writing a web app with Flask in Python and I want to style my HTML pages with CSS but I can't manage to create a link between HTML and CSS. I've tried several times to move some files and folders and to use other means but nothing has worked.
Here is my directory:
App (folder):
- main.py
- website (folder)
__init__.py, auth.py, models.py, views.py
- static (folder) -> styling.css (inside)
- templates (folder) -> base.html, home.html (inside)
In my 'base.html' template, I've written:
<script
type="text/css"
src="{{ url_for('static', filename='styling.css') }}"
></script>
But it doesn't work (when I click on the link in VSCode, it tells me that the file doesn't exist (it searches in the template folder). Do anyone see any error please?
You are using wrong tag for including css file. You have to use link tag.
<link rel="stylesheet" href="{{ url_for('static', filename='styling.css') }}">
Edit:
Another problem after including the file is that browsers save cache and sometime doesn't pick up changed static files.
For that you to hard reload or sometime clear cache.
Here is a article for major browsers on how to hard reload.
To see different options of reloading, open inspect tab and right click on reload button at side of search bar.
not familiar with Python, but in HTML you have to import the css with the <link/> tag
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../static/styling.css"> //relative link to the css
</head>
<body>
</body>
</html>
reference: https://www.w3schools.com/css/css_howto.asp
I hope it works
Do you have a <head> section in your base.html file?
It should look like this...
<head>
<link rel="stylesheet" href="{{ url_for('static', filename='styling.css') }}">
</head>
<body>
<!--Your Body Content Here -->
</body>
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 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 am trying to set a background image and some CSS style to my page, but every attempt I tried seems to have no effect:
i have a base.hmtl page where I load {% load staticfiles %}
in settings.py I have set up STATIC_URL = '/static/' and STATICFILES_DIR = [os.path.join(BASE_DIR, 'webapp/static')]
In setting.py 'django.contrib.staticfiles' is under installed apps
the CSS folder is located in the main directory under static, and the image is as well under static/img
here is how i am trying to load this page:
{% extends 'base.html' %}
{% block content %}
<h1>Welcome!</h1>
{%load staticfiles%}
<img src="{% static '/img/background.jpg'%}"/>
{% endblock %}
While in my base.html I load my stylesheet in this way:
<link rel="stylesheet" href="{% static 'webapp/CSS/style.css'%}">
and as well in base.html I load statifiles
I attach here my folder structure, maybe I have missed something there:
I noticed Google Chrome was keeping displaying me a cached version of my page, I had to delete Google Chrome cache with settings --> advanced --> clear browsing data.
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 %}