Special Text Boxes – better caption
After I started using the (great) WordPress special text boxes plugin by Minimus I found a couple of downsides.
It’s a caption with an image and the remaining text, possibly with an image. Not 1 box with 1 image covering both the caption and the rest.
Solution: Add the following code to
/wp-content/plugins/wp-special-text-boxes/css/wp-special-text-boxes.css.php
- Insert line (after “background-repeat: no-repeat” around line 690)
background-position: 15px 50%; - Insert line (after “padding-right: 5px” around line 730)
padding-top: 15px; - Insert line (above the FIRST appearance of “.stb-custom-caption_box”)
.stb-custom_box::first-line { font-size: 22px }; - Change (around line 728)
padding-left: <?php echo (($stextboxesOptions[‘bigImg’] === ‘true’) ? ‘50‘ : ’25’ ); ?>px; TO
padding-left: <?php echo (($stextboxesOptions[‘bigImg’] === ‘true’) ? ‘100‘ : ’25’ ); ?>px; - Change: (to center the image across the entire box, not just the caption or rest)
background-position:top-left; TO (twice!)
background-position:left-center; - Change
min-height: <?php echo (($stextboxesOptions[‘bigImg’] === ‘true’) ? ‘40‘ : ’20’);?>px; TO
min-height: <?php echo (($stextboxesOptions[‘bigImg’] === ‘true’) ? ‘70‘ : ’20’);?>px; - Configure image and big image for custom special text boxes
What this does
this CSS entry “first-line” will only apply to the first line. Result: First line has a large font-size, the rest of the lines don’t. Separation between first line and the rest is by just pressing enter.
[stextbox id=”custom”]Example custom special text box
Doesn’t this look great? The image is configured in the regular Special Text Boxes settings. The text after the first CR/Chr(13)/Return will have the regular content font-size. Inside this box you can use links, font-sizes, bold, italic, etc. You can do pretty much anything. Only the first line’s formatting is defined through the css line we added.[/stextbox]