{% extends "admin/base_site.html" %} {% load i18n %} {% 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 overview of basic elements you should keep in mind when writing custom templates with Grappelli. The following descriptions assume that you extend Grappellis base.html within your custom template (which is the easiest way to access all Grappellis styles, scripts, functions).
Custom templates should extend either base.html or base_site.html.
{% filter force_escape %}
{% templatetag openblock %} extends "admin/base_site.html" {% templatetag closeblock %}
{% endfilter %}
You should load all custom template tags you need.
{% filter force_escape %}
{% templatetag openblock %} load i18n static admin_modify grp_tags {% templatetag closeblock %}
{% endfilter %}
The {% templatetag openblock %} block title {% templatetag closeblock %} defines the 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 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 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. 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 are a container for contextual interactions. Currently they are used with the change-form, defining options for expanding and collapsing all collapsible items. They've been introduced as a placeholder for any sort of contextual options which might be needed with future versions of Grappelli.
Page-Tools 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 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 messages are a container for the django messaging system, available with every page.
Messages are defined in a block {% templatetag openblock %} messages {% templatetag closeblock %}. They are always written as a ul.grp-messagelist with li containing the actual message. We currently support three message-tags .grp-success, .grp-warning and .grp-error.
{% filter force_escape %}
{% templatetag openblock %} block messages {% templatetag closeblock %}
{% templatetag openblock %} if messages {% templatetag closeblock %}
{% templatetag openblock %} endif {% templatetag closeblock %}
{% templatetag openblock %} endblock {% templatetag closeblock %}
{% endfilter %}
{% templatetag openblock %} endfor {% templatetag closeblock %}
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 define certain actions which apply directly to an object or a set of objects. They appear on the right-hand side of the page beside the content-title. They are written as a ul class="grp-object-tools" wrapping a {% templatetag openblock %} block object-tools-items {% templatetag closeblock %} which contains li with links defining the actions.
There are two visual states for those actions: a default one (which has no class) and a .grp-state-focus. The latter can be applied to an a which should be emphasized.
Based on Django/Grappelli there are two possibilities to prepend an icon. Adding .grp-add-link to an a prepends a plus. Adding target="_blank" to an a prepends an arrow, indicating that the link will be opened with a new browser window/tab.
{% 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.