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

ben van 't ende ben.vantende at typo3.org
Thu Dec 20 10:09:32 CET 2012


looks great martin! gRTz ben

On 18/12/12 23:10, Martin Bless wrote:
> 
> 
> 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
> 

-- 
TYPO3 Community Manager


More information about the TYPO3-project-documentation mailing list