如何改变pinax（0.9a2）模板？

Question

我已经用pinax-bootstrap主题安装了pinax（0.9a2）！

现在我想自定义它并重新设计主题，但我在模板文件夹中找不到任何* .css文件。那么如何自定义bootstrap主题的CSS？

Answer 1

所以这就是我如何使我的基本pinax项目正常运行： -

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

给了我这个： -

现在我的pinax默认使用bootstrap主题运行得很漂亮，我可以继续使用CSS覆盖来自定义我的主题。

因为我的pinax settings.py指向

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

我们将把所有的css文件放在我们项目根目录“mysite”下的这个静态目录中。

CSS通过在我们的模板中加载bootstrap的css之后加载我们自己的自定义css文件来覆盖工作。

我们的特定CSS类及其新定义将覆盖bootstrap提供的默认值。这就是我们在单独保留bootstrap.css时自定义引导主题的方法，这也是我们的static目录在开始时为空的原因。

例如，我们默认在bootstrap.min.css中定义了topbar类。

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

我们可以在static目录中指定我们自己的css文件，在我们的templates/site_base.html文件中加载这个css文件，并在我们自己的css文件中指定顶部栏的新颜色，如下所示： -

.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);
}

这会导致我们主页上的黑色顶栏呈现为黑红色。这是使用覆盖来自定义css类的基本前提，其默认值已在bootstrap.min.css中定义。

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 %}

添加的特定块是

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

请注意，我们也可以将其添加到mysite/templates/site_base.html。这完全取决于您要在my_custom_stuff.css文件中加载哪个模板。

my_custom_stuff.css需要驻留在mysite/static/css目录中。