Trouble with CSS/Static Files

Vibhu Rishi

unread,

Apr 4, 2013, 3:49:11 AM4/4/13

to django...@googlegroups.com

I am not sure where I am going wrong, but the CSS files are just not getting picked up. I have just started a project and am using the dev server with the runserver command.

Here's my relevant settings.py :

STATIC_ROOT = os.path.join(os.path.dirname(__file__),'/static/')

STATIC_URL = '/static/'

My directory structure :

.

├── homepage

│ └── templates

│ └── homepage

├── qj

└── static

├── css

├── img

└── js

qj is where my settings.py file is.

static is where i have the css. I am using bootstrap css files. I want it to be at the top location as these files are going to be used in all the apps that i will be writing.

homepage is where i have the index page that I am trying to link the css to. the html is as follows :

$ cat homepage/templates/homepage/index.html

<!DOCTYPE html>

<html>

<head>

{% load static %}

<title>Hello World!</title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

I am trying both the {% static <url> %} and the hardcoded static/js to see if it is working. The following is the output i get on loading the / page:

[04/Apr/2013 12:23:38] "GET / HTTP/1.1" 200 413

[04/Apr/2013 12:23:38] "GET /static/css/bootstrap.min.css HTTP/1.1" 404 1667

[04/Apr/2013 12:23:38] "GET /static/js/bootstrap.min.js HTTP/1.1" 404 1661

It just is not picking up the css or the js file. What am I doing wrong ?

Regards,

Vibhu

Jacky Tedy

unread,

Apr 4, 2013, 9:03:57 AM4/4/13

to django...@googlegroups.com

it looks like you don't have the right template ! You sure you have the right path?

2013/4/4 Vibhu Rishi <vibhu...@gmail.com>

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.

Tom Evans

unread,

Apr 4, 2013, 9:54:22 AM4/4/13

to django...@googlegroups.com

On Thu, Apr 4, 2013 at 8:49 AM, Vibhu Rishi <vibhu...@gmail.com> wrote:
> I am not sure where I am going wrong, but the CSS files are just not getting
> picked up. I have just started a project and am using the dev server with
> the runserver command.
>
> Here's my relevant settings.py :
>
>
> STATIC_ROOT = os.path.join(os.path.dirname(__file__),'/static/')
> STATIC_URL = '/static/'
>
> My directory structure :
> .
> ├── homepage
> │ └── templates
> │ └── homepage
> ├── qj
> └── static
> ├── css
> ├── img
> └── js
>
> qj is where my settings.py file is.
> static is where i have the css.

You've told it to look in the wrong place:

>>> os.path.dirname('/path/to/project/qj/settings.py')
'/path/to/project/qj'
>>> os.path.join(os.path.dirname('/path/to/project/qj/settings.py'), 'static')
'/path/to/project/qj/static'

Try this instead:

STATIC_ROOT = os.path.normpath(os.path.join(os.path.dirname(__file__),
'..', '/static/'))

Cheers

Tom

Vibhu Rishi

unread,

Apr 4, 2013, 11:04:29 AM4/4/13

to django...@googlegroups.com

Hi Jack,

Template is fine as the Hello World is getting rendered correctly. I also get the 200 for /

Vibhu

--
Simplicity is the ultimate sophistication. - Leonardo da Vinci
Life is really simple, but we insist on making it complicated. - Confucius

Vibhu Rishi

unread,

Apr 4, 2013, 11:13:06 AM4/4/13

to django...@googlegroups.com

Thanks Tom, your post got me thinking ! If the problem was the pathing then using the absolute path should have worked. So , I put in

STATIC_ROOT="/home/vibhu/Programming/qj/static/"

But that still did not work - which means that I was still doing something wrong. Finally, it hit me - I was using the wrong variable (see comment copied below).

Instead of STATIC_ROOT , I should have been using STATICFILES_DIR

So, now my settings.py is as follows :

# Absolute path to the directory static files should be collected to.

# Don't put anything in this directory yourself; store your static files

# in apps' "static/" subdirectories and in STATICFILES_DIRS.

STATIC_ROOT=""

STATIC_URL = '/static/'

# Additional locations of static files

STATICFILES_DIRS = (

os.path.join(os.path.dirname(__file__),'../static/'),

)

And this is working ! Thanks for the tip for going up a directory else i would still be floundering !

Vibhu

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.

Vibhu Rishi

unread,

Apr 4, 2013, 11:33:13 PM4/4/13

to django...@googlegroups.com

Hi,

>Have you ran

>$ manage.py collectstatic

Can you explain why I need to do this on my dev machine when I am not deploying it to production ? If I look at the docs at https://docs.djangoproject.com/en/dev/howto/static-files/#deployment , it mentions that I need to run this to deploy it. However, the problem I was getting was on my local system.

Vibhu

On Fri, Apr 5, 2013 at 4:00 AM, CJ Milholland <cjm...@gmail.com> wrote:

Have you ran

$ manage.py collectstatic

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To post to this group, send email to django...@googlegroups.com.
Visit this group at http://groups.google.com/group/django-users?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.

