CODEWITHSUNDEEP
htmlcssdjangodjango-templates
Ibo
Ibo

Reputation: 4319

CSS file is not loaded

I have a simple Django app and I cannot figure out why my CSS file is not loaded. Any help to nail the problem is appreciated!

The error that I am getting is this:

GET http://127.0.0.1:8000/static/aztracker/css/mystyle.css net::ERR_ABORTED

This is where my css file is sitting: myproject/aztracker/static/aztracker/css/mystyle.css

code_search_form.html:

{% load staticfiles %}
{% load static %}
<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>Search Code</title>
    <!-- CUSTOM STYLES -->
    <link rel="stylesheet" type="text/css" href="{% static 'aztracker/css/mystyle.css' %}">
</head>
<body>
    <form method="POST" action="/search/">
        {% csrf_token %}
        <input  type="text" maxlength="2"  style="text-transform:uppercase"  placeholder="Search Country Code.." name="cc_textfield" id="cc_input">
        <button type="submit" id="search_btn">Search</button>
    </form>
</body>

mystyle.css:

#search_btn {
    color:red;
}

setting.py:

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
    '/aztracker/static/',
]

Upvotes: 0

Views: 10973

Answers (2)

Ibo
Ibo

Reputation: 4319

I figured it out myself:

the problems was the setting.py file where static folder is defined. I commented out STATIC_ROOT and it worked. I guess they cannot co-exist.

Upvotes: 3

BatchWizard
BatchWizard

Reputation: 9

I am not the smartest when it comes to HTML but I know a few things. This may not change much but I can tell you how I do my linking.

<link href="css/CSS.css" rel="stylesheet" type"text/css" />

This is all I have done with my files so far, but I haven't ever tried to make a huge one. This works but everything, including the "% Static" I have never added to mine. Again I hope this helps but I don't know if it will change anything.

C:\Users\(User)\Desktop\Web\(ProjectName)\css\CSS

It Depends on where your HTML file is set in your project. Say I have this file structure.

C:\Users\(User)\Desktop\Web\Projects\HTMLProject\CSS\MainCSS\CSS.css

If your CSS file is in the MainCSS folder, but the HTML file is in your HTMLProject file, you would need to do this instead.

<link href="CSS/MainCSS/CSS.css" rel="stylesheet" type"text/css" />

The more subfolders you have the more you need to explain to your computer how to get there.

Upvotes: 0

Related Questions