{% extends "admin/base_site.html" %} {% load i18n %}{% load url from future %} {% block bodyclass %}grp-doc{% endblock %} {% block content-class %}{% endblock %} {% block title %}Grappelli Documentation » Basic Page Structure{% endblock %} {% block extrahead %} {% endblock %} {% block breadcrumbs %}
This page provides an overlook of all basic elements you should keep in mind when writing custom templates in Grappelli.
The following descriptions assume that you extend Grappellis base.html from your custom template (which is actually the easiest way to access all Grappellis basic styles, scripts, functions ...)
As said the easiest way of writing custom templates starts with extending the template base_site.html.
{% filter force_escape %}
{% templatetag openblock %} extends "admin/base_site.html" {% templatetag closeblock %}
{% endfilter %}
You should load all custom template tag sets you need.
{% filter force_escape %}
{% templatetag openblock %} load i18n admin_static admin_modify grp_tags {% templatetag closeblock %}
{% endfilter %}
The {% templatetag openblock %} block title {% templatetag closeblock %} carries the text shown as title of the browser window or tab.
{% filter force_escape %}
{% templatetag openblock %} block title {% templatetag closeblock %}Your title goes in here{% templatetag openblock %} endblock {% templatetag closeblock %}
{% endfilter %}
Your possible custom stylesheets should be included with using the block {% templatetag openblock %} extrastyle {% templatetag closeblock %}.
{% filter force_escape %}
{% templatetag openblock %} block extrastyle {% templatetag closeblock %}
{% templatetag openblock %} endblock {% templatetag closeblock %}
{% endfilter %}
Your possible custom javascript files should be included with using the block {% templatetag openblock %} extrahead {% templatetag closeblock %}.
{% filter force_escape %}
{% templatetag openblock %} block extrahead {% templatetag closeblock %}
{% templatetag openblock %} endblock {% templatetag closeblock %}
{% endfilter %}
The breadcrumbs are defined in a block {% templatetag openblock %} block breadcrumbs {% templatetag closeblock %}.
They are always written as a plain ul with li containing links whereas the last li contains no link but just the title of the page you are currently dealing with.
{% filter force_escape %}
{% templatetag openblock %} block breadcrumbs {% templatetag closeblock %}
- {% trans "Home" %}
- Link
- That's where you are
{% templatetag openblock %} endblock {% templatetag closeblock %}
{% endfilter %}
The page-tools represent some container for contextual interactions. Currently they are used with the change-form where they carry options for expanding and collapsing all collapsible items.
They've been introduced as a kind of placeholder for any sort of contextual options which might be needed or possible in the future of Grappelli. Feel free to use it for your own customized page-specific purposes if there are any.
They are defined in a block {% templatetag openblock %} block page-tools {% templatetag closeblock %}.
They are always written as a plain ul with li containing links for the interactions. Those might be plain text or icons. Using the latter ones requires to add .grp-tools to the link. Make sure to use a custom icon fitting the size then.
{% filter force_escape %}
{% templatetag openblock %} block page-tools {% templatetag closeblock %}
{% templatetag openblock %} endblock {% templatetag closeblock %}
{% endfilter %}
The title of your custom template is a h1 contained in the {% templatetag openblock %} block content_title {% templatetag closeblock %}.
{% comment %}If there is any need you might also use a {% templatetag openblock %} block pretitle {% templatetag closeblock %}.
{% endcomment %}{% filter force_escape %}
{% templatetag openblock %} block content_title {% templatetag closeblock %}
My custom template
{% templatetag openblock %} endblock {% templatetag closeblock %}
{% endfilter %}
The object-tools carry certain actions which apply directly to an object. They appear on the right-hand side of the page beside the content-title.
They are always written as a ul class="grp-object-tools" carrying a {% templatetag openblock %} block object-tools-items {% templatetag closeblock %} which contains li with links representing the actual actions.
There are two visual states for those actions: a default one (which has no own class) and a .grp-state-focus.
The latter one can be applied to a which should visually appear as major actions.
Based on Django/Grappelli there are two possibilities to prepend an icon to the text of an action.
Adding .grp-add-link to an a prepends a plus to the text of the action.
Adding a target="_blank" to an a prepends an arrow to the text of the action, indicating that you'll leave the page when clicking the link.
{% filter force_escape %}
{% templatetag openblock %} block object-tools {% templatetag closeblock %}
{% templatetag openblock %} block object-tools-items {% templatetag closeblock %}
- Action
- Action
- Add something
- View something externally
{% templatetag openblock %} endblock {% templatetag closeblock %}
{% templatetag openblock %} endblock {% templatetag closeblock %}
{% endfilter %}
The {% templatetag openblock %} block content {% templatetag closeblock %} contains the actual content of your template.
{% filter force_escape %}
{% templatetag openblock %} block content {% templatetag closeblock %}
Your content goes in here
{% templatetag openblock %} endblock {% templatetag closeblock %}
{% endfilter %}
Use the {% templatetag openblock %} block footer {% templatetag closeblock %} to add possible footer content to your template.
The footer may contain any type of content but usually it carries the options for submitting a form.
{% filter force_escape %}
{% templatetag openblock %} block footer {% templatetag closeblock %}
Your footer content goes in here
{% templatetag openblock %} endblock {% templatetag closeblock %}
{% endfilter %}
For detailled instructions on how to construct submit-rows click here.