0

My CSS is not rendering on any of my HTML pages in a Django project. I have followed a few Stack solutions to no avail, including adding <link rel="stylesheet" href="{% static "styles.css" %}" type="text/css" media="screen" /> as described here: Django static files (css) not working and also changing that to <link rel="stylesheet" href="{% static 'style.css' %}" />, suggested here: Unable to Apply CSS on my HTML file Django

Currently my HTML file called inbox.html looks like:

{% extends "mail/layout.html" %}
{% load static %}
<link rel="stylesheet" href="{% static 'styles.css' %}" />

{% block body %}
<div id="inbox-view">
        <h3>Inbox</h3>
            <button id="show-email-row" class="btn default"> email row </button>
            <button 
            class="btn default">Default</button>
</div>


{% endblock %}

{% block script %}
    <script src="{% static 'mail/inbox.js' %}"></script>
{% endblock %}

And my css file called styles.css, which is in a folder called '''static''' looks like this:

textarea {
    min-height: 400px;
}

.btn {
    border: 2px solid black;
    background-color: white;
    color: black;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
  }

  /* Gray */
  .default {
    border-color: #e7e7e7;
    color: black;
  }
  
  .default:hover {
    background: #e7e7e7;
  }

Ideally, the button will change color on hover, and have a dark background.

Edit

Showing my urls.py:

from django.urls import path

from . import views

urlpatterns = [
    path("", views.index, name="index"),
    path("login", views.login_view, name="login"),
    path("logout", views.logout_view, name="logout"),
    path("register", views.register, name="register"),

    # API Routes
    path("emails", views.compose, name="compose"),
    path("emails/<int:email_id>", views.email, name="email"),
    path("emails/<str:mailbox>", views.mailbox, name="mailbox"),
]

My other urls.py page in the parent folder looks like this:

from django.contrib import admin
from django.urls import include, path

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

And here is setting.py:

"""
Django settings for project3 project.

Generated by 'django-admin startproject' using Django 3.0.2.

For more information on this file, see
https://docs.djangoproject.com/en/3.0/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/3.0/ref/settings/
"""

import os

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


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.0/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '05$4$3aew(8ywondz$g!k4m779pbvn9)euj0zp7-ae*x@4pxr+'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'project3',
    'mail',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'project3.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'project3.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.0/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}

AUTH_USER_MODEL = 'mail.User'
DEFAULT_AUTO_FIELD = 'django.db.models.AutoField'
# Password validation
# https://docs.djangoproject.com/en/3.0/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/3.0/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_URL = '/static/'
5
  • Do you have a particular configuration for urls of your application? Commented Jul 18, 2021 at 15:39
  • 1
    Thanks @SetHack. Just added that to the post Commented Jul 18, 2021 at 15:42
  • Inspect html rendered in browser and check url Commented Jul 18, 2021 at 16:04
  • Please read the instructions here: docs.djangoproject.com/en/dev/howto/static-files Commented Jul 18, 2021 at 16:10
  • can you share your settings.py file? Commented Jul 18, 2021 at 16:47

1 Answer 1

1

If you are using gunicorn to run the server, it wont server the file, you'll have to use nginx routing to serve the static files.

If you are using python manage.py runserver you might want to set the variable STATICFILES_DIRS = (os.path.join(BASE_DIR, 'locationOfStaticFolderInYourAppFolder'),) in your settings.py. or set STATIC_DIR=os.path.join(BASE_DIR, 'locationOfStaticFolderInYourAppFolder'). For me when i ran into this issue, STATICFILES_DIR worked for me and not STATIC_DIR i still havent been able to figure out why so you can give both a try.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.