The Corporate 3 template for Joomla comes with 9 html column layout snippets as well as other in-page elements which are like mini-templates. A trendy thing with the WordPres community that uses this concept called “Shortcodes” which are almost like plugins for Joomla that let you add something to your page with a {something}content{/something} but with WordPress, it’s square brackets, allowing a person put a small bit of code into their page or post so they do not have to do any html coding:

EXAMPLE for a 3 column layout for WordPress where a person then copy and pastes the following into the html mode of their editor:

[c290]
<h2>Column Set 3 (290px)</h2>
<p>Add your content here</p>
[/c290]

[c290]
<h2>Column Set 3 (290px)</h2>
<p>Add your content here</p>
[/c290]

[c290_last]
<h2>Column Set 3 (290px)</h2>
<p>Add your content here</p>
[/c290_last]

Basically each group you see per column in the above example has pre-coded html that loads when a person views the page and would result in this layout:

3-column-shortcode

Of course, this is Joomla so you cannot use the Shortcode method of adding the above to your pages or articles, so the next option is to provide you with the actual HTML snippet of code for each layout that you copy & paste into your content area of the editor. This means you still don’t have to mess around with too much html but still gives Joomla users something that the WordPress theme offers.

So What is the Purpose or Usage of Something Like This?

There are times when someone needs a certain layout without having to change the template they are using or don’t want the core template columns or modules to be active (same goes for WordPress widget areas which are a bit messy to work with compared to the ease of use with Joomla modules). You can even use these in modules if the module is wide enough. Here are some examples of usage:

  • You need columns in the middle of your page or article
  • You need “multiple” column groups throughout your page or article
  • You want to use a full width page but have the option to use columns within your content
  • It helps give a user the ability to add html coding without having to code it themselves
  • HTML Snippets for this template also offers other elements like adding a button or a “Read More” link to content, or adding special Typography styles to their content.

The Joomla Version for this Template

This page is about to get very long but I will post all 9 column layouts here so you can copy & paste into your content, but you will also find the other snippets for elements that are “not” columns.

 

Column Snippets

Below are html snippets for columns only and includes a screenshot of what they look like, followed by the html code you would copy and paste into your html mode of your editor. If you want to see it live in action, visit the online demo for >>  HTML SNIPPETS.

IMPORTANT: Depending on the Joomla WYSIWYG editor that you use, some editor plugins (tinymce is the worst) are notorious for changing peoples code when they paste it into the window and after SAVING they discover it was completely removed or changed. Be aware that many do this but the editor that I STRONGLY RECOMMEND with Joomla is the JCE Editor because it has a lot of settings and one is to not have it touch your code.

The Column Set 1 gives you one full width 960 pixel wide column:

colset1

<div class=”columnset6 column1″>
<h2>Column Set 1 (960px)</h2>
<p>Add your content here</p>
</div>
<div class=”clearfix”></div>

 

The Column Set 2 gives you two equal width 460 pixel wide columns with a 40 pixel space between each column:

colset2

<h2>Column Set 2 (460px)</h2>
<p>Add your content here</p>
</div>

<div class="columnset4 column3 last">
<h2>Column Set 2 (460px)</h2>
<p>Add your content here</p>
</div>

<div class="clearfix"></div>

The Column Set 3 gives you three equal width 290 pixel wide columns with a 45 pixel space between each column:

colset3

<div class="columnset3 column4">
<h2>Column Set 3 (290px)</h2>
<p>Add your content here</p>
</div>

<div class="columnset3 column4">
<h2>Column Set 3 (290px)</h2>
<p>Add your content here</p>
</div>

<div class="columnset3 column4 last">
<h2>Column Set 3 (290px)</h2>
<p>Add your content here</p>
</div>

<div class="clearfix"></div>

The Column Set 4 gives you four equal width 210 pixel wide columns with a 40 pixel space between each column:

colset4

<div class="columnset2 column5">
<h2>Column Set 4 (210px)</h2>
<p>Add your content here</p>
</div>

<div class="columnset2 column5">
<h2>Column Set 4 (210px)</h2>
<p>Add your content here</p>
</div>

<div class="columnset2 column5">
<h2>Column Set 4 (210px)</h2>
<p>Add your content here</p>
</div>

<div class="columnset2 column5 last">
<h2>Column Set 4 (210px)</h2>
<p>Add your content here</p>
</div>

<div class="clearfix"></div>

The Column Set 5 gives you a left column at 210 pixel wide plus a right column at 710 pixels with a 40 pixel space between each column:

colset5

<div class="columnset2 column5">
<h2>Column Set 5 (210px)</h2>
<p>Add your content here</p>
</div>

<div class="columnset5 column2 last">
<h2>Column Set 5 (710px)</h2>
<p>Add your content here</p>
</div>

<div class="clearfix"></div>

The Column Set 6 gives you a left column at 710 pixel wide plus a right column at 210 pixels with a 40 pixel space between each column:

colset6

<div class="columnset5 column2">
<h2>Column Set 6 (710px)</h2>
<p>Add your content here.</p>
</div>

<div class="columnset2 column5 last">
<h2>Column Set 6 (210px)</h2>
<p>Add your content here.</p>
</div>

<div class="clearfix"></div>

The Column Set 7 gives you a left column at 210 pixel wide plus a middle column at 460 pixels plus a right column at 210 pixels with a 40 pixel space between each column:

colset7

<div class="columnset2 column5">
<h2>Column Set 7 (210px)</h2>
<p>Add your content here</p>
</div>

<div class="columnset4 column3">
<h2>Column Set 7 (460px)</h2>
<p>Add your content here</p>
</div>

<div class="columnset2 column5 last">
<h2>Column Set 7 (210px)</h2>
<p>Add your content here</p>
</div>

<div class="clearfix"></div>

The Column Set 8 gives you a left column at 460 pixel wide plus two right columns at 210 pixels each with a 40 pixel space between each column:

colset8

<div class="columnset4 column3">
<h2>Column Set 8 (460px)</h2>
<p>Add your content here</p>
</div>

<div class="columnset2 column5">
<h2>Column Set 8 (210px)</h2>
<p>Add your content here</p>
</div>

<div class="columnset2 column5 last">
<h2>Column Set 8 (210px)</h2>
<p>Add your content here</p>
</div>

<div class="clearfix"></div>

The Column Set 9 gives you two left columns at 210 pixel wide plus a right column at 460 pixels with a 40 pixel space between each column:

colset9

<div class="columnset2 column5">
<h2>Column Set 9 (210px)</h2>
<p>Add your content here</p>
</div>

<div class="columnset2 column5">
<h2>Column Set 9 (210px)</h2>
<p>Add your content here</p>
</div>

<div class="columnset4 column3 last">
<h2>Column Set 9 (460px)</h2>
<p>Add your content here</p>
</div>

<div class="clearfix"></div>

Enjoy!

By |2010-09-25T03:47:20+00:00September 25th, 2010|Blog|