{% extends "admin/base_site.html" %} {% load i18n %} {% block bodyclass %}grp-doc{% endblock %} {% block content-class %}{% endblock %} {% block title %}Grappelli Documentation » Tools{% endblock %} {% block extrahead %} {% endblock %} {% block breadcrumbs %} {% endblock %} {% block content %}

Tools

Tools are actions which apply to specific contents (e.g. modules or rows).

Basics

Tools are always written as a ul.grp-tools wrapping li and a elements representing the options. They appear on the right-hand side within their parent element.

{% filter force_escape %}

{% endfilter %}

Tools as icons

Using icons for tools requires to add the class .grp-icon to the a. The actual icons are defined by additional classes, e.g. .grp-add-handler. The example below shows all icons & classes available with Grappelli.

Note: If you add custom icons make sure that they meet the following requirements: Each icon should be placed – horizontally and vertically centered – on a canvas with the size of 24 x 24 pixels, while the size of the actual icon might vary.

{% filter force_escape %}
{% endfilter %}

Tools as icons combined with text

You can combine icons with text. Just add the class .grp-icon-text to the a. Of course, you have to add a specific icon-class as well, e.g. .grp-icon-text.grp-add-handler.

{% filter force_escape %}

{% endfilter %}

Tools as text

For a tool represented as plain text without an icon, just add the class .grp-text to the a. In that case, you don't need to add a specific icon-class.

{% filter force_escape %}

{% endfilter %}

Placeholders for tools

You might need to add placeholders within tools, e.g. when a certain tool is currently not available. It might be important to sustain the order of the tools in that case (e.g. when tools are located beyond each other in different rows). To achieve that, you have to replace a with an empty span and make sure that you add the additional class of the former a to the empty span. Those classes may be .grp-icon, .grp-text or .grp-icon-text. When using tools with text, you also have to apply the text to the span to preserve its width.

  • Tool as text
  • Tool as icon with text
{% filter force_escape %}

  • Tool as text
  • Tool as icon with text
{% endfilter %}

Tools for modules

Tools referring to modules have to be placed directly after the modules heading.

Module

Row

Row

{% filter force_escape %}

Module

Row

Row

{% endfilter %}

Tools for rows

Tools referring to rows have to be placed as the last element within rows.

Row
{% filter force_escape %}
Row
{% endfilter %}

Tools for groups

Tools referring to groups have to be placed directly after the groups heading.

Group

Module

Row

Row

{% filter force_escape %}

Group

Module

Row

Row

{% endfilter %}

Repeating tools at the bottom of a group

In some cases, you might need to repeat tools at the bottom of groups, e.g. an add-handler. For that purpose, place a .grp-module.grp-transparent at the end of the group and put the tools inside a .grp-row (as shown in the example below).

Group

Module

Row

Row

{% filter force_escape %}

Group

Module

Row

Row

{% endfilter %}
{% endblock %}