[TYPO3-doc] Tip for ReST editor: Styles for screenshots

Martin Bless m.bless at gmx.de
Tue Dec 18 23:10:42 CET 2012

I'm just trying to make screenshots look nice:

Without the border and the shadows the screenshots are hard spot.

The CSS for this is:

.doc .screenshot-fullsize,
.doc .screenshot-detail {
  padding: 10px;
  margin-bottom: 25px;
  border: 1px solid #aaa;
  box-shadow: 4px 4px 6px #ddd;
  -moz-box-shadow: 4px 4px 6px #ddd;
  -webkit-box-shadow: 4px 4px 6px #ddd;

If you want to make your screenshot look like that add the
":class:" option to your image like in this example:

.. |image next| image:: ../Images/next.png
   :alt: click on 'next'
   :class: screenshot-detail

Here's the complete Images.txt include file:


- don't use :width: and :height:
- use :class: screenshot-detail for "small to medium" screenshots
- use :class: screenshot-fullsize for "large" screenshots

In the moment "screenshot-detail" and "screenshot-fullsize" are
the same. But we could make something out of it later ...

Keep on hacking ...


Certified TYPO3 Integrator | TYPO3 Documentation Team Member


More information about the TYPO3-project-documentation mailing list