coder666
coder666

Reputation: 41

Django is not rendering CSS

I'm having trouble doing an signup page with Django. I wanted to know how to put the form page with the models and have it inserted into the database. I have the index.html and I would like to connnect it with the models. Meaning, when i hit submit it will take all the data to the database. Any help would be appreciated. I'm new to Django. Thank you!

views.py

# -*- coding: utf-8 -*-
from __future__ import unicode_literals

from django.shortcuts import render

from django.contrib.auth import login, authenticate
from django.contrib.auth.forms import UserCreationForm
from django.shortcuts import render, redirect

#from . import views
# Create your views here.

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

def signup(request):
    if request.method == 'POST':
        form = UserCreationForm(request.POST)
        if form.is_valid():
            form.save()
            username = form.cleaned_data.get('username')
            raw_password = form.cleaned_data.get('password1')
            user = authenticate(username=username, password=raw_password)
            login(request, user)
            return redirect('home')
        else:
            form = UserCreationForm()
        return render(request, 'signup.html', {'form': form})

settings.py

Django settings for mysite project.

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


import os


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/1.11/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '*o7vg-hqbcx9bqh6fcg^daw21(#2bb8ik14-^02e!nus*y##&c'

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

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    '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 = 'mysite.urls'

TEMPLATES = [
    { #['./website/static'],
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['./website/templates'],
        '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/1.11/ref/settings/#databases

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


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

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "website", "static"),
)

signup.html

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Login</title>
    <link rel="stylesheet" href="signin.css">
  </head>


<body>
</div>
<div class='login'>
  <div class='login_title'>
    <span>Sign Up</span>
  </div>
  <div class='login_fields'>
    <div class='login_fields__user'>
      <div class='icon'>
        <img src='http://d2nysvt2e2u12u.cloudfront.net/img/NPLwebsite17_header_mobile_accountBtn.png?v=34534534'>
      </div>

      <input placeholder='Username' type='text'>
        <div class='validation'>
          <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/tick.png'>
        </div>
      </input>
    </div>

    <div class='login_fields__password'>
      <div class='icon'>
        <img src='http://upload.wikimedia.org/wikipedia/commons/9/9e/Lock_icon.png'>
      </div>
      <input placeholder='Password' type='password'>
      <div class='validation'>
          </div>

    </div>
    <div class='login_fields__submit'>
      <input type='submit' value='Submit'>



<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

    <script  src="signin.js"></script>

</body>
</html>

urls.py

from django.conf.urls import url

from . import views
#from django.contrib.auth.views import views as auth
urlpatterns = [
    url(r'^$', views.index, name='index'),


      ]

Upvotes: 0

Views: 1315

Answers (1)

Marcel
Marcel

Reputation: 72

As I understand your question, you have problems to load the css file. Your problem might be that you have not loaded your static files before referencing them. In Django you also have to reference differently than when using solely html.

I have only revised your html file but if this is the only problem these changes should make it work.

If it does not work let me know.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Login</title>

    {% load staticfiles %}
    <link rel="stylesheet" href={% static 'signin.css' %}>
  </head>

Upvotes: 1

Related Questions