这就是我如何启动并运行我的基本 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 主题,同时保留 bootstrap.css ,这就是为什么我们的static
目录一开始是空的。
例如,我们的 topbar 类定义在bootstrap.min.css
默认情况下。
.topbar-inner, .topbar .fill {
background-color: #222;
...
}
我们可以在里面指定我们自己的css文件static
目录中,加载这个css文件到我们的templates/site_base.html
文件并在我们自己的 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 »" %}</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
file.
my_custom_stuff.css
需要居住在mysite/static/css
目录。