Joomla Templates Club 406,261 posts

[santoshalom Friend santoshalomJoin date: February 2009Posts: 119Downloads:0Uploads:22 Thanks: 67 Thanked: 14 times in 1 posts]

#172235

What html code i have to use to achieve 2 rows and 2 or more colums for message box with icon inside?
i used quickstart but it is not working for me. either i get only 1 row or not getting anything
i am planning to apply this inside a html module

thanks for your help

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#431653

In what part of your JA Events based site are you wanting to achieve this?

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#431659

Hi
There you are:


<div class="ja-typo-blockrow cols-2 clearfix">
<!-- Left -->
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<p class="ja-typo-box box-sticky">This is a sticky. Use <strong><p class="box-sticky">Your clip note goes here!</p></strong> to create a clip note!</p>
<p class="ja-typo-box box-download">This is a download box. Use <strong><p class="box-download">Your download goes here!</p></strong> to create a download box!</p>
</div>
</div>
<!– Right –>

<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<p class="ja-typo-box box-grey-1">This is a grey box. Use <strong><p class="box-grey">Your content goes here!</p></strong> to create a grey box!</p>
<p class="ja-typo-box box-hilite-1">This is a hilite box. Use <strong><p class="box-hilite">Your content goes here!</p></strong> to create a hilite box!</p>
</div>
</div>
</div>
In each side we have <p> for a row. 2 <p> is 2 row.
And if you want to have more than 2 cols you can add more block <div class=”ja-typo-block”>

Thank you

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#431677

So Joo . . . This will work for ANY part of his website – anywhere?

Do you even know which part of shantoshalom’s site he is wanting to integrate his dual columns – so that your presumed recommendation will fit into his layout? I think getting a bit more specific information as to this issue will better and more thoroughly serve shantoshalom’s development issue(s), don’t you?

@shantoshalom . . .

In what part(s)/page(s)of your JA Events based site are you wanting to integrate this dual column display?

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#431705

<em>@TomC 291795 wrote:</em><blockquote>So Joo . . . This will work for ANY part of his website – anywhere?

Do you even know which part of shantoshalom’s site he is wanting to integrate his dual columns – so that your presumed recommendation will fit into his layout? I think getting a bit more specific information as to this issue will better and more thoroughly serve shantoshalom’s development issue(s), don’t you?

@shantoshalom . . .

In what part(s)/page(s)of your JA Events based site are you wanting to integrate this dual column display?

</blockquote>
If you can clearly what’s HTML code you should have answer .
That’s Typography of this template get from demo to let’s know how to use.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#431742

jooservices;291829if you can clearly what’s html code you should have answer .

huh?

---

Attachments:

1. 

[santoshalom Friend santoshalomJoin date: February 2009Posts: 119Downloads:0Uploads:22 Thanks: 67 Thanked: 14 times in 1 posts]

#431791

Thanks for your help but Sorry fellas that script didn’t work. it broke my ja event layout. the ja event menu went down and footer is messed up.

i am planning to apply this code on my home page- content-top module position using
Module Custom HTML

so my i am with this script now

<p class=”ja-typo-box box-sticky”>Tittle-1 <br /> aaa<br /> bbb<br /> ccc<br /> ddd</p>
<p class=”ja-typo-box box-sticky”>Tittle-2 <br /> aaa<br /> bbb<br /> ccc<br /> ddd</p>
<p class=”ja-typo-box box-sticky”>Tittle-3 <br /> aaa<br /> bbb<br /> ccc<br /> ddd</p>
<p class=”ja-typo-box box-sticky”>Tittle-4 <br /> aaa<br /> bbb<br /> ccc<br /> ddd</p>

but this will not help me to achieve what i am looking for. any more suggestion for

2 rows and 2 or more colums?

thanks in advance.

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#431798

<em>@santoshalom 291936 wrote:</em><blockquote>Thanks for your help but Sorry fellas that script didn’t work. it broke my ja event layout. the ja event menu went down and footer is messed up.[/quote]
Unfortunately – absent a bit more concise information as to what it is exactly you are wanting to accomplish – I feared such might occur. This is precisely why I wanted to dig a little deeper into your request and was asking you for a bit more explanation – perhaps even a mock-up screenshot image of what it is you are envisioning, and how you want/intend to implement it.

Might you be able to throw-together a screenshot of the “end result” you are looking to achieve?

[santoshalom Friend santoshalomJoin date: February 2009Posts: 119Downloads:0Uploads:22 Thanks: 67 Thanked: 14 times in 1 posts]

#431845

what is i get:
This is what i get with above script.

Goal:
this is what i want to achieve

i hope this will help to understand what i want.

i just want have same as quickstart demo with two rows and two or more columns.. inside a module- content-top

How i plan to implement????????

i am planning to apply this code on my home page “content-top” module position using
Module Custom HTML

Sorry. i am not sure how much more clarification you need than this please let me know

