OKC WebWorks affordable business, Ecommerce, Domain & VPS Hosting Service

Web Hosting & Design

Info Box Info

Duplicating info boxes...

To duplicate info boxes, click within the box and go to Table > Select > Table, then Table > Select > Cell, then Table > Select > Table. Edit > Copy and Edit > Paste.

When you first duplicate an info box, the font will not be formatted correctly inside the content table cell. To fix this, place your cursor inside the table cell and switch to HTML view. Your code should look something like this:

<td>Your text here</td>

Add the tags for a "paragraph" before and after your text, like this:

<td><p>Your text here</p></td>

This should fix the formatting.

Changing color of info boxes...

The info box color is controlled by the ".headerbar" and ".headerbarborder" styles in the stylesheet, styles.css. You will also need to modify the color of the curved images using the Photoshop file "headerbar.psd."

Inserting breaks between info boxes...

To insert breaks between info boxes, place your cursor in the title bar of the box and switch to HTML view. You should see code like:

 </tr>
</table>
<table summary="This table is used for layout purposes." cellspacing="0" ...>
 <tr>
  <td>
  <table ...>
    <tr>
     <td class="headerbar"...><img ...></td>
     <td class="headerbar" width="100%">
     Info box title...</td>
    </tr>
  </table>
</td>

Your cursor should be near your info box title.

You will want to go up in the code and find the second table code. As shown below, you'll want to insert the code for a break:

 </tr>
</table>
<br>
<table cellspacing="0" ...>
 <tr>
  <td>
  <table ...>
    <tr>
     <td class="headerbar"...><img ...></td>
     <td class="headerbar" width="100%">
     Info box title...</td>
    </tr>
  </table>
</td>