Article
3 comments

Boxes and positioning – Enhance rich text editor – Part 2

Part one was all about the basics of customizing the rich text editor. This part will show some advanced CSS styling definitions. For a nice looking text layout are boxes handy to position side notes, images, videos or any kind of elements beside the content.  The rich text editor has already defined boxes in the markup styles drop down called callouts but they have a fixed position defined. I also will show enhancements for positioning any kind of element.

Defining boxes

As in part one the boxes will be defined by using  ms-rteElements. The html element that will be added to the rich text editor can be a div or span element. In general I prefer to use div’s instead of span for a simple reason. By default modern browsers treat div like boxes with a fixed width of 100%. Span-Elements on the other hand makes more send in creating inline style definitions. The following CSS code defines a simple box with an initial height, width, background color and border.

div.ms-rteElement-SimpleBox
{
    -ms-name: "Content Box";
    display: inline-block;
    width: 300px;
    height: 100px;
    padding: 5px;
    border: 1px dashed slategray;
    background-color: lightgoldenrodyellow;
    color: Black;
    margin: 0px 5px 5px 5px;
    z-index: 1;
}

By defining the –ms-name vendor specific attribute the box will be displayed as “Content Box” in the HTML Markup Style drop down. By defining the height and width properties of the box the size will be resizable.

To embed a new box inside the content first the text must be defined and then the style applied. After this the text will placed automatically inside the box.

Additional effect can also be applied to the box for example a hover effect. The following style definition will add some different background color when the element will be hovered. The possibilities to style those boxes are endless. Different colors, background images and text enhancements can be applied to the boxes too. The hover effect works the same way as used in part one. The hover effect cannot be applied directly instead selector needs to be used too.

div[class*="ms-rteElement-SimpleBox"]:hover
{
    -ms-name: "Content Box";
    background-color: coral;
    color: White;
}

 

The boxes will then as shown in the image below. On the left side the box is in normal state. The right side shows the hover state.

Content box in normal and hover state

Content box in normal and hover state

Positioning

To freely distribute those boxes on the left or right side of the content some enhancement to the positioning needs to be done.  In the rich text editor only text can be centered, left or right aligned. This is not an option to position those boxes. What needs to be done to position boxes, floating must be defined. To float a box on the left or right side and wrap the text content around only two simple new styles needs to be added to the CSS definition. This time the ms-rteStyle will be used. Those definitions will show up in the styles drop down and not in the markup drop down.

.ms-rteStyle-FloatLeft
{
    -ms-name: "Left";
    float: left;
}
.ms-rteStyle-FloatRight
{
    -ms-name: "Right";
    float: right;
}

The benefit of this definitions is that they are generic available. Whenever an element needs to be positioned on the left or right side of the content those styles could be used too. Take a look how this works together.

Enjoy it !!!

3 Comments

  1. This is a great example, do you know how I would add a vertical-align to the text in the box?
    So say I have
    DIV.ms-rteElement-smbluebox{ -ms-name:”#1 Left Small Blue Box”;}
    .ms-rteElement-smbluebox
    {
    background: #00BCF2;
    color: #fff;
    font-size:12px;
    text-decoration:none;
    text-align: center;
    font-family:Segoe UI;
    width:60px;
    height:60px;
    margin:6px;
    float:left;
    }

    How could I make the text align to the center (vertically)? vertical-align:middle any ideas.

    Reply

    • For a vertical align you need to specify display: table-cell instead of display: block or display: inline-block. Then you can specify vertical-align: middle. You will find some more information about this on the following website: http://phrogz.net/css/vertical-align/index.html
      hope this helps.

      Kind regards
      Stefan

      Reply

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.