how to add css, js, image in django?

Question

I created the CSS file inside the static

static
     css
        resume.css

In setting.py, I didn't change any static code.

I called the index.html file in the view.py

Whenever I called the resume.css file from the index.html. It is not working but when I inspect the code, it is showing the right path to resume.css. I am not getting any errors whenever I run the code. so, I couldn't figure out the issue

Here is the HTML code:

<!DOCTYPE html>
<html lang="en">

<head>
    <title> resume</title>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/resume.css' %}">
</head>

<body>
    <header class="w3-hide-small main-header">
        <h1 class=" header"> welcome to my page </h1>
    </header>
    <header class="w3-show-small w3-hide-medium w3-hide-large main-header">
        <h1 class="w3-center header-for-small"> welcome to <br/>my page </h1>
    </header>
</body>

</html>

Here is the CSS code:

.main-header{
     background-color: antiquewhite;
}
 .header{
     margin-top: 0px;
     margin-left: 50px;
     font-size: 25px;
     text-transform: uppercase;
     color: blue;
     text-shadow: 2px 2px;
     padding: 15px;
     margin-bottom: 0px;
}
 .header-for-small{
     margin-top: 0px;
     font-size: 20px;
     font-weight:bold;
     text-transform: uppercase;
     color: blue;
     padding: 15px;
     font-family: fontawesome;
     margin-bottom: 0px;
}

view.py

def index(request):
    return render(request, 'Web/index.html')

this url.py is created by python

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('Web.urls'))
]

this url.py is created by me in the project or app

urlpatterns = [
    path('', views.index, name='index'),
]

score 0 · Answer 1 · answered Dec 20 '19 at 02:23

0

In settings make sure you have these entries.

settings.py

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_DIR = os.path.join(BASE_DIR,"static")

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    STATIC_DIR,
]

On top of your html code, load first the static files using this:

<!DOCTYPE html>
{% load staticfiles %}

To access the image use this in your html files:

<img src={%static "images/pic.jpg" %} />

answered Dec 20 '19 at 02:23

LOrD_ARaGOrN

3,884
3
27
49

python doesn't provide the staticfiles library anymore. Python only provides the static library now. I used the load static but it didn't work out – Magar Te Dec 20 '19 at 02:36
@MagarTe hope you created static folder under parent folder of project directory and included settings.py entries as shown above. – LOrD_ARaGOrN Dec 20 '19 at 02:48
Oh, I created a static folder inside the app or project folder. hold on, let me move static folder to parent folder – Magar Te Dec 20 '19 at 02:55
Oh, I was just poking around and I found the issue. – Magar Te Dec 20 '19 at 03:08
Whats the issue, directory structure? – LOrD_ARaGOrN Dec 20 '19 at 03:11
I had to add the exact path in static which is in the setting.py – Magar Te Dec 20 '19 at 03:22

how to add css, js, image in django?

1 Answers1