Using template language in CSS files correctly

Question

I'm attempting to serve a CSS file through my url.py file so I can use template tags in my CSS.

Here's my code.

Base.html:

<head>
...
<link rel="stylesheet" type="text/css" href="/site_media/css/wideTitle.css" />

urls.py:

(r'^site_media/css/wideTitle.css','lightbearers.views.viewWideTitle'),

views.py:

def viewWideTitle(request):
    contentListAbout = About.objects.filter(Q(startDate__lte=datetime.now())).order_by('-startDate')
    if len(contentListAbout) > 0:
        contentAbout = contentListAbout[0]
    else:
        contentAbout = None
    ...
    return render_to_response('wideTitle.css', {'contentAbout':contentAbout, ...},
                              context_instance=RequestContext(request))

settings.py:

TEMPLATE_DIRS = (
    os.path.join(PROJECT_PARENT, "templates"),
    os.path.join(PROJECT_PARENT, "media/css"),
)

wideTitle.css (in /media/css):

#wideTitle{
    clear:both;
    height:180px;
    padding-left:0px;
    background: url({{ contentAbout.headerImage.url }}) no-repeat top left;
}

I can access the CSS file by entering its URL in my browser, but the Base.html isn't reading it at all. I think I've got everything decent; I've looked here and here for tips. Anyone have ideas?

which version of django are you using? don't you need to collect all static file in a separate folder for access in django? have you tried including the css style in templates instead of calling it through link tags? — Priyeshj
– Priyeshj, Commented Feb 14, 2012 at 22:58
@Priyeshj: the CSS file here isn’t a static file, it’s a Django template. — Paul D. Waite
– Paul D. Waite, Commented Feb 14, 2012 at 23:00
It's not a great idea to serve static media through Django - you should leave that up to your web server. Instead why not have a template block in your base template that allows you to insert custom CSS in your templates that can be compressed at the top level — Timmy O'Mahony
– Timmy O'Mahony, Commented Feb 14, 2012 at 23:00
ok, inline css is a bad thing but this looks worse! please use an img tag (somehow) or set style="background:url()" in the template file :) — Tommaso Barbugli
– Tommaso Barbugli, Commented Feb 14, 2012 at 23:06

Community · Accepted Answer · 2017-05-23 11:58:46Z

2

Is the generated stylesheet being served with the correct mime type? If not, the browser might not interpret it as CSS.

I can’t remember if render_to_response accepts content_type='text/css as an argument, but there is a way to set it if Django isn’t already using the correct mime type.

Edit: as @TommasoBarbugli pointed out, you want the mimetype argument for render_to_response.

(Firefox’s Firebug add-on, or the Web Inspector in Chrome/Safari, should be able to show you the stylesheet’s mime type.)

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Feb 14, 2012 at 23:06

Paul D. Waite

99.4k57 gold badges204 silver badges275 bronze badges

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

4 Comments

Paul D. Waite Over a year ago

Ah, mimetype rather than content_type — that does make more sense.

reK1NDLE Over a year ago

That did it! Thanks @PaulD.Waite. I'm still unsure whether this is the best way to do all this, but at least it works...

Paul D. Waite Over a year ago

@reK1NDLE: excellent, glad we figured out why it wasn’t working. I’m not sure if this is the best way to achieve your desired functionality either — that might be worth a question of its own.

reK1NDLE Over a year ago

@TommasoBarbugli I ended up pulling the data from the model in the templates using background:url(). Kinda violated DRY because I had to add it to so many templates, but I think it's better than serving the CSS through Django in the long run. Thanks!

Collectives™ on Stack Overflow

Using template language in CSS files correctly

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related