Add image drop shadows via TYPO3′s content element frames

by Michael Cannon in Featured, TYPO3 · 1 comment

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: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";/* 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.


Be Sociable, Share!

Related Entries

About Michael Cannon

Hello, I'm Michael Cannon, Peichi's smiling man, an adventurous water-ratchief technology officer, cyclist, poet, WWOOF'er and world traveler.

Previous post:

Next post: