CCM supports use of custom classes on both row and column elements. Your customization options, therefore, are virtually limitless. Let's say that your CCM structure requires two flexible 2-column rows. The first row needs a left column that is 60% wide and a right column that is 40% wide. The second row needs a left column that is 40% wide and a right column that is 60% wide. All you need to do is define 2 custom CSS classes:
.custom-60 { width: 60% !important; }
.custom-40 { width: 40% !important; }
You can add these rules to the bottom of your CCM style sheet, or in another style sheet linked to your page. The !important notation will prevent inheritance issues if you place the rules in a style sheet that comes before the CCM style sheet.
Create your CCM structure and set your row configuration to 2-Column Auto Width. Switch to Code View and locate the DIVs that define column width, which look like this:
<div class="p7ccm01-2col-auto-column1 p7ccm-col">
<div class="p7ccm01-2col-auto-column2 p7ccm-col">
Simply append each with the appropriate custom class:
<div class="p7ccm01-2col-auto-column1 p7ccm-col custom-60">
<div class="p7ccm01-2col-auto-column2 p7ccm-col custom-40">
Absolutely. The CCM interface will allow you to edit your structure and your custom classes will be preserved.
Here is a CCM structure using the custom classes we just described:
The Top and bottom rows in this Column Composer Magic structure use custom classes to define custom widths for each of the columns. This would make it very easy for you to create mult-column headers and footers.
Lorem ipsum dolor sit amet, ne sea vocent scripta abhorreant, facilisi explicari mel ne, ut quo vide ridens. Mei ex quodsi inciderint, quo ad quas deleniti definitionem, vis no wisi graecis offendit. Lorem ipsum dolor sit amet, ne sea vocent scripta abhorreant, facilisi explicari mel ne, ut quo vide ridens. Mei ex quodsi inciderint, quo ad quas deleniti definitionem, vis no wisi graecis offendit.
Column Composer Magic. The possibilities are endless.