.. ==================================================
.. FOR YOUR INFORMATION
.. --------------------------------------------------
.. -*- coding: utf-8 -*- with BOM.


.. _start:

================================
Fluid Styled Content Layout Wrap
================================

.. only:: html

    :Classification:
        fsc_layout_wrap

    :Version:
        |release|

    :Language:
        en

    :Keywords:
        fsc, fluid styled content, layout

    :Copyright:
        2016

    :Author:
        Gregor Hermens

    :Email:
        gregor.hermens@a-mazing.de

    :License:
        This document is published under the Open Publication License
        available from http://www.opencontent.org/openpub/

    :Rendered:
        |today|

    The content of this document is related to TYPO3,
    a GNU/GPL CMS/Framework available from `www.typo3.org <http://www.typo3.org/>`_.

.. _introduction:

Introduction
============

This extension adds a css class to the outermost tag of all content elements, based on the layout field. Use this class to change the layout according to your needs.

.. _installation:

Installation
============

#. Import from TER.
#. Include the static template right after the template of Fluid Styled Content.

.. _configuration:

Configuration
=============

Basic
-----

Use PageTS to set up your own layouts:

.. code-block:: ts

    TCEFORM.tt_content.layout {
        removeItems = 1,2,3
        addItems {
            4 = Blue Border
            5 = Yellow Background
        }
    }

This keeps the standard layout *Default*, removes the example layouts *Layout 1*, *Layout 2*, *Layout 3* and adds two new layouts. See :ref:`PageTS documentation <t3tsconfig:pagetceformconfobj>` for more details. Use *.layout4* and *.layout5* as css selectors for these layouts.

Advanced
--------

If you do not like these simple class names, you can use Typoscript Setup to define your own ones:

.. code-block:: ts

    lib.fscLayoutWrap {
        4 = TEXT
        4.value = your own classes
    }

Now, instead of *class="layout4"*, *class="your own classes"* will be rendered.