{% 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 certain actions which apply to specific contents (e.g. modules or rows).

Basics

Tools are always written as a ul.grp-tools carrying li and a elements representing the tools options.

They appear on the right-hand side within their parent element.

{% filter force_escape %}

{% endfilter %}

Tools as icons

Using icons for tools basically requires to add the class .grp-icon to the a.

The actual icons are furthermore defined by additional classes, e.g. .grp-add-handler.
In the example below you'll find all icons & classes delivered with Grappelli.

If you add custom icons make sure that they meet following requirements: Each icon should be placed – horizontally and vertically centered – on a canvas with the size of 24 x 24 pixels. 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 too, 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 have to add a specific icon-class.

{% filter force_escape %}

{% endfilter %}

Placeholders for certain 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.

In case of tools as text or as icons with text you also have to apply the text to the span to make it keep 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 refering 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 refering to rows have to be placed as last elements within rows.

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

Tools for groups

Tools refering 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 special cases you might 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 %}