---

Attachments:

1. 
2. 

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#431862

Hi
Yes.
That’s exactly what did i show you in HTML code


<div class="ja-typo-blockrow cols-2 clearfix">
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<p class="ja-typo-box box-sticky">This is a sticky. Use <strong><p class="box-sticky">Your clip note goes here!</p></strong> to create a clip note!</p>
<p class="ja-typo-box box-download">This is a download box. Use <strong><p class="box-download">Your download goes here!</p></strong> to create a download box!</p>
</div>
</div>

<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<p class="ja-typo-box box-grey-1">This is a grey box. Use <strong><p class="box-grey">Your content goes here!</p></strong> to create a grey box!</p>
<p class="ja-typo-box box-hilite-1">This is a hilite box. Use <strong><p class="box-hilite">Your content goes here!</p></strong> to create a hilite box!</p>
</div>
</div>

</div>

And this is complete code from quickstart

<div id="ja-typo"><!-- MESSAGE BOXES & LEGEND STYLE -->
<div class="ja-typo-blockswrap clearfix">
<h1><span>Message Boxes & Legend Styles</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-box box-sticky">This is a sticky. Use <strong><p class="box-sticky">Your clip note goes here!</p></strong> to create a clip note!</p>
<p class="ja-typo-box box-download">This is a download box. Use <strong><p class="box-download">Your download goes here!</p></strong> to create a download box!</p>
</div>
</div>
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<p class="ja-typo-box box-grey-1">This is a grey box. Use <strong><p class="box-grey">Your content goes here!</p></strong> to create a grey box!</p>
<p class="ja-typo-box box-hilite-1">This is a hilite box. Use <strong><p class="box-hilite">Your content goes here!</p></strong> to create a hilite box!</p>
</div>
</div>
</div>
<div class="ja-typo-blockrow cols-2 clearfix">
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<p class="ja-typo-box box-grey-2">This is a grey box. Use <strong><p class="box-grey">Your content goes here!</p></strong> to create a grey box!</p>
</div>
</div>
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<p class="ja-typo-box box-hilite-2">This is a hilite box. Use <strong><p class="box-hilite">Your content goes here!</p></strong> to create a hilite box!</p>
</div>
</div>
</div>
<div class="ja-typo-blockrow cols-2 clearfix">
<h2><span>Legends</span></h2>
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<div class="ja-typo-legend legend-1">
<h3 class="legend-title">Legend - Style 1</h3>
Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.</div>
</div>
</div>
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<div class="ja-typo-legend legend-2">
<h3 class="legend-title">Legend - Style 2</h3>
Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.</div>
</div>
</div>
</div>
<div class="ja-typo-blockrow cols-2 clearfix">
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<div class="ja-typo-legend legend-rounded legend-1">
<h3 class="legend-title">Rounded Legend - Style 1</h3>
Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.</div>
</div>
</div>
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<div class="ja-typo-legend legend-rounded legend-2">
<h3 class="legend-title">Rounded Legend - Style 2</h3>
Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae.</div>
</div>
</div>
</div>
</div>
<!-- //MESSAGE BOXES & LEGEND STYLE --> <!-- SPECIAL MODULE STYLE -->
<div class="ja-typo-blockswrap clearfix">
<h1><span>Special Module Style</span></h1>
<div class="ja-typo-blockrow cols-2 clearfix">
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<div class="moduletable moduletable_badge badge-top"><span class="badge"> </span>
<div class="ja-box-ct">Use module suffix: <strong>_badge badge-top</strong> to put this badge on any module you like!</div>
</div>
</div>
</div>
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<div class="moduletable moduletable_badge badge-new"><span class="badge"> </span>
<div class="ja-box-ct">Use module suffix: <strong>_badge badge-new</strong> to put this badge on any module you like!</div>
</div>
</div>
</div>
</div>
<div class="ja-typo-blockrow cols-2 clearfix">
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<div class="moduletable moduletable_badge badge-pick"><span class="badge"> </span>
<div class="ja-box-ct">Use module suffix: <strong>_badge badge-pick</strong> to put this badge on any module you like!</div>
</div>
</div>
</div>
<div class="ja-typo-block">
<div class="ja-typo-blockct clearfix">
<div class="moduletable moduletable_badge badge-hot" style="margin-right: 0;"><span class="badge"> </span>
<div class="ja-box-ct">Use module suffix: <strong>_badge badge-hot</strong> to put this badge on any module you like!</div>
</div>
</div>
</div>
</div>
</div>
<!-- //SPECIAL MODULE STYLE --></div>
<p>{jacomment disable}</p>

1 user says Thank You to jooservices for this useful post

1. santoshalom

[santoshalom Friend santoshalomJoin date: February 2009Posts: 119Downloads:0Uploads:22 Thanks: 67 Thanked: 14 times in 1 posts]

#431924

thanks a lot jooservices.. it sort of worked out.

[Author]

Posts