{% extends "wagtailadmin/base.html" %} {% load wagtailadmin_tags i18n staticfiles gravatar %} {% block extra_css %} {{ block.super }} {{ example_form.media.css }} {% endblock %} {% block titletag %}{% trans 'Styleguide' %}{% endblock %} {% block bodyclass %}styleguide{% endblock %} {% block content %} {% trans "Styleguide" as title_trans %} {% include "wagtailadmin/shared/header.html" with title=title_trans %}
This is a paragraph
This is an example of code
Help text is not to be confused with the messages that appear in a banner drop down from the top of the screen. Help text are permanent instructions, visible on every page view, that explain or warn about something.
This is help text that might be just for information, explaining what happens next, or drawing the user's attention to something they're about to do
It could be multiple lines
A warning message might be output in cases where a user's action could have serious consequences
table
listingHeading 1 | Heading 2 | Heading 3 |
---|---|---|
TD with title class |
Regular listing TD | Regular listing TD |
Unpublished TD with title class |
Regular listing TD | Regular listing TD |
TD with title class |
Regular listing TD | Regular listing TD |
ul
listingul
listings with multiple columnsHeading 1 | Heading 2 | Heading 3 |
---|---|---|
TD with title class |
Regular listing TD | Regular listing TD |
Disabled TD with title class |
Regular listing TD | Regular listing TD |
TD with title class |
Regular listing TD | Regular listing TD |
These can also have an inverted theme:
Tabs are currently only used following headers, where they often appear merged with the bottom of the header:
{% include "wagtailadmin/shared/header.html" with title=title_trans merged=1 %}Tabs can also indicate errors:
{% include "wagtailadmin/shared/header.html" with title=title_trans merged=1 %}
Gravatar set (normal)
Gravatar not set (normal)
Gravatar set (square)
Gravatar not set (square)
Gravatar set (small)
Gravatar not set (small)
Add the following div
around any items you wish to display with a spinner overlay and fading out
Remove the "loading" class to disable the effect
It can be useful to show users the transparent areas of images. Add a transparency checkerboard with the .show-transparency
on the img
tag thus:
Internet Explorer 9 has two critical limitations in its CSS support: a maximum of 31 stylesheets per page and a maximum of 4096 selectors per stylesheet. The latter is particularly problematic when CSS is concatenated.