Mike Dewhirst

unread,

Apr 5, 2013, 2:11:54 AM4/5/13

to django...@googlegroups.com

On 5/04/2013 2:33pm, Vibhu Rishi wrote:
> Hi,ï¿½
>
> >Have you ranï¿½

> >$ manage.py collectstatic
>
> Can you explain why I need to do this on my dev machine when I am not

> deploying it to production ? If I look at the docs atï¿½
> https://docs.djangoproject.com/en/dev/howto/static-files/#deploymentï¿½ ,

> it mentions that I need to run this to deploy it. However, the problem I

> was getting was on my local system.ï¿½

What might help is to add some print statements in your settings.py
These are some of mine ...

import os
import sys

if 'runserver' in sys.argv:
DEBUG = True

# This gets the name of the directory above the settings.py directory
# which is necessary if you follow the Django 1.4 guidelines
APP_ROOT = os.path.split(os.path.realpath(os.path.dirname(__file__)))[0]

STATICFILES_DIRS = (
os.path.join(APP_ROOT, 'static/'),
os.path.join(APP_ROOT, 'app_a/static/'),
os.path.join(APP_ROOT, 'app_b/static/'),
os.path.join(APP_ROOT, 'app_b/static/'),
)
if DEBUG:
i = 0
for item in STATICFILES_DIRS:
i += 1
print('STATICFILES_DIRS#%s = %s' % (i, item ))

You will get a constant reminder of where things are and if compare that
output with the location indicated in the html page source, you will be
able to diagnose the problem fairly easily.

Hth

Mike

>
>
> Vibhu
>
>
> On Fri, Apr 5, 2013 at 4:00 AM, CJ Milholland <cjm...@gmail.com

> <mailto:cjm...@gmail.com>> wrote:
>
> Have you ranï¿½

>
> $ manage.py collectstatic
>
> On Thursday, April 4, 2013 12:49:11 AM UTC-7, Vibhu Rishi wrote:
>
> I am not sure where I am going wrong, but the CSS files are just
> not getting picked up. I have just started a project and am

> using the dev server with the runserver command.ï¿½
>
> Here's my relevant settings.py :ï¿½
>
>
> STATIC_ROOT = os.path.join(os.path.dirname(____file__),'/static/')
> STATIC_URL = '/static/'
>
> My directory structure :ï¿½
> .
> â”œâ”€â”€ homepage
> â”‚ ï¿½ â””â”€â”€ templates
> â”‚ ï¿½ ï¿½ ï¿½ â””â”€â”€ homepage
> â”œâ”€â”€ qj
> â””â”€â”€ static
> ï¿½ ï¿½ â”œâ”€â”€ css
> ï¿½ ï¿½ â”œâ”€â”€ img
> ï¿½ ï¿½ â””â”€â”€ js
>
> qj is where my settings.py file is.ï¿½

> static is where i have the css. I am using bootstrap css files.
> I want it to be at the top location as these files are going to
> be used in all the apps that i will be writing.
> homepage is where i have the index page that I am trying to link

> the css to. the html is as follows :ï¿½
>
> $ cat homepage/templates/homepage/__index.htmlï¿½
>
> <!DOCTYPE html>
> <html>
> ï¿½ <head>
> ï¿½ {% load static %}
> ï¿½ ï¿½ <title>Hello World!</title>

> <meta name="viewport" content="width=device-width,
> initial-scale=1.0">
> 
> <link href="{% static 'css/bootstrap.min.css' %}"
> rel="stylesheet" media="screen">

> ï¿½ </head>
> ï¿½ <body>
> ï¿½ <h1>Hello World</h1>
> <script src="http://code.jquery.com/__jquery.js
> <http://code.jquery.com/jquery.js>"></script>
> ï¿½ ï¿½ <script src="static/js/bootstrap.min.__js"></script>
> ï¿½ </body>

> </html>
>
> I am trying both the {% static <url> %} and the hardcoded
> static/js to see if it is working. The following is the output i

> get on loading the / page:ï¿½

>
> [04/Apr/2013 12:23:38] "GET / HTTP/1.1" 200 413
> [04/Apr/2013 12:23:38] "GET /static/css/bootstrap.min.css

> HTTP/1.1" *404* 1667

> [04/Apr/2013 12:23:38] "GET /static/js/bootstrap.min.js

> HTTP/1.1" *404* 1661

>
> It just is not picking up the css or the js file. What am I

> doing wrong ?ï¿½

>
> Regards,
> Vibhu
>
> --
> You received this message because you are subscribed to the Google
> Groups "Django users" group.
> To unsubscribe from this group and stop receiving emails from it,
> send an email to django-users...@googlegroups.com

> <mailto:django-users%2Bunsu...@googlegroups.com>.

> To post to this group, send email to django...@googlegroups.com

> <mailto:django...@googlegroups.com>.

> Visit this group at http://groups.google.com/group/django-users?hl=en.
> For more options, visit https://groups.google.com/groups/opt_out.

> ï¿½
> ï¿½

Reply all

Reply to author

Forward