How to change the pinax(0.9a2) template?

Question

I have installed the pinax(0.9a2) with the pinax-bootstrap theme!

Now I want to customize it and redesign the theme, but I didn`t find any *.css files in my template folder. Therefore how to customize the css of the bootstrap theme?

Answer 1

So this is how I get my basic pinax project up-and-running:-

mkvirtualenv -p python2.7 --distribute mysite
cd ~/work
pinax-admin setup_project -b basic mysite
cd mysite
pip install -r requirements/base.txt
python manage.py collectstatic
python manage.py syncdb
python manage.py runserver 8001

which gives me this:-

Now that my pinax is running beautifully with bootstrap theme by default, I can proceed to customize my theme by using CSS overrides.

Since my pinax settings.py points to

# Additional directories which hold static files
STATICFILES_DIRS = [
    os.path.join(PROJECT_ROOT, "static"),
]

We will place all our css files in this static directory under our project root directory "mysite".

CSS overrides work by having our own custom css file being loaded after bootstrap's css are loaded in our templates.

Our specificed CSS class and its new definition will override the defaults provided by bootstrap. This is how we customize our bootstrap theme while leaving bootstrap.css alone and which is why our static directory is empty at the start.

For instance, we have our topbar class defined in bootstrap.min.css by default.

.topbar-inner, .topbar .fill {
background-color: #222;
...
}

We can specify our own css file in the static directory, load this css file in our templates/site_base.html file and specify in our own css file a new color for the top bar, like this:-

.topbar-inner, .topbar .fill {
    background-color: red;
    background-image: -webkit-linear-gradient(top, #333, #FF4242);
    background-image: -o-linear-gradient(top, #333, #FF4242);
    background-image: linear-gradient(top, #333, #FF4242);
}

This will cause our black top bar on our homepage to render as black-red. That's the basic premise of using overrides to custom our css classes, whose defaults are defined in bootstrap.min.css already.

Example modification in mysite/templates/homepage.html

{% extends "banner_base.html" %}

{% load i18n %}

{% block extra_head %}
<link rel="stylesheet" href="{{ STATIC_URL }}css/my_custom_stuff.css">
{% endblock %}

{% block head_title %}{% trans "Welcome" %}{% endblock %}

{% block body_class %}home{% endblock %}

{% block banner %}
    <h1>{% trans "Welcome to Pinax" %}</h1>
    <p>
        {% blocktrans %}
        <b>Pinax</b> is a <a href="http://djangoproject.com/">Django</a>
        project intended to provide a starting point for websites. By
        integrating numerous reusable Django apps to take care of the
        things that many sites have in common, it lets you focus on what
        makes your site different.
        {% endblocktrans %}
    </p>

    <h2>About Zero Project</h2>
    <p>
        {% blocktrans %}
        This project lays the foundation for all other Pinax starter projects. It
        provides the project directory layout and some key infrastructure apps on
        which the other starter projects are based.
        {% endblocktrans %}
    </p>

    <p><a href="http://pinaxproject.com/" class="btn primary large">{% trans "Learn more &raquo;" %}</a></p>
{% endblock %}

The specific block added in is

{% block extra_head %}
<link rel="stylesheet" href="{{ STATIC_URL }}css/my_custom_stuff.css">
{% endblock %}

Note that we can also add this to mysite/templates/site_base.html. It all depends on which template you want to load in our my_custom_stuff.css file.

my_custom_stuff.css needs to reside in mysite/static/css directory.