¿Cómo cambiar la plantilla pinax (0.9a2)?

¡He instalado el pinax (0.9a2) con el tema pinax-bootstrap!

Ahora quiero personalizarlo y rediseñar el tema, pero no encontré ningún archivo * .css en mi carpeta de plantillas. Por lo tanto, ¿cómo personalizar el css del tema bootstrap?

Así es como hago que mi proyecto pinax básico se ponga en marcha:

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 

lo que me da esto: –

introduzca la descripción de la imagen aquí

Ahora que mi pinax se está ejecutando a la perfección con el tema bootstrap de forma predeterminada, puedo proceder a personalizar mi tema utilizando las modificaciones de CSS.

Desde mi pinax settings.py apunta a

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

Pondremos todos nuestros archivos css en este directorio estático debajo de nuestro directorio raíz del proyecto “mysite”.

Las anulaciones de CSS funcionan al tener nuestro propio archivo css personalizado que se carga después de cargar el css de bootstrap en nuestras plantillas.

Nuestra clase específica de CSS y su nueva definición anularán los valores predeterminados proporcionados por bootstrap. Así es como personalizamos nuestro tema de bootstrap mientras dejamos bootstrap.css solo y es por eso que nuestro directorio static está vacío al principio.

Por ejemplo, tenemos nuestra clase de barra superior definida en bootstrap.min.css de forma predeterminada.

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

Podemos especificar nuestro propio archivo css en el directorio static , cargar este archivo css en nuestro archivo templates/site_base.html y especificar en nuestro propio archivo css un nuevo color para la barra superior, como esto:

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

Esto hará que nuestra barra superior negra en nuestra página de inicio se muestre como negro-rojo. Esa es la premisa básica de utilizar reemplazos para personalizar nuestras clases css, cuyos valores predeterminados ya están definidos en bootstrap.min.css.

Modificación de ejemplo en mysite/templates/homepage.html

 {% extends "banner_base.html" %} {% load i18n %} {% block extra_head %}  {% endblock %} {% block head_title %}{% trans "Welcome" %}{% endblock %} {% block body_class %}home{% endblock %} {% block banner %} 

{% trans "Welcome to Pinax" %}

{% blocktrans %} Pinax is a Django 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 %}

About Zero Project

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

{% trans "Learn more »" %}

{% endblock %}

El bloque específico añadido en es

 {% block extra_head %}  {% endblock %} 

Tenga en cuenta que también podemos agregar esto a mysite/templates/site_base.html . Todo depende de la plantilla que desee cargar en nuestro archivo my_custom_stuff.css .

my_custom_stuff.css debe residir en el mysite/static/css .