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.
References
- Content elements wrapped in frames
- Unverse’s drop shadow
- Two section frame tricks
Perfect!!!