Customize
=========
Since **django-knowledge** ships with default themes and styles, you might have
to spend a little time perfecting *your look*. However, it should work right out
of the box with minimal setup (or none!) if you don't mind the defaults.
.. _customize-template:
Templates
---------
The default base template is ``django_knowledge/base.html`` which contains a
single ``{% block knowledge_inner %}`` tag. This base template loads two css
files from your static (see below): ``reset.css`` and ``base.css``.
If you have your own template shim/wrapper:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1. Copy and modify ``django_knowledge/base.html`` to your own template folder. Edit
it as you see fit.
2. Include ``{{ STATIC_URL }}knowledge/css/main.css`` for knowledge specific styling.
You should purposefully leave out ``{{ STATIC_URL }}knowledge/css/reset.css`` if you
don't want us to reset your existing base styles.
If you do decide to change the base template via the ``KNOWLEDGE_BASE_TEMPLATE``
setting, your new template might look something like this:
.. code-block:: html
{% block title %}{% endblock title %} | Johnny's Support Center
That isn't to say that our css styles will fit in perfectly, but we've been careful
to namespace under ``dk-``` the majority of our css classes, so conflicts should be
minimal.
If you want to use the included template shim/wrapper:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
1. Ensure static resources are loading for ``{{ STATIC_URL }}knowledge/css/reset.css``
and ``{{ STATIC_URL }}knowledge/css/main.css``.
2. Done.
Modifying common singular sections:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
There are two very common areas for modification:
1. ``django_knowledge/welcome.html`` - The support header containing the link and phrase
"Welcome to our Support Center". Simply override this locally by copying and editing
``templates/django_knowledge/welcome.html`` to your project.
2. ``django_knowledge/sidebar.html`` - The sidebar containing links to the homepage, ask
a question and categories. Likewise, simply override this locally by copying and editing
``templates/django_knowledge/sidebar.html`` to your project.
3. ``django_knowledge/form.html`` - The form loops over given forms and renders them.
Likewise, you can simply override this locally by copying and editing
``templates/django_knowledge/sidebar.html`` to your project.
.. _customize-static:
Static
------
As long as you are using Django's static files system, setting up static files should
be as easy as ``python manage.py collectstatic``. If not, you can always copy your files
manually to a legacy ``MEDIA_URL`` and override the base template according to the above
templates section.
Likewise, feel free to override the included CSS with your own rules in your own stylesheets.
We'd recommend not editing the included CSS, as an update or ``collectstatic`` might
overwrite them.
.. _customize-css:
CSS
---
We purposefully namespace the majority of our CSS classes with ``dk-`` in order to keep
them from conflicting with your existing CSS. There are two included CSS files:
* ``reset.css`` - The majority of the base classes that act on body, typography, etc...
This is ripped from Blueprint (though Blueprint is not a prerequisite). This should
probably only be included if you aren't using your own shim.
* ``main.css`` - This contains the real meat of the styles. Most of these are namespaced
so they shouldn't affect your other styles (IE: the header/footer your shim has).
However, the inverse is not true. Your styles may (and probably will) effect knowledge's
css. You're kind of on your own here.