CSS is easy to learn and has a large payoff. Almost everything boils down to one basic structure: selector, property, value. Rinse and repeat. The rest are details.
To be honest, I don’t know how anyone can use plugins without knowing at least a little about CSS and how it interacts with HTML markup. In many if not most cases, the default CSS styles – assuming that the particular plugin adds its own, and many don’t – require adjusting in order to look as good as possible. If you don’t know any CSS, then you will forever be at the mercy of the aesthetic whims of diverse plugin and theme authors, which in my view is not a good place to be.
——————————–
The solution consists of creating a shortcode that generates an infobox, and then styling the infobox with CSS. The first step can be done with the help of a plugin, but in my view is easier without a plugin. In your theme’s functions.php template (keep a backup in case you make a mistake), add the following lines:
add_shortcode('infobox', 'infobox_fn');
function infobox_fn( $atts, $content = null) {
extract( shortcode_atts( array(
'align' => 'left'
), $atts ) );
return '<div class="infobox infobox-' . esc_attr($align) . '">' . wpautop($content) . '</div>';
}
In your stylesheet, add the following lines:
.infobox {
width: 300px;
padding: 1em 3em;
background: #EEEEEE;
border: 1px solid #CCCCCC;
}
.infobox-left {
float: left;
margin: 0 3em 3em 0;
}
.infobox-right {
float: right;
margin: 0 0 3em 3em;
}
To create a left-aligned infobox, you would then use shortcode in your posts like this:
[infobox]The quick brown fox jumps over the lazy dog.[/infobox]
To create a right-aligned infobox, you would use this:
[infobox align="right"]The quick brown fox jumps over the lazy dog.[/infobox]
This may not look perfect in your particular layout/theme. This is why it’s crucial that you be able to do some basic CSS styling so that you can make adjustments.
