Learn about the top 2016 CMS trends. Read on.

Mark of The Great Books Foundation asks, how do I get a drop shadow applied to images in my content elements in a way that’ll be easily understood by my editors?

The answer, use a content frame to enable the CSS drop shadow.

How to Wrap TYPO3 Content Elements

Update the website root page TSConfig like the following code snippet.

TCEFORM.tt_content.section_frame {
  addItems {
    50 = Custom Heading
    51 = Gold Divider
    52 = Drop Shadow

Add the desired HTML div wrapper to the website root level TypoScript template setup section.

tt_content.stdWrap.innerWrap.cObject {
  50 = TEXT
  50.value = <div class="customHeading">|</div>
  51 = TEXT
  51.value = <div class="goldDivider">|</div>
  52 = TEXT
  52.value = <div class="dropShadow">|</div>

Finally, add in your favored drop shadow styling to your CSS stylesheet.

div.dropShadow img {
	-moz-box-shadow: 3px 3px 4px #999; /* Firefox */
	-webkit-box-shadow: 3px 3px 4px #999; /* Safari/Chrome */
	box-shadow: 3px 3px 4px #999; /* Opera and other CSS3 supporting browsers */
	-ms-filter: &quot;progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')&quot;;/* IE 8 */
	: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');/* IE 5.5 - 7 */

How to Use TYPO3 Content Element Frames

After performing the above code edits and flushing your TYPO3 caches, you can select the new content frame via the Indentation and Frames option on the Appearance tab of text, text w/image and image content elements.


Still stuck? Write us.