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

Question

我已經安裝pinax（0.9a2）pinax-bootstrap主題！

現在我想定製它並重新設計主題，但是我沒有在我的模板文件夾中找到任何* .css文件。因此如何自定義引導主題的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運行美麗與默認的引導主題，我可以繼續使用CSS覆蓋自定義我的主題。

因爲我pinax settings.py點

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

我們將會把這種靜態的目錄中所有的CSS文件在我們項目的根目錄「mysite的」。

通過在bootstrap的css加載到我們的模板中後加載我們自己的自定義css文件，CSS覆蓋工作。

我們指定的CSS類及其新定義將覆蓋bootstrap提供的默認值。這就是我們如何定製bootstrap主題，同時單獨保留bootstrap.css，這就是爲什麼我們的static目錄在開始時爲空。

例如，默認情況下，我們的頂杆類定義爲bootstrap.min.css。

.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目錄中。