Reputation: 25

Css file not linking with project in django

I want to link css file with my django project. I've tried various methods but its not reflecting any changes in html page. I'm new to this, any help will be appreciated.

This my html code :

{% extends 'base.html' %}
{% load static %}

<link rel="stylesheet" href="{% static 'css/custom.css'%}" 
type="text/css">


{% block content %}


<form class="form-signin">
<div class="text-center mb-4">


    {% csrf_token %}
    <ul>{{shipper_data_object.first_name}}</ul>
    <ul>{{shipper_data_object.last_name}}</ul>



<div class="checkbox mb-3">
    <label>
        <input type="checkbox" value="remember-me"> Remember me
    </label>
</div>

<button class="btn btn-lg btn-primary btn-block" 
type="submit">Sign in</button>
{% endblock %}


<p class="mt-5 mb-3 text-muted text-center">© 2017-2019</p>
</div>
</form>

This is my views.py:

def shipper_login(request):
shipper_data_object = shipper_form(request.POST)
if request.method == "POST" and shipper_data_object.is_valid():

    shipper_data_object.shipper_ID = shipper_data_object.cleaned_data['shipper_ID']
    shipper_data_object.last_name = shipper_data_object.cleaned_data['last_name']
    shipper_data_object.first_name = shipper_data_object.cleaned_data['first_name']
    shipper_data_object.contact = shipper_data_object.cleaned_data['contact']
    shipper_data_object.comapany_name = shipper_data_object.cleaned_data['comapany_name']
    shipper_data_object.gst_pin_or_pan = shipper_data_object.cleaned_data['gst_pin_or_pan']
    shipper_data_object.origin = shipper_data_object.cleaned_data['origin']
    shipper_data_object.destinations = shipper_data_object.cleaned_data['destinations']

    shipper_data_object.save()
shipper_data_object = shipper_form()
# supplier_data_object = auction.suppliers.views.suppliers_form

# if supplier_data_object.operational_cities == shipper_data_object.origin or supplier_data_object.operatioal_cities == shipper_data_object.destinations:
#     return HttpResponse("found match!!")
# else:
#     return HttpResponse("match not found!!")

return render(request, 'shipper_details.html', {'shipper_data_object': shipper_data_object})

This is my base.html:

{% load static %}
<link rel="stylesheet" href="{% static 'css/custom.css'%}" 
type="text/css">
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" 

<meta charset="UTF-8">
<title>Title</title>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data- 
toggle="collapse" data-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown" aria- 
expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr- 
only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" 
id="navbarDropdownMenuLink" role="button"
                   data-toggle="dropdown" aria-haspopup="true" 
aria-expanded="false">
                    Dropdown link
                </a>
                <div class="dropdown-menu" aria- 
labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another 
action</a>
                    <a class="dropdown-item" href="#">Something 
else here</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

</head>


<body>
{% block content %}
{% endblock %}
</body>

In this code I've kept my custom.css file under auction/auction/static/css/custom.css

Here is my settings.py file:

STATIC_URL = '/static/'

STATIC_DIRS = 'static'

PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')

add on : I can navigate to custom.css through chrome's inspect element and it is showing that there but changes are still not reflecting in adding any css into it. enter image description here

Upvotes: 0

Answers (4)

Niladry Kar

Reputation: 1203

Try this in your settings.py file:

STATIC_URL = '/static/'
PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))

STATICFILES_DIRS = [
os.path.join(PROJECT_DIR, "static"),
]

STATIC_ROOT = STATICFILES_DIRS

In your main urls.py:

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Then run python manage.py collectstatic

And make sure to add css and js file in your base.html.

Upvotes: 0

Ahmed Wagdi

Reputation: 4371

as c.grey said on his answer, you should add the STATIC_URL AND STATIC_ROOT to your settings.py file.

But as your static URL is /static/ with a slash in the opening. you may also need to change the line in your HTML

From : <link rel="stylesheet" href="{% static 'css/custom.css'%}"

To: <link rel="stylesheet" href="/{% static 'css/custom.css'%}"

with adding an opening slash before it.

Also, make sure to include the CSS file only in base.html not both base.html and yourfile.html

Upvotes: 0

Roklobster

Reputation: 63

Try running python manage.py collectstatic

Django may be looking at your deployed static files.

https://docs.djangoproject.com/en/2.1/howto/static-files/#deployment

Upvotes: 0

rahul.m

Reputation: 5854

try this

in settings.py

PROJECT_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATIC_ROOT = PROJECT_DIR + '/static/'

in main urls.py

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

for more details refer this

Upvotes: 1

Css file not linking with project in django

Answers (4)

Related Questions