Your REW Site: Styled Call-out Boxes

Your content will look prettier, better organized, and more professional if you can put calls to action (or other distinct units of text) into their own boxes within the body, like this:

Your Real Estate Webmasters site, whether it's a templated design or fully custom, comes pre-installed with at least 3 options for this kind of callout box. There are two CSS classes ("highlight" and "important") and the HTML "blockquote".

Blockquote

This markup should create an effect on any html page, indenting the text contained within it. REW sites format blockquotes as a box with a thin black border and a quotation mark graphic, like this:

To put text in a blockquote, just surround it with the blockquote tags:

       <blockquote>Your text here.</blockquote>

NOTE! This will not work within our LEC templates (limited edition customs). To make the blokquotes work in the LEC's, you have to include paragraph tags within the blokquote tags, like this:

       <blockquote><p>Your text here.</p></blockquote>

Classes: "Highlight" and "Important"

In your HTML, you can place the "class" attribute onto a block of text or a div. Then, you specify which class it will be. It's easy:

      <p class="highlight">Your text here.</p>

      <p class="important">Your text here.</p>

These two classes should put your text into shaded boxes, each with its own distinct colour. Here are examples:

As I mentioned, you can assign these classes to more than one paragraph, by putting them onto divs instead of paragraphs.

      <div class="highlight">
      <p>A paragraph.</p>
      <p>A second paragraph.</p>
      </div>

This will produce an effect like this:

• Rate this Post!

  Select Your Rating:

  • 5 Stars (Excellent!)
  • 4 Stars
  • 3 Stars
  • 2 Stars
  • 1 Stars (Poor)

• Share this Post

  Share With A Friend:

  Your Name Your Email

  Friend's Name Friend's Email

  Optional Message

  Send

• Print
• Social Bookmarking

  Add to Bookmarks: