WiscWeb CMS - Indenting Text in the Text Editor

This document shows how to use Indenting Text in the Text Editor.

WiscWeb CMS - Indenting Text in the Text Editor

Indenting Text in the Text Editor

Occasionally users want text indented when they are working in the Text Editor. The Text Editor toolbar provides Indent and Unindent buttons, but unfortunately these buttons do not actually indent text. Rather, they take text and enclose it in html <blockquote> tags. This is not good html/css. Indented text is more properly accomplished by use of padding or margin styles.

This KB document explains how to add padding or margin style to your text when using the Text Editor.

NOTE: The methods detailed in this KB document require knowledge of html/css and use of the Text Editor Source Code mode. Use caution when doing this as you will be editing the underlying html/css used to construct your site's pages. Some CMS editors may not have authorization to use the Source Code mode of the Text Editor. These instructions will not work without access to Source Code mode.

We'll assume you know how to open a page, and open a text area to edit its contents. The method shown below relies on something called a <div> tag (for 'division'). We use a <div> tag because all text enclosed with the begin and end <div> tags will be affected by the style additions. This allows you to indent paragraphs, images, lists, etc. You can use this same style padding technique to modify just the <p> tag if that is acceptable.

A quick note about css styles and padding. Use of 'padding' will add whitespace around all four sides of the text enclosed in the <div> tag (i.e., top, right, bottom, and left). To be more specific, you can add -top, -right, -bottom, and -left to 'padding' to limit the whitespace. Thus if you wanted a paragraph indented on both left and right sides, you would add padding-left and padding-right to the <div> tag.

Here is our example text:
indenting example text

In our example, there are two paragraphs and an address. We want to indent the second paragraph and the address. What we are going to add is this bit of html/css: <div style="padding-left: 0.5in;"> with a closing <\div> after the text to be indented. This style should look fairly straight-forward! We are adding 'padding' of "0.5in" which is 1/2 inch. The measurement could be in pixels (px) and some other kinds, but I think inches are quite useful for our purposes, especially given that inches is a standard in page measurement and half-inches is a typical tab setting on which many indentation schemes are based. Note that using padding does not affect the margin--it stays wherever it is set. We are simply adding padding (i.e., white space) between the margin and the text. But you can just as easily replace 'padding' with 'margin' in the following steps.

Here's how to do it

  • Click on the Source Code mode tab at the bottom of the Text Editor window.
    indenting source code mode
  • Here's where your knowledge of html/css is necessary. You need to find the content you want to indent and you must know the html/css tags that may enclose it. You'll need to add the <div> tags before and after the enclosing html/css for the content you want to indent. In our example, the <p> paragraph tag is around both the paragraph and the address.
    indenting html explained
  • Add the <div> tags around the paragraph:
    indenting div style added to paragraph two
  • And do the same for the address text (modified to 1.5 inches to show difference):
    indenting div style around address
  • And here is what those two changes look like:
    indenting div style results
  • Here adding indenting for both left and right for paragraph two:
    indending div style left and right
  • And here is what that looks like:
    indending div style left and right results

And there you have it. A little judicious use of css style padding to indent text.




Keywords:wiscweb cms templates content classes Indenting Text in the Text Editor   Doc ID:26500
Owner:Ryan H.Group:WiscWeb CMS
Created:2012-09-19 14:40 CDTUpdated:2014-12-02 12:34 CDT
Sites:DoIT Help Desk, WiscWeb CMS
Feedback:  0   0