Project Name 0.0.0

Documentation

What does it do?

This extension allows wrapping of all content elements with id (uid of content element or your own id) and/or class (type of content element, or your own class, or selection of predefined classes). It does the same as the selectbox "frame_class" (wrap a content element in a div container), but allows you to type in the name for the id or class attribute or select multiple predefined classes, so the results are s.th. like this:

<div id="c123" class="my-class">...</div>
<div id="my-id">...</div>
<div class="frame type-text my-second-class ruler-before ruler-after hidden-xs">...</div>

This feature isn't mainly intended for editors, but for developers. It allows you easily to address a specific content element by CSS or JavaScript.

Predefined classes

The selection of predefined classes is very useful, also for editors, e.g. to hide content elements dependent to screen width. Predefined classes are:

  • frame-ruler-before: Set horizontal line before this element
  • frame-ruler-after: Set horizontal line after this element
  • frame-box: Box with background
  • hidden-xs: Hide element on extra small devices (mobile)
  • hidden-sm: Hide element on small devices (tablet)
  • hidden-md: Hide element on medium devices (desktop)
  • hidden-lg: Hide element on large devices (desktop)

The predefined classes can easily be removed and new classes can be added, see chapter "Configuration of CSS classes".

Screenshots

Input fields and checkboxes for id and / or class of a content element in the backend:

_images/screenshot1.png

This extension doesn't flood your BE form with many fields: The checkbox and two inputfields are only visible if you check the checkbox "Activate?".

Preview of settings in footer of tt_content element (use EXT:cefooter for this):

_images/screenshot2.png

Configuration

Add TypoScript template

Add the template "Content element wrap (cewrap)" in field "Include static (from extensions)" in your ROOT page on last position. Last position because it overwrites Fluid Templates and TypoScript settings which are sometimes overwritten by other extensions. At least, you should add this template after the static templates of ext. bootstrap_package and fluid_styled_content.

Add Page TSconfig

If you have installed EXT:cefooter, add the predefined Page TSconfig by selecting item "EXT:cefooter: Preview settings for EXT:cewrap" in your ROOT page or write your own Page TSconfig.

Configuration of CSS classes

Configure the CSS classes an editor can choose from. Configuration is possible with TCA or in Page TSconfig.

Example for configuration in Page TSconfig:

TCEFORM.tt_content.tx_cewrap_class_select {
    removeItems := addToList(frame-box)
    addItems {
        frame-mybox = LLL:EXT:myext/Resources/Private/Language/backend.xlf:tt_content.tx_cewrap_class_select.mybox
    }
    types {
        image.addItems {
            frame-slider = LLL:EXT:myext/Resources/Private/Language/backend.xlf:tt_content.tx_cewrap_class_select.slider
        }
    }
}

Clean up your HTML code

For a clean HTML code you should set the default value for field "Frame" to "No Frame" instead of "Default". You do that with this TypoScript configuration in Page TSConfig:

TCAdefaults.tt_content.frame_class = none

This prevents that all content elements are wrapped in a div with id (you can control this behaviour with this extension, if you need a content element to be wrapped).

FAQ

I want to wrap ALL content elements

If you want to wrap every content element with a class, it's id and/or the content element type, don't use this extension. This can be accomplished with TypoScript or Fluid (depends on your TYPO3 setup and the distributions/extensions you use).

Usage with TYPO3 < 8

Please use version 3.1.0 from TER.

Usage with TYPO3 < 7

Please use version 2.2.0 from TER.

Usage with TYPO3 < 6.2

Have a look into TER for older versions of this extension.

Usage with EXT:css_styled_content

Please use version 3.1.0 (or older) from TER.

ChangeLog

See file ChangeLog in the extension directory.