Joomla Templates Club 406,261 posts

[teqilajazz Friend teqilajazzJoin date: June 2013Posts: 5Downloads:0Uploads:5 Thanks: 2]

#189522

Hi guys! I am working on JA University theme for Joomla. Anyone knows how can I create/combine 2 or 3 columns on one page? I’ll really appreciate for any advices! Please have a look a screenshoot below. Thanks!

---

Attachments:

1. 

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#501475

Hi teqilajazz,

This is custom HTML of article (Typography): http://prntscr.com/1jufts

<div class="ja-typo-blockrow cols-3 clearfix">
<h2 class="ja-typo-title"><span>Block Number</span></h2>
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<p class="blocknumber blocknumber-1"><span class="bignumber">01</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
<p class="blocknumber blocknumber-1"><span class="bignumber">02</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
<p class="blocknumber blocknumber-1"><span class="bignumber">03</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
</div>
</div>
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<p class="blocknumber blocknumber-2"><span class="bignumber">I</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
<p class="blocknumber blocknumber-2"><span class="bignumber">II</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
<p class="blocknumber blocknumber-2"><span class="bignumber">III</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
</div>
</div>
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<p class="blocknumber blocknumber-3"><span class="bignumber">i</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
<p class="blocknumber blocknumber-3"><span class="bignumber">ii</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
<p class="blocknumber blocknumber-3"><span class="bignumber">iii</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
</div>
</div>
</div>
</div>
<div class="ja-typo-blockswrap clearfix">
<h1 class="ja-typo-title"><span>Icons Style</span></h1>
<div class="ja-typo-blockrow cols-2 clearfix">
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<p class="ja-typo-icon icon-error">Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
<p class="ja-typo-icon icon-message"><span class="icon">*</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
<p class="ja-typo-icon icon-tips"><span class="icon">*</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
<p class="ja-typo-icon icon-key"><span class="icon">*</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
<p class="ja-typo-icon icon-tag"><span class="icon">*</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
</div>
</div>
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<p class="ja-typo-icon icon-cart"><span class="icon">*</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
<p class="ja-typo-icon icon-doc"><span class="icon">*</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
<p class="ja-typo-icon icon-note"><span class="icon">*</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
<p class="ja-typo-icon icon-photo"><span class="icon">*</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
<p class="ja-typo-icon icon-mobi"><span class="icon">*</span>Lorem ipsum dolor sit amet consectetuer rutrum dignissim et neque id. Interdum pharetra in a metus congue In Sed Pellentesque tincidunt pharetra.</p>
</div>
</div>
</div>
</div>

You can customize HTML code in article.

REMEMBER: Before you add HTML code, please change default Editor to “Editor – None”. ( http://prntscr.com/1jugjy )

Regards,

Nazario

[Author]

Posts