Last updated July 20, 2016. Created on September 11, 2013.
Edited by marcelovani. Log in to edit this page.

Drupal 8

The Boxout module is used to create a styled box in your page.

Module Page: https://drupal.org/project/boxout

Installation

Put the module into your modules directory as usual.

Configuration

Visit /admin/config/content/formats

Edit the configuration for each Input format, i.e. Basic HTML
/admin/config/content/formats/manage/basic_html
Enable the Boxout button
Boxout Button

Boxout uses a DIV element to wrap the box, make sure you configure the
text format to allow <div class=""> in Filter settings

Filter Settings

How to use

When you are editing an article you will see the Boxout button, click on it to
see a dialog where you can insert a Header and a Body.
Boxout Dialog
When you click Insert it will add a div that will format and display the box.
Boxout in editor

Drupal 7

A Wysiwyg plugin that allows editors to add a block of text to the main body text.

When you click on the Wysiwyg button, a popup will be displayed and you can insert a Header and a Body. Click Insert and it will add a div that will format and display the box as you can see on the snapshot attached.

Module Page: https://drupal.org/project/wysiwyg_boxout

See live example here: http://www.itpro.co.uk/644176/dell-struggles-as-q3-profits-drop-by-47-per-cent

Requirements

  • Wysiwyg module
  • Wysiwyg editor i.e. TinyMCE

Installation

Copy the module directory in to your Drupal: /sites/all/modules directory as usual.
Enable the Wysiwyg boxout module

Download a Wysiwyg editor, for example TinyMCE (http://cloud.github.com/downloads/tinymce/tinymce/tinymce_3.4.9.zip) and put into the libraries folder, it will look like this:
TinyMCE folder structure
Image: TinyMCE folder structure

Configuration

Go to Configuration > Content Authoring > Wysiwyg profiles (/admin/config/content/wysiwyg)

  1. Choose TinyMCE as editor for each Text format and click Save
    Wysiwyg profiles
    Image: Wysiwyg profiles
  2. Edit each Text format, enable Boxout under SHOWBUTTONS AND PLUGINS
  3. TinyMCE profile for Filtered HTML
    Image: TinyMCE profile for Filtered HTML

Go to Configuration > Content Authoring > Text formats (/admin/config/content/formats).
if Limit allowed HTML tags option is enabled, add <div> to Allowed HTML tags configuration.
Filter Settings
Image: Filter Settings

Using it

  • Create a new article (/node/add/article)
  • Insert some content
  • Click on the place you want to add Boxout
  • Click on the Boxout button
  • Type a Header and Body and click Insert.
    Inserting a boxoutsee Image: Inserting a boxout
  • Save the Article

It should look like this
Testing Boxout
Image: Testing Boxout

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.