Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Python

Max Pinomaa
Max Pinomaa
2,647 Points
Posted by Max Pinomaa
Max Pinomaa
2,647 Points

CSS is not working (Django Basics)

Hi, I'm doing the project on my Mac computer, but the CSS is not working. "Welcome!" is visible. I've checked all the other similar posts. I've triple-checked all of the files that were changed in the video. What am I doing wrong?

Here is my settings file:

"""
Django settings for learning_site project.

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

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

For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.11/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/1.11/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '2_*mid6q&ev8+mk@27-2ml32mkr78@xg$%(9)6c!nfqit#+t5x'

# 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',
    'courses',
]

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 = 'learning_site.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['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 = 'learning_site.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 = 'Europe/Helsinki'

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, 'assets'),
]

Here is my learning_site/urls.py:

from django.conf.urls import url, include
from django.contrib import admin
from django.contrib.staticfiles.urls import staticfiles_urlpatterns

from . import views

urlpatterns = [
    url(r'^courses/', include('courses.urls')),
    url(r'^admin/', admin.site.urls),
    url(r'^$', views.hello_world),
]

urlpatterns += staticfiles_urlpatterns()

Here's the layout.html:

{% load static from staticfiles %}
<!doctype html>
<html>
    <head>
        <title>{% block title %}{% endblock %}</title>
        <link rel="stylesheet" href="{% static 'css/layout.css' %}">
    </head>
    <body>
        <div class="site-container">
            {% block content %}{% endblock %}
        </div>
    </body>
</html>

EDIT. Below I will add the CSS file. I tried to change the colour of the h1 to make it more clear to see if the css was working, but it doesn't change.

html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

.site-container {
  max-width: 68em;
  margin-left: auto;
  margin-right: auto; }
  .site-container::after {
    clear: both;
    content: "";
    display: table; }
  .site-container nav {
    width: 100%;
    display: table;
    width: 100%;
    table-layout: fixed;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #642039;
    margin-bottom: 1em;
    overflow: hidden; }
    .site-container nav a {
      display: table-cell;
      width: 8.33333%;
      padding: 10px;
      border-bottom: 2px solid #642039;
      color: #e6557e;
      letter-spacing: 0.075em;
      line-height: 60px;
      text-align: center;
      text-decoration: none; }
      .site-container nav a:hover {
        background: #6d3753;
        border-bottom: 2px solid #642039;
        color: white; }

.cards {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  -o-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-pack: justify; }

.card {
  -webkit-flex-basis: 15em;
  -moz-flex-basis: 15em;
  flex-basis: 15em;
  -ms-flex-preferred-size: 15em;
  -webkit-flex-grow: 1;
  -moz-flex-grow: 1;
  flex-grow: 1;
  -ms-flex-positive: 1;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  background-color: #f6f6f6;
  border-radius: 3px;
  border: 1px solid gainsboro;
  box-shadow: 0 2px 4px #e6e6e6;
  margin: 0 1em 1.5em 1em;
  position: relative; }
  .card header {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    background-color: #f6f6f6;
    border-bottom: 1px solid gainsboro;
    border-radius: 3px 3px 0 0;
    font-weight: bold;
    line-height: 1.5em;
    padding: 0.5em 0.75em; }
    .card header a {
      color: #642039;
      text-decoration: none; }
      .card header a:hover {
        text-decoration: underline; }
  .card .card-copy {
    font-size: 0.9em;
    line-height: 1.5em;
    padding: 0.75em 0.75em; }
    .card .card-copy p {
      margin: 0 0 0.75em; }

article h2 a,
article h3 a {
  color: #642039;
  text-decoration: none; }
  article h2 a:hover,
  article h3 a:hover {
    text-decoration: underline; }
article .steps {
  border-top: 2px solid #e6557e; }
  article .steps h3 + p {
    margin-left: 1em; }

h1 {
  color: green;
}

/*# sourceMappingURL=layout.css.map */

4 Answers

Henrik Christensen
seal-mask
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points
Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

The problem is in your folder structure.

In the settings you told django to look for static files (i.e. css-files) in a folder named assets.

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'assets'),  # Here you tell django to look for a folder named 'assets'
]

the structure should be:

assets -> css -> layout.css :-)

Max Pinomaa
Max Pinomaa
2,647 Points
Max Pinomaa
Max Pinomaa
2,647 Points

Thanks a lot! Now it works. :)

Henrik Christensen
seal-mask
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points
Henrik Christensen
.a{fill-rule:evenodd;}techdegree
Henrik Christensen
Python Web Development Techdegree Student 38,322 Points

How is your folder structure looking?

Not sure if this is your problem, but try change the urls.py to this:

from django.conf.urls import url, include
from django.contrib import admin

from . import views

urlpatterns = [
    url(r'^courses/', include('courses.urls')),
    url(r'^admin/', admin.site.urls),
    url(r'^$', views.hello_world),
]
Ryan S
Ryan S
27,276 Points
Ryan S
Ryan S
27,276 Points

Hi Max,

The CSS in this part of the course often causes some confusion because the styling depends on your browser width.

The only thing that is being applied at this stage is a fixed width to the container div. There aren't any margins or anything applied to the "Welcome" text itself.

If I recall correctly it is around 68em, so if your browser width is less than that, there will be no noticeable change in the placement of the text. It should hug the left side of the screen.

Once you expand your browser (or view it on a larger screen), you'll see that an auto margin will appear as soon as you go past 68em (1088px).

If this isn't your issue, then in addition to what Henrik Christensen suggested with checking your folder structure, a good place to start debugging would be either in the terminal or using your browser's developer tools to see if you are getting any 404's with the stylesheet.

Hope this helps.

Max Pinomaa
Max Pinomaa
2,647 Points
Max Pinomaa
Max Pinomaa
2,647 Points

Thanks a lot for your answers. Changing the url didn't make the css visible.

I added the css file to the question.

Here is the folder structure. Hope I can copy paste it:

learning_site
├── courses
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-35.pyc
│   │   ├── admin.cpython-35.pyc
│   │   ├── models.cpython-35.pyc
│   │   ├── urls.cpython-35.pyc
│   │   └── views.cpython-35.pyc
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   ├── 0001_initial.py
│   │   ├── __init__.py
│   │   └── __pycache__
│   │       ├── 0001_initial.cpython-35.pyc
│   │       └── __init__.cpython-35.pyc
│   ├── models.py
│   ├── templates
│   │   └── courses
│   │       └── course_list.html
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── css
│   └── layout.css
├── db.sqlite3
├── learning_site
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-35.pyc
│   │   ├── settings.cpython-35.pyc
│   │   ├── urls.cpython-35.pyc
│   │   ├── views.cpython-35.pyc
│   │   └── wsgi.cpython-35.pyc
│   ├── settings.py
│   ├── urls.py
│   ├── views.py
│   └── wsgi.py
├── manage.py
└── templates
    ├── home.html
    └── layout.html
harrison page
harrison page
2,374 Points

hey very late reply but you need to add an assets directory on the same layer as your courses, learning_site and templates. As stated in your settings file under the static section- STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'assets'), ]

its looking to find static in the assets directory from the BASE_DIR(tory)