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
Related Entries
About Michael Cannon
Hello, I'm Michael Cannon, Peichi's smiling man, an adventurous water-rat, chief technology officer, cyclist, poet, WWOOF'er and world traveler.
Perfect!!!