I'm new in Python/Django and I'm trying to create a little project. I'm running Python 3.8.2 and Django 3.0.6 on Ubuntu 20.04 LTS.
I'm still developing so I'm testing and running the webpages with "python manage.py runserver" (debug=True). I'm having a really hard time trying to load my own CSS style.
The project is organized like this:
PROJECT FOLDER
| --virtualenv
| --media
| --myproject
| --myapp
| --migrations
| --templates
| --myapp
| --static
| --favicon
| --style
| --vendor
| --bootstrap
| --jquery
| --templates
| --parcials
I have this configuration in my "settings.py" (which is inside "myproject" folder) related to the static files:
INSTALLED_APPS = [
...
'django.contrib.staticfiles',
...
]
STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(
BASE_DIR, '/myapp/static'), )
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
In the head of the html which is rendered, I have:
{% load static %}
...
<link href="{% static 'favicon/favicon.ico' %}" rel="shortcut icon">
<link href="{% static 'vendor/bootstrap/css/bootstrap.css' %}" rel="stylesheet">
<link href="{% static 'vendor/bootstrap/css/theme_1564087106285.css' %}" rel="stylesheet">
<link hrel="{% static 'style/index.css' %}" rel="stylesheet" type="text/css">
The "index.css" is inside the style folder and it has just a class selector:
.style-v1 {
font-size: x-large;
background-color: blue;
}
In the html body, I just try to test the css loading with:
<div class="style-v1">
CSS loading test
</div>
I don't know if I'm forgetting something or if there's something wrong, I'm still fresh in PYTHON/DJANGO/HTML/CSS, but the bootstrap works fine, as well as the favicon, and the "index.css" isn't loaded, which I checked at Network tab of Chrome dev tools.
I apolagize for any typo or if my description is not enough for understanding the problem utterly, I'm also new posting question in this community. I'm completely grateful if someone would give me a light to solve this problem.
My best regards!
EDIT: @Anoop K George, figure out the problem, it was a typo in the link attribute "href", apparently I didn't notice I typed "hrel".