Converting Publish Templates from Claromentis 7 to 8

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>

 

 

 

 

 

Last modified on 30 November 2023 by Hannah Door
Created on 7 October 2016 by Michael Christian

Was this helpful?  

Share