Creating a content separator

There are 3 steps we need to do in order to achieve our goal:

1. Create the chunk. Pick a nice name like separator and paste the following code:

<span class="separator"></span>

2. Add a css rule to your css file:

.separator{display:block;height:1px;margin:10px 5px;background:#CCC}

3. Use the chunk in your "Resource Content" or other TVs like {{separator}}

By using a <span> with display:block instead of <div>, I avoided a validation error. As you probably know TinyMCE wraps most of the content in <p></p>. A <div> inside a <p> throws a validation error.

Here it is inside modx manager

And here it is live

You can modify the style to your liking. Usually I use a nice transparent PNG.

A better way to do it, but a bit more difficult, is to apply a custom class on your paragraphs or divs. Will try this in a future article.

Write a comment

• Required fields are marked with *.

Name:
Email:
Subject:
Comment: *

Help prevent spam - enter security code above:
 

jzigbe
Posts: 1

Separator
Reply #1 on : Sun September 20, 2009, 21:53:49

---

Nice Trick.