Support » Fixing WordPress » Create a highlighted text box in a post?

  • When reading a large feature article in a newspaper or magazine, they often have a highlighted box or column to one side with background or supplementary information.

    I’d love to be able to create something similar in WordPress.

    I’ve been using WordPress for 18 months and in that time despite searching here and on Google, many times, and downloading several plugins, the only way I’ve managed this is by formatting text in Excel, then copy-and-pasting it to MS paint to create a Jpeg.

    It’s not elegant or easy to read but it’s my only solution.

    Can you help?
    Please!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Use CSS

    I think that’s a little bit beyond my ken Cholent MT.

    I’m more of a Plugin or dran-and-drop type of humanoid. I was dropped on my head at birth, can’t CSS as a result.

    Thanks for the suggestion though.

    C W (VYSO)

    (@cyril-washbrook)

    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.

    Wow you’ve set me a challenge there Cyril Washbrook, but how could I refuse when you went to such effort.

    Many, many thanks. I’ll report my progress.

    Hey dice2dice,

    I found the reasons you gave Cyril for your not attempting CSS to be hilarious. I hope your head’s feeling better!

    Did Cyril’s advice help, or have you not yet tried it out. I ask because he suggested I try the same thing a few hours ago, hence my curiosity.

    Be well,

    Vivek

    Vivek Hutheesing, sorry I’ve just come across your response whilst posting another query.

    Thanks for your comments and my head is okay thanks 😉

    I did take Cyril’s advice but he cautioned it might not work because of my template. Which I guess is what happened.

    I’m not sure if you are looking for the answer to my query too?

    I figured out a work around, which whilst no where near as elegant does work. I created a text box in Microsoft Word, pasted text in to it. Copied and pasted the box in to MS Paint and created a jpeg.

    It is not a beautiful solution but when needs must it does work.

    See an example below where ‘Fast Facts’ is my work around……
    http://www.whichinvestmenttrust.com/henderson-value-trust-potential-double-digit-returns-large-discount

    Best of luck to you and if you have any queries please ask away.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Create a highlighted text box in a post?’ is closed to new replies.