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]

 

 

Comments are closed.