Out of the box CSS styling

This extension comes with a working CSS, which will be auto-generated and added to the rendered pages. This auto-generated CSS will be externalized with config.inlineStyle2TempFile = 1 which is set by default (see config reference in the TSRef). This provides the most “out-of-the-box” experience, because you can now influence the appearance through some settings in the CONSTANT EDITOR (e.g. border, spacing, etc).

But you can also avoid this auto-generated CSS and choose to include the CSS responsible for this plugin in your own .css files. To do so, include this in your TypoScript Template:

plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE >

or since TYPO3 CMS 4.6, you can set:

config.removeDefaultCss = 1

which also affects plugins providing some default CSS.

Be aware that some settings in the external CSS influence the rendering that needs to be done in the plugin. Thus some settings that are done in CSS have to be specified in TypoScript too, so that our plugin knows how to handle them. Basically those are settings that influence spacing and borders and they can be set in the CONSTANT EDITOR.

So you adapt your CSS to your wishes and then go to the CONSTANT EDITOR and reflect these settings in these constants:

  • colSpace: The space between columns of images (in pixels)
  • rowSpace: The space after each row of images (in pixels)
  • textMargin: The space from the imageblock to the text (in case of in-text rendering) (in pixels)
  • borderSpace: The space that the borders around images take (in pixels)
  • borderThick: The thickness of borders (in pixels)