[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:
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
More information about the TYPO3-project-documentation
mailing list