Creating a content separator

on 14-Sep-2009 | Comments ( 1 ) Tags: Evolution

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 *.

If you have trouble reading the code, click on the code itself to generate a new random code.
Posts: 1
Reply #1 on : Sun September 20, 2009, 20:53:49
Nice Trick.

Quick modx Evolution Tags

  • cached [[snippet]] or uncached [!snippet!]
  • {{chunk}}
  • [+placeholder+]
  • [*resourceField/TV*]
  • [^timing^]
  • [~link~]

Quick modx Revolution Tags

  • [[snippet]]
  • [[$chunk]]
  • [[+placeholder]]
  • [[*resourceField/TV]]
  • [[~link]]
  • [^timing^]
  • [[++systemSetting]]
  • [[%languageStringKey]]
  • all tags can be called un-cached like: [[! snippet]]

Timing Tags (Evo and Revo)

  • [^qt^] - Query time
  • [^q^] - Query count
  • [^p^] - Parse time
  • [^t^] - Total time
  • [^s^] - Source
© modxRULES! 2009-2014