Your REW Site: Styled Call-out Boxes

9,333 Views

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:

 example of a styled callout box

 

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:

 

Comments (8)

Enjoy this post? Why not share with friends or add a comment of your own?

Morgan Carey

Great tutorial Gerry, thanks :)

judyo

Thanks Gerry! For all the html I fool around with (I'm not good but have gotten better over the years) this is what I could never quite figure out. I've got some playing around to do.

Troy

For some reason, we can not get the <blockquote> to work properly. In the WYSIWYG backend CMS it works, but when we apply it, it doesn't show up on our website. Any suggestions?

GerryThomasen

Troy, you should post that issue in the work orders forum:

http://www.realestatewebmasters.com/current-projects-forum.html

Or call our CSR department at 250-753-9893.

Morgan Carey

If it is not functioning it should be posted in the CMS 2.0 forums not the work orders forum, or as Gerry says you can call CSR as well, they can help.

GerryThomasen

If anyone else is having the same problem that Troy had, try putting paragraph tags within the blockquote tags, like this:

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

Mark Naffziger

Great Post, makes highlighting call to actions very simple. Would be curious to know what determines the color of the highlight?

GerryThomasen

Hi Mark, that is built into the colour scheme of the site you are using. You can get different colour options with a small work order.

Share your thoughts…