Reputation: 33

Django CSS File Not Working/Not being served

I cannot figure out why my css file is not working. I added my css, html and settings.py files. Can anyone help? I've tried collectstatic but get an error:

FileNotFoundError: [WinError 3] The system cannot find the path specified: 'D:\\mysite\\dreamboard\\static\\dreamboard\\style.css'

I tried replacing my path in the STATICFILES_DIRS but it still does not work. I'm not sure what to do. It could be the bootstrap? Or something. I want to have a style sheet so I can my form to a popup button. Everything is titled and spelled correctly. Any ideas?

Here are my files:

{% load static %}




<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% load crispy_forms_tags %}

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




    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <script src="https://kit.fontawesome.com/73cead4581.js" crossorigin="anonymous"></script>

    <title>Hello, world!</title>
  </head>
  <body class="bg-light">
    <h1>Hello, world!</h1>

    <div class="container">
  <div class="row bg-dark">
    <div class=" col-sm">
      <h1 style="color:white">Dreamboard</h1>
    </div>
    <div class="col-sm">


          <button class="btn-lg btn-primary" type="submit">Add Dream</button>
      </div>
    </div>
  </div>
</div>



<form class="" action="" method="post" autocomplete="off">
    {% csrf_token %}
  <div class="row">
      <div class="col-md-6">
          {{form.first_name|as_crispy_field}}
      </div>
      <div class="col-md-6">
          {{form.last_name|as_crispy_field}}
      </div>
  </div>
  {{form.dreamItem|as_crispy_field}}
  <br>
  <button type="submit" class="d-grid gap-2 col-12 btn btn-success">Submit</button>

</form>


    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>

css

.body {
  background-color: blue;
}

.title {
  color: blue;
}

settings.py

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


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

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'wpx1d9%a4(9-c%+$=or6ez+9*d7&)lo!d5(8cu3##3votm)!72'

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

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'dreamboard',
    'crispy_forms',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

CRISPY_TEMPLATE_PACK = 'bootstrap4'

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 = 'mysite.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 = 'mysite.wsgi.application'


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

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql',
        'NAME': 'dreams',
        'USER': 'postgres',
        'PASSWORD': 'password',
        'HOST': '127.0.0.1',
        'PORT': '5432',
    }
}


# Password validation
# https://docs.djangoproject.com/en/3.1/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.1/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.1/howto/static-files/

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    "/mysite/dreamboard/static/dreamboard/style.css",
]

Upvotes: 0

Answers (2)

Cade Heck

Reputation: 1

You have named your class "bg-light", but in your css code it looks like you are trying to target a class in your css file named "body" when you don't have a class name body. If you are tying to access the body tag which it looks like your trying to do then you have to get rid of the "." you have in your ".body{}". You have also done the same thing for your title tag which is ".title". Your not targeting what you think your trying to target.

#Your HTML Code
<body class="bg-light"> 
 


#Your css code >>> pay close attention to the "."

.body {
    background-color: blue;
}

Try This:

body{
  background-color: blue;
   }

title{
 background-color:blue;  
 }

Upvotes: 0

SANGEETH SUBRAMONIAM

Reputation: 1086

I am not sure because I don't think many people use an absolute path to connect to static files. Try creating a new folder named "static", In the same folder where you have the manage.py file. and add this into your settings.py.

BASE_DIR = Path(__file__).resolve().parent.parent
STATIC_DIR = os.path.join(BASE_DIR,"static")

check the settings.py code here

Add the below code directing django to the static file location

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

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

Now link it in the HTML using ,

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

(create a folder called css inside the static folder in your base directory)

Upvotes: 3

Django CSS File Not Working/Not being served

Answers (2)

Related Questions