如何更改pinax（0.9a2）模板？ [英] How to change the pinax(0.9a2) template?

问题描述

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

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

现在我想自定义它并重新设计主题，但是我没有在我的模板文件夹中找到任何* .css文件。因此，如何自定义引导主题的css？

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?

推荐答案

所以这是我如何获得我的基本pinax项目up-运行： -

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:-

现在默认情况下，我的pinax运行精美的bootstrap主题，我可以使用CSS覆盖来自定义我的主题。

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

由于我的pinax settings.py指向

Since my pinax settings.py points to

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

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

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

CSS覆盖工作通过在引导程序的CSS加载到我们的模板中之后加载自己的自定义css文件。

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

我们的特定CSS类及其新定义将覆盖默认值由引导提供。这是我们如何自定义我们的引导主题，同时让bootstrap.css单独，这就是为什么我们的静态目录在开始时为空。

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.

例如，默认情况下，我们在 bootstrap.min.css 中定义了我们的顶栏类。

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

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

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

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

这将使我们的主页上的黑色顶栏呈现为黑红色。这是使用覆盖定制我们的css类的基本前提，它们的默认值已经在bootstrap.min.css中定义。

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.

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的/模板/ site_base.html 。这一切都取决于我们的 my_custom_stuff.css 文件中要加载的模板。

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 需要驻留在 mysite / static / css 目录。

这篇关于如何更改pinax（0.9a2）模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！