Create theme with three columns in Joomla


Author Message
Mark

Posted: 8/26/2011
Quote message 

When I download a theme like this -
http://templatefiles.artisteer.com/62/HTML/index.html
in artx format, then I change it to Joomla format , the three column/two row format of the main content converts to a single column. How would I go about retaining the three column format in Joomla using artisteer?
 
jrgweb

Posted: 8/27/2011
Quote message 

This video may help.
http://jrgweb.net/resourcesweb/tut/item/199-artisteer-project-to-joomla

Export your template as normal.
Go to joomla and install
In joomla, go to articles and create.
paste the below HTML in the article.
download images from artisteer if you plan to use the same.
Go to menu, Home, and set the article you just created.



<table class="art-article" border="0" cellspacing="0" cellpadding="0" style="margin:0;width:100%;">
<tbody>
<tr>
<td style="background-color:rgb(240, 240, 240);border:0;padding:15px;width:33%;">
<h1>EXPERT SOLUTIONS</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra, tellus sit amet congue vulputate, nisi erat iaculis nibh, vitae feugiat sapien ante eget mauris. Cras elit nisl, rhoncus nec iaculis ultricies, feugiat eget sapien.</p>
<p><span class="art-button-wrapper"><span class="art-button-l"> </span><span class="art-button-r"> </span><a href="#" class="art-button">Read More </a></span></p>
</td>
<td style="background-color:#f0f0f0;border:0;padding:15px;width:33%;">
<h1>PUBLIC RELATIONS</h1>
<p>Aenean sollicitudin imperdiet arcu, vitae dignissim est posuere id. Duis placerat justo eu nunc interdum ultrices. Phasellus elit dolor, porttitor id consectetur sit amet, posuere id magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><span class="art-button-wrapper"><span class="art-button-l"> </span><span class="art-button-r"> </span><a href="#" class="art-button">Read More </a></span></p>
</td>
<td style="background-color:rgb(240, 240, 240);border:0;padding:15px;width:33%;">
<h1>TARGET MARKETING</h1>
<p>Suspendisse pharetra auctor pharetra. Nunc a sollicitudin est. Curabitur ullamcorper gravida felis, sit amet scelerisque lorem iaculis sed. Donec vel neque in neque porta venenatis sed sit amet lectus. Fusce ornare elit nisl, feugiat bibendum lorem.</p>
<p><span class="art-button-wrapper"><span class="art-button-l"> </span><span class="art-button-r"> </span><a href="#" class="art-button">Read More </a></span></p>
</td>
</tr>
<tr>
<td style="border:0;padding:15px;width:33%;">
<h1>LATEST NEWS</h1>
<span style="font-style:italic;"><span style="font-size:16px;">03/02/11</span></span><br />Lorem ipsum dolor sit amet Etiam pharetra, tellus sit amet congue vulputate, nisi erat iaculis nibh.&nbsp;<br /><br /><span style="font-style:italic;"><span style="font-size:16px;">02/15/11</span></span><br />Aenean sollicitudin<br />Duis placerat justo eu nunc interdum ultrices.&nbsp;Phasellus elit dolor, porttitor id.<br /><br /><span style="font-style:italic;"><span style="font-size:16px;">01/08/11</span></span><br />Phasellus elit dolor porttitor Consectetur sit amet, posuere id magna. Lorem ipsum dolor sit amet elit.&nbsp;<br /><br /><a href="#">Read more...</a>
</td>
<td style="border:0;padding:15px;width:33%;">
<h1>SUCCESS STORY</h1>
<img width="255" height="170" alt="" src="shutterstock_19883491.jpg" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pharetra, tellus sit amet congue vulputate, nisi erat iaculis nibh, vitae feugiat sapien ante eget mauris.</p>
<p><span class="art-button-wrapper"><span class="art-button-l"> </span><span class="art-button-r"> </span><a href="#" class="art-button">Read More </a></span></p>
</td>
<td style="border:0;padding:15px;width:33%;">
<h1>EXPERT ADVICE</h1>
<img width="257" height="172" alt="" src="shutterstock_46799410.jpg" />
<p>Suspendisse pharetra auctor pharetra. Nunc a sollicitudin est. Curabitur ullamcorper gravida felis, sit amet scelerisque lorem iaculis sed. Donec vel neque in neque.</p>
<p><span class="art-button-wrapper"><span class="art-button-l"> </span><span class="art-button-r"> </span><a href="#" class="art-button">Read More</a></span></p>
</td>
</tr>
</tbody>
</table>
<table class="art-article" border="0" cellspacing="0" cellpadding="0" style="margin:0;width:100%;">
<tbody>
<tr>
<td style="border:0;padding:15px;background-color:rgb(240, 240, 240);width:16%;">
<h1>Company</h1>
<ul>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Customers</a></li>
</ul>
</td>
<td style="border:0;padding:15px;background-color:rgb(240, 240, 240);width:17%;">
<h1>Information</h1>
<ul>
<li><a href="#">Projects</a></li>
<li><a href="#">Answers</a></li>
<li><a href="/contact-us">Contacts</a></li>
</ul>
</td>
<td style="border:0;padding:15px;background-color:rgb(240, 240, 240);width:16%;">
<h1>Community</h1>
<ul>
<li><a href="#">Subscribe</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Compaigns</a></li>
</ul>
</td>
<td style="border:0;padding:15px;background-color:rgb(240, 240, 240);width:20%;">
<h1>Downloads</h1>
<ul>
<li><a href="#">Press Releases</a></li>
<li><a href="#">Materials</a></li>
<li><a href="#">Demos</a></li>
</ul>
</td>
<td style="border:0;padding:15px;background-color:rgb(240, 240, 240);width:28%;">
<h1>Connections</h1>
<img width="64" height="64" alt="" src="rss.png" />&nbsp;&nbsp;<img width="64" height="64" alt="" src="facebook.png" />&nbsp;&nbsp;<img width="64" height="64" alt="" src="twitter.png" /><br />&nbsp;
</td>
</tr>
</tbody>
</table>