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

[Martin Bless]

I'm just trying to make screenshots look nice:
http://docs.typo3.org/Overview/Tips.html

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:
http://srv123.typo3.org/~mbless/git.typo3.org/Documentation/DocsTypo3Org.git/Documentation/Overview/Images.txt


Recommendations:

- 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 ...

Martin

-- 
Certified TYPO3 Integrator | TYPO3 Documentation Team Member

http://mbless.de