Two directives: sidebar and figure

ReStructuredtext has a "sidebar" directive. See a good example of a sidebar here:

Sidebars are like miniature, parallel documents that occur inside other documents, providing related or reference material. A sidebar is typically offset by a border and "floats" to the side of the page; the document’s main text may flow around it. Sidebars can also be likened to super-footnotes; their content is outside of the flow of the document’s main text.

Sidebars may occur anywhere a section or transition may occur. Body elements (including sidebars) may not contain nested sidebars.

If you would have the following css inside your Plone skin:

color: red;
font-weight: bold;
float: right;
width: 10em;

The following code:

.. sidebar:: Sidebar Title
   :subtitle: Optional Sidebar Subtitle

   Subsequent indented lines comprise
   the body of the sidebar, and are
   interpreted as body elements...

   .. image::  /images/vasudevaserver.gif

Would be rendered as a sidebar of text floating on the right.

Now, for what concerns images, reStructuredText has a wonderful directive, "figure", which also support a "class" attribute.

Let’s assume we also have this css:

float: right;
border-style: dashed;
border-width: 1px;
border-color: red;

The following reStructuredText:

.. figure:: /images/vasudevaserver.gif
   :alt: logo
   :figwidth: image
   :figclass: float-right
   :align: right

    This is the caption.

Would produce the following:


This is the caption.

That is for today! We saw how easy it is to employ the two powerful directives "sidebar" and "figure".

See you next time!

Comments are closed.