Django admin CSS

During the process of creating this blog I made the decision to use Django Admin as the backend for the it. I knew it had its short-comings, but that didn't really matter. I'm not even really sure what I mean by shortcomings, as it's proven time and time again to be as flexible as I need it to be for something as simple as a CMS.

Anyway, I had wanted to customize the CSS of the /admin/ section and found myself going all over the place trying to find the correct process to do so. It entailed the django docs and some stack overflow sifting. So I figured I'd just put it all in once place here.

The first step is to copy the system installed static files (css, js, images) to your app. You'll want to run

$ python manage.py collectstatic --noinput

This will copy those files to your local app, and you can pretty much remove everything except for whats in /admin. I found it easier to move the files from my apps folder into the /public folder.

You'll also want to make sure you have the Static Files setting setup

STATICFILES_DIRS = (
   ('/Users/user_name/Sites/site_name/public'),
)

If you use apache to handle your static files, when you do that you dont have add an additional Alias to handle the admin/css, admin/js, etc.. folders as they'll already be covered under your /public route.

Most of the styles will be under /css/base.css

I was tempted to convert the CSS to LESS to make it a bit more organized, but things are already broken down fairly nicely, and I felt I wasn't going to be editing all that much to put the time into doing so.

Here's my flattened result: http://bit.ly/1nVWNgY

Tags:cssdjango

Posted:Feb. 6, 2014, 12:27 a.m.

Simple Lists With Less

Ever need to make a list of comma separated values but always have that last "," at the end?

Here's some code I've been reusing for a while, including on this blog.

LESS

.tags {
  margin-bottom: 0px;

span + span { &:before { content: ", " } } }



HTML

<div class="tags"> 
  {% for tag in post.tags.all %}<span>{{ tag }}</span>{% endfor %}
</div>

Tags:lesscssfrontend

Posted:Oct. 27, 2013, 4:54 p.m.