Overview
Claromentis 7 uses front-end framework called Bootstrap 2 while Claromentis 8 has incorporate newer version of this framework: Bootstrap 3.
There are some major changes between both versions. Bootstrap 2 is no longer supported by the developer.
This article described on how to convert your publish template which you may have created in Claromentis 7 to be compatible with Claromentis 8
Prerequisite
You need to be comfortable making changes in HTML codes
Access to Publish Admin panel and edit the template content
Step 1: - Updating Grid Layout
Replace
<div class=”spanX”> to <div class=”col-sm-X”>
X= number
For example
<div class=”span8”> to <div class=”col-sm-8”> <div class=”span4”> to <div class=”col-sm-4”>
Step 2 – Replacing Infobox with Panel
<div class=”infobox”>
to
<div class="panel panel-default">
Step 3 - Replacing h3 within infobox with panel-heading
<div class="infobox"> <h3><span name="e_main_title" pub_type="string">Enter title here</span></h3> ...
to
<div class="panel panel-default"> <div class="panel-heading"><span name="e_main_title" pub_type="string">Enter title here</span></div> ...
Step 4 - Replacing content area with panel-body
Replace class="body" within infobox with class="panel-body". For example you may have :
<div class="infobox"> <h3><span name="e_main_title" pub_type="string">Enter title here</span></h3> <div class="body" name="e_box_a_content" pub_type="text" >Enter content here.. </div> </div>
change those to:
<div class="panel panel-default"> <div class="panel-heading"><span name="e_main_title" pub_type="string">Enter title here</span></div> <div class="panel-body" name="e_box_a_content" pub_type="text">Enter content here.. </div> </div>
Step 5 - Updating Edit Me Button at the bottom
At the bottom you'll find edit me button which needs to be updated:
<div name="e_cla_editme" class="well"> <a href="#" name="e_cla_editme_link" class="btn"><span class="cla-icon-pencil"></span>Edit</a> </div>
to
<div name="e_cla_editme" class="well well-sm"> <a href="#" name="e_cla_editme_link" class="btn btn-default"><span class="glyphicons glyphicons-pencil"></span>Edit</a> </div>