1

pinax-bootstrap テーマで pinax(0.9a2) をインストールしました!

カスタマイズしてテーマを再設計したいのですが、テンプレート フォルダーに *.css ファイルが見つかりませんでした。したがって、ブートストラップ テーマの css をカスタマイズする方法は?

4

1 に答える 1

4

だから、これは私が私の基本的なピナックスプロジェクトを立ち上げて実行する方法です:-

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" の下のこの静的ディレクトリに配置します。

CSS オーバーライドは、ブートストラップの css がテンプレートに読み込まれた後に独自のカスタム css ファイルが読み込まれることで機能します。

特定の CSS クラスとその新しい定義は、ブートストラップによって提供されるデフォルトをオーバーライドします。これは、bootstrap.css をそのままにして、ブートストラップ テーマをカスタマイズする方法です。これが、staticディレクトリが最初は空である理由です。

たとえば、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);
}

これにより、ホームページの黒い上部バーが黒赤として表示されます。これは、デフォルトが bootstrap.min.css で既に定義されている 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.cssmysite/static/cssディレクトリに存在する必要があります。

于 2012-11-03T17:12:24.087 に答える