I am trying to overide the default Django admin styles.
I created a new app 'theme', placed it before Django Admin in INSTALLED_APPS and it works. Then I copied over base_site from the Django GitHub repo under Admin. I then added a custom style sheet which I am unable to link to.
Here is what my 'theme' app looks like:
├── __init__.py
├── static
│ └── admin
│ └── css
│ └── ross.css
└── templates
└── admin
└── base_site.html
I cannot link to my stylesheet without getting a 404.
{% block extrastyle %}
<link rel="stylesheet" type="text/css" href="{% static "admin/css/ross.css" %}" />
{% endblock %}
What am I doing wrong?
Had to restart the Django dev server, then it worked...
Related
i'm new into django. I created a project named marketbook, it has a main templates directory and an app called users. Inside my app (users) i have templates folder as well with a file called login.html (templates/users/login.html.
I want to link this login.html in my app to a link in my file (navbar.html) in my main templates director folder. what should be the url tag to use?
Log In
In the settings.py file, the TEMPLATES variable is set to the field: 'DIRS': ['templates']. This is so that you can find the main home.html template, which is located in the templates folder, which is located in the folder where the application folder is, the manage.py module.
start the server: python manage.py runserve
go to: http://localhost:8000/users/home/
press the button and go to: http://localhost:8000/users/navbar/
urls.py (urls application)
from django.urls import path
from .views import home, navbar
urlpatterns = [
path('home/', home),
path('navbar/', navbar, name='navbar'),
]
views
from django.shortcuts import render
def home(request):
return render(request, "home.html")
def navbar(request):
return render(request, "users/navbar.html")
home.html
Log In
navbar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h2>This is a navbar template</h2>
</body>
</html>
CSS, JS, fonts, images and other assets are not being loaded into my django app index.html. All the assets for the app are present inside the application app in my django project under "templates/assets".
I have tried the other answer which I was getting as suggestion to this question but even that solution did not work for me.
[04/May/2022 05:48:50] "GET /assets/js/glightbox.min.js HTTP/1.1" 404 2311
Not Found: /assets/js/count-up.min.js
[04/May/2022 05:48:50] "GET /assets/js/count-up.min.js HTTP/1.1" 404 2308
Not Found: /assets/js/main.js
[04/May/2022 05:48:50] "GET /assets/js/main.js HTTP/1.1" 404 2284
Here is my dir tree structure :
Project Name : myproject
App name that serves index.html : app
├── app
│ ├── admin.py
│ ├── apps.py
│ ├── models.py
│ ├── templates
│ │ ├── 404.html
│ │ ├── assets
│ │ │ ├── css
│ │ │ │ ├── LineIcons.2.0.css
│ │ │ │ ├── animate.css
│ │ │ │ ├── bootstrap.min.css
│ │ │ │ ├── glightbox.min.css
│ │ │ │ ├── main.css
│ │ │ │ └── tiny-slider.css
│ │ │ ├── fonts
│ │ │ │ ├── LineIcons.eot
│ │ │ │ ├── LineIcons.svg
│ │ │ │ ├── LineIcons.ttf
│ │ │ │ ├── LineIcons.woff
│ │ │ │ └── LineIcons.woff2
│ │ │ ├── images
│ │ │ │ ├── favicon.svg
│ │ │ │ ├── hero
│ │ │ │ │ └── phone.png
│ │ │ │ └── logo
│ │ │ │ ├── logo.svg
│ │ │ │ └── white-logo.svg
│ │ │ ├── js
│ │ │ │ ├── bootstrap.min.js
│ │ │ │ ├── count-up.min.js
│ │ │ │ ├── glightbox.min.js
│ │ │ │ ├── main.js
│ │ │ │ ├── tiny-slider.js
│ │ │ │ └── wow.min.js
│ ├── tests.py
│ ├── urls.py
│ └── views.py
├── manage.py
└── myproject
├── asgi.py
├── settings.py
├── urls.py
└── wsgi.py
settings.py
STATIC_ROOT = os.path.join(BASE_DIR, '/templates/assets')
STATIC_URL = 'static/'
How do I resolve this?
index.html
<link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.svg" />
<!-- ========================= CSS here ========================= -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/css/LineIcons.2.0.css" />
<link rel="stylesheet" href="assets/css/animate.css" />
<link rel="stylesheet" href="assets/css/tiny-slider.css" />
<link rel="stylesheet" href="assets/css/glightbox.min.css" />
<link rel="stylesheet" href="assets/css/main.css" />
EDIT : As asked in comments, on changing the static path I get
[04/May/2022 06:33:36] "GET /static/css/bootstrap.min.css HTTP/1.1" 404 1929
[04/May/2022 06:33:36] "GET /static/css/animate.css HTTP/1.1" 404 1911
[04/May/2022 06:33:36] "GET /static/css/LineIcons.2.0.css HTTP/1.1" 404 1929
[04/May/2022 06:33:36] "GET /static/css/tiny-slider.css HTTP/1.1" 404 1923
[04/May/2022 06:33:36] "GET /static/css/main.css HTTP/1.1" 404 1902
[04/May/2022 06:33:36] "GET /static/css/glightbox.min.css HTTP/1.1" 404 1929
{% load static %}
<link rel="shortcut icon" type="image/x-icon" href="{% static 'assets/images/favicon.svg' %}" />
<!-- ========================= CSS here ========================= -->
<link rel="stylesheet" href="{% static 'assets/css/bootstrap.min.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/LineIcons.2.0.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/animate.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/tiny-slider.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/glightbox.min.css' %}" />
<link rel="stylesheet" href="{% static 'assets/css/main.css' %}" />
If you want to use static files, Write "{% load static %}" and {% static 'path' %}
setting.py
STATICFILES_DIRS = [
BASE_DIR / "static",
'/var/www/static/',
]
Add this code into settings.py file in the below. and After adding try to refresh the paga by using crt+shift+r shortcut. It hasppens to same problem i added the above code and refresh the page with shoutcut boom. It will worked for me
I have flask app with next structure:
templates/
dashboard.html
static/
css/
styles.css
js/
main.js
Dockerfile
app.py
In app.py I just have one endpoint to serve main page.
app.py:
from flask import Flask, render_template
app = Flask(__name__)
#app.route("/home")
def dashboard():
return render_template('dashboard.html')
if __name__ == '__main__':
app.run(debug=True)
dashboard.html:
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>...</body>
<script type="text/javascript" src="{{url_for('static', filename='js/main.js')}}"></script>
</body>
</html>
The app is hosted on AWS ECR+Fargate ( I am not the person who did devops side).
The app works, but static files (js and css) are not loaded, error 404. What could I miss?
Hello I'm learning flask and I want to insert an image. But the image is not correctly displayed: there is just an icon in the navigator.
I've tried to change the image extension from .png to .jpg but it doesn't change anything. I also tried to change navigator but it stills the same.
The python code:
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/<page_name>/')
def render_static(page_name):
return render_template(f'{page_name}.html')
if __name__ == "__main__":
app.run()
The html code:
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<img src="{{url_for('static', filename = 'image/Android_robot.png')}}" alt = "example" />
</body>
</html>
The image should be in static folder. Here is an example of how to use static image in Flask template.
Folder structure:
├── app.py
├── static
│ └── image
│ └── bitcoin.jpg
└── templates
└── image_example.html
app.py:
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/demo/<page_name>/')
def render_static(page_name):
return render_template('{page_name}.html'.format(page_name=page_name))
if __name__ == "__main__":
app.run(debug=True)
Template image_example.html:
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
</head>
<body>
<h2>Bitcoin image should be displayed underneath</h2>
<img height="500px" src="{{url_for('static', filename='image/bitcoin.jpg')}}" alt = "example" />
</body>
</html>
Output of the route http://127.0.0.1:5000/demo/image_example/:
how to serve Angular2 app using Django builtin webserver?
I think I'm having some problems with the template and static paths from django.
My django project structure looks like following:
DjangoDir/
manage.py
project/
settings.py
urls.py
app1/
app2/
static/
app2/
something.js
something.css
templates/
app2/
index.html
urls.py
views.py
I have an angular2 app with following index:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Angular2</title>
<base href="/">
<link href="something.css" rel="stylesheet"/>
</head>
<body>
<app-root></app-root><script type="text/javascript" src="something.js"></script>
</body>
</html>
I get HTTP Status 404 (Not Found) code for the something.js and something.css file. Any ideas?
Here is my views.py in app2.
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request, 'app2/index.html')
UPDATE
Working solution, but still looking for alternatives.
Adding to all internal links in the angular2 app:
"/static/app2/"
<!--e.g.:-->
<script type="text/javascript" src="/static/app2/something.js"></script>
or
<!--{% load static %}-->
<script type="text/javascript" src="{% static 'app2/something.js' %}"></script>"
How to avoid changing every link in template and static files just to make angular2 app work with django?
I think that the better way to deal with Django and Angular 2+ is to build an API. You may create an RESTful API with Django REST Framework or Tastypie. Then your Angular2 app would consume that API to create the user-facing experience. You can check django-rest-angular2-example.
However, you want to manage static files, you can read Managing static files