Joomla Templates Club 406,261 posts

[cnadm Friend cnadmJoin date: December 2006Posts: 43Downloads:0Uploads:3 Thanks: 6]

#159528

I would like to have to columns like you have in the demo page:
http://screencast.com/t/qUP6ieLxtQR

I’ve been triyng with some div classes, but can’t make it work?… Is there a guide somewhere, where I can copy/paste the code, so I can build 2 columns of content like in the demo?

[cagnanovaranoadmin Friend cagnanovaranoadminJoin date: January 2011Posts: 9Downloads:0Uploads:0 Thanked: 5 times in 2 posts]

#374651

<em>@cnadm 218491 wrote:</em><blockquote>
I would like to have to columns like you have in the demo page:
I’ve been triyng with some div classes, but can’t make it work?… Is there a guide somewhere, where I can copy/paste the code, so I can build 2 columns of content like in the demo?
</blockquote>

The right way to get the job done is to modify the layout accoring to this giude.

[cnadm Friend cnadmJoin date: December 2006Posts: 43Downloads:0Uploads:3 Thanks: 6]

#374678

Just had a look at the guide, but it seems like it’s the overall template style I can modify there?…..

I’m interested in using the div classes etc. in content items.

[Phill Moderator PhillJoin date: February 2014Posts: 7013Downloads:40Uploads:77 Thanks: 917 Thanked: 2206 times in 1818 posts]

#374696

