In the HTML directory folder, include an XML fIle titled _cb-styles.xml structured like the following:

<?xml version="1.0" encoding="iso-8859-1"?> 
<cbstyles> 
     <style> 
          <css name="header"><![CDATA[]]></css> 
          <css name="header h3"><![CDATA[]]></css> 
          <css name="body"><![CDATA[]]></css> 
          <css name="footer"><![CDATA[]]></css> 
     </style>
</cbstyles>

Each "style" node you add is a separate CB style that is added to the client's options in perpetua for their content box header, body and footer.

Standard Non-Complex Images

When cutting the images for the header, body and footer of a content box style, if it was concepted as a rectangular image, slice the image the height of the concept and the full width of your content area. 

Complex Images

If the concepted style has a border, textured, rounded/beveled or would in any way look not true to concept if cropped on the right side to fit in a smaller column than the width of the image, create the concepted image at varying sizes (generally a 30%, 50%, 70% and 100% width of the content area).

Labeling and Placement

For consistency and simplicity label the images you cut as "cb_1_header.jpg", "cb_3_body.jpg", etc. and place them in the /images/layouts directory in the HTML folder.

Within the _cb-styles.xml file, between the CDATA brackets, you can control the styling of the CB styles through CSS.

Example:

<style>
  <css name="header"><![CDATA[ 
    text-align: left; 
    padding:10px 0px 0px 20px; 
    line-height: 30px; 
    height: 40px; 
    background: url(/images/layouts/cb_2_header.png) bottom left no-repeat; 
  ]]></css>
  
  <css name="header h3"><![CDATA[]]>
  
  </css> <css name="body"><![CDATA[ 
    text-align: left; 
    padding: 10px 15px 10px 15px; 
    line-height: 30px; 
    background: url(/images/layouts/cb_2_body.png) bottom left repeat-y; 
  ]]></css>
  
  <css name="footer"><![CDATA[ 
    text-align: left; 
    padding: 0px 0px 0px 20px; 
    line-height: 30px; 
    height: 40px; 
    background: url(/images/layouts/cb_2_footer.png) bottom left no-repeat; 
  ]]></css>
</style>;

Note

Do not put a set width on any CB style as it will cause it to run into other columns or outside of the content area in IE.