Your best bet would be to install the quickstart on your localhost using a tool such as Wamp (http://www.wampserver.com/en/. You will then have an exact copy og the template running on your desktop with all the demo content included so you can see exactly how it is done.

Below is the code from that page taken from such an install.

<div id="ja-typo"><!-- JA TYPO -->
<h1>Typography 1</h1>
<p>This page presents most of typographical aspects of JA T3v2 Framework. <span class="highlight">Make your readers happy</span> with great Typography and User Experience!</p>
<!-- PREFORMATTED TEXT -->
<div class="ja-typo-blockswrap clearfix">
<div class="ja-typo-blockrow cols-1 clearfix">
<div class="ja-typo-block">
<h1>This is an Heading 1</h1>
<p>Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.</p>
<h2>This is an Heading 2.</h2>
<p>Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.</p>
<h3>This is an Heading 3</h3>
<p>Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.</p>
<h4>This is an Heading 4</h4>
<p>Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.</p>
<h5>This is an Heading 5</h5>
<p>Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit. Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.</p>
</div>
</div>
</div>
<!-- //PREFORMATTED TEXT --> <!-- LISTS STYLE -->
<div class="ja-typo-blockswrap clearfix">
<h1>Lists Style</h1>
<div class="ja-typo-blockrow cols-2 clearfix">
<div class="ja-typo-block first clearfix">
<div class="ja-typo-blockct clearfix"><ol>
<li>This is a sample <strong>Ordered List</strong>.</li>
<li>Lorem ipsum dolor sit amet consectetur</li>
<li>Lorem ipsum dolor sit amet consectetur</li>
</ol></div>
</div>
<div class="ja-typo-block last">
<div class="ja-typo-blockct clearfix">
<ul class="ja-typo-list list-bullet">
<li>This is a sample <strong>Disc List</strong>.</li>
<li>Lorem ipsum dolor sit amet consectetur</li>
<li>Lorem ipsum dolor sit amet consectetur</li>
</ul>
</div>
</div>
</div>
<div class="ja-typo-blockrow cols-2 clearfix">
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<ul class="ja-typo-list list-arrow">
<li><span class="icon"> </span>This is a sample <strong>Arrow list</strong>.</li>
<li><span class="icon"> </span>Use <strong><ul class="ja-typo-list list-arrow"><li><span class="icon"> </span>List's content goes here!</li></ul></strong></li>
<li><span class="icon"> </span>This is a sample Arrowlist.</li>
</ul>
</div>
</div>
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<ul class="ja-typo-list list-star">
<li><span class="icon"> </span>This is a sample <strong>Star list</strong>.</li>
<li><span class="icon"> </span>Use <strong><ul class="ja-typo-list list-star"><li><span class="icon"> </span>List's content goes here!</li></ul></strong></li>
<li><span class="icon"> </span>This is a sample Starlist.</li>
</ul>
</div>
</div>
</div>
<div class="ja-typo-blockrow cols-2 clearfix">
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<ul class="ja-typo-list list-home">
<li><span class="icon"> </span>This is a sample <strong>Home list</strong>.</li>
<li><span class="icon"> </span>Use <strong><ul class="ja-typo-list list-home"><li><span class="icon"> </span>List's content goes here!</li></ul></strong></li>
<li><span class="icon"> </span>This is a sample Checklist.</li>
</ul>
</div>
</div>
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<ul class="ja-typo-list list-cal">
<li><span class="icon"> </span>This is a sample <strong>Cal list</strong>.</li>
<li><span class="icon"> </span>Use <strong><ul class="ja-typo-list list-cal"><li><span class="icon"> </span>List's content goes here!</li></ul></strong></li>
<li><span class="icon"> </span>This is a sample Checklist.</li>
</ul>
</div>
</div>
</div>
<div class="ja-typo-blockrow cols-2 clearfix">
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<ul class="ja-typo-list list-check">
<li><span class="icon"> </span>This is a sample <strong>Check list</strong>.</li>
<li><span class="icon"> </span>Use <strong><ul class="ja-typo-list list-check"><li><span class="icon"> </span>List's content goes here!</li></ul></strong></li>
<li><span class="icon"> </span>This is a sample Checklist.</li>
</ul>
</div>
</div>
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<ul class="ja-typo-list list-email">
<li><span class="icon"> </span>This is a sample <strong>Email list</strong>.</li>
<li><span class="icon"> </span>Use <strong><ul class="ja-typo-list list-email"><li><span class="icon"> </span>List's content goes here!</li></ul></strong></li>
<li><span class="icon"> </span>This is a sample Checklist.</li>
</ul>
</div>
</div>
</div>
<div class="ja-typo-blockrow cols-2 clearfix">
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<p class="blocknumber blocknumber-1"><span class="bignumber">a</span>Use <strong><p class="blocknumber blocknumber-1"><span class="bignumber">01</span>Your content goes here!</p></strong></p>
<p class="blocknumber blocknumber-2"><span class="bignumber">b</span>Use <strong><p class="blocknumber blocknumber-2"><span class="bignumber">B</span>Your content goes here!</p></strong></p>
<p class="blocknumber blocknumber-3"><span class="bignumber">c</span>Use <strong><p class="blocknumber blocknumber-3"><span class="bignumber">C</span>Your content goes here!</p></strong></p>
</div>
</div>
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<p class="blocknumber blocknumber-4"><span class="bignumber">d</span>Use <strong><p class="blocknumber blocknumber-4"><span class="bignumber">a</span>Your content goes here!</p></strong></p>
<p class="blocknumber blocknumber-5"><span class="bignumber">e</span>Use <strong><p class="blocknumber blocknumber-5"><span class="bignumber">b</span>Your content goes here!</p></strong></p>
<p class="blocknumber blocknumber-6"><span class="bignumber">f</span>Use <strong><p class="blocknumber blocknumber-6"><span class="bignumber">c</span>Your content goes here!</p></strong></p>
</div>
</div>
</div>
</div>
<!-- //LISTS STYLE --> <!-- //JA TYPO --></div>
<p>{jacomment disable}</p>

[cnadm Friend cnadmJoin date: December 2006Posts: 43Downloads:0Uploads:3 Thanks: 6]

#374700

Thanks :-)… I tried the Demo Builder and copyed the source code from that one

[cagnanovaranoadmin Friend cagnanovaranoadminJoin date: January 2011Posts: 9Downloads:0Uploads:0 Thanked: 5 times in 2 posts]

#374702

<em>@phill luckhurst 218808 wrote:</em><blockquote>
Your best bet would be to install the quickstart on your localhost using a tool such as Wamp (http://www.wampserver.com/en/. You will then have an exact copy og the template running on your desktop with all the demo content included so you can see exactly how it is done.
</blockquote>

Or you can just take a look at the source code visiting the demo website and then running Firebug if you are using Firefox, or Inspect element if you’re using Chrome. Much easier.

[Author]

Posts