Joomla Templates Club 406,261 posts

[iwadeaz Friend iwadeazJoin date: January 2008Posts: 100Downloads:0Uploads:3 Thanks: 18]

#191237

My client wants me to add six or more testimonials in two columns of “Happy Clients” testimonials, I want the columns scalable for mobile devices. While I am able to view the first two in demo-code, when i add more it doesn’t view correctly… how do i do this (add more)??

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#508421

Hi iwadeaz,

You can add 3 testimonials into each column separated by a span6 width, the HTML format should be:

<div class="span6 column1">
<div class="testimonial">1</div>
<div class="testimonial">2</div>
<div class="testimonial">3</div>
</div>

<div class="span6 column2">
<div class="testimonial">1</div>
<div class="testimonial">2</div>
<div class="testimonial">3</div>
</div>


[iwadeaz Friend iwadeazJoin date: January 2008Posts: 100Downloads:0Uploads:3 Thanks: 18]

#508518

I did that, (pasted code) but it still shows one column with 6 numbers…??

1
2
3
1
2
3

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#508524

Hi iwadeaz,

If possible, can you paste all HTML content of Happy Clients module (Custom HTML) here ? I will check and give back to you the correct format of that HTML content to make the testimonials separated into 2 columns.

[iwadeaz Friend iwadeazJoin date: January 2008Posts: 100Downloads:0Uploads:3 Thanks: 18]

#508554

Well basically it’s the same that you gave me:

<div class=”span6 column1″>
<div class=”testimonial”>1</div>
<div class=”testimonial”>2</div>
<div class=”testimonial”>3</div>
</div>

<div class=”span6 column2″>
<div class=”testimonial”>1</div>
<div class=”testimonial”>2</div>
<div class=”testimonial”>3</div>
</div>

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#508559

Hi iwadeaz,

That is just the sample HTML format i guided you, not full content to show like the demo. Well, you can try with our default content of Happy Clients module below, make sure that you set Editor – None to Default Editor in Global Configuration.


<div class="span6 column1 ">

<div class="testimonial">
<img class="img-grayscale" src="images/joomlart/demo/avartar-1.jpg" alt="Sample image" />
<blockquote>
<p>Suspendisse in lorem ipsum ut magna pharera aliquet non sodales lorem ipsum belit. Donec sed odio rera aliquet. Nulla vitae elit libero, a pharetra augue.</p>
<small>Benjamin Dyer, <cite title="Source Title">Dribbble</cite></small>
</blockquote>
</div>

<div class="testimonial">
<img class="img-grayscale" src="images/joomlart/demo/avartar-1.jpg" alt="Sample image" />
<blockquote>
<p>Suspendisse in lorem ipsum ut magna pharera aliquet non sodales lorem ipsum belit. Donec sed odio rera aliquet. Nulla vitae elit libero, a pharetra augue.</p>
<small>Benjamin Dyer, <cite title="Source Title">Dribbble</cite></small>
</blockquote>
</div>

<div class="testimonial">
<img class="img-grayscale" src="images/joomlart/demo/avartar-1.jpg" alt="Sample image" />
<blockquote>
<p>Suspendisse in lorem ipsum ut magna pharera aliquet non sodales lorem ipsum belit. Donec sed odio rera aliquet. Nulla vitae elit libero, a pharetra augue.</p>
<small>Benjamin Dyer, <cite title="Source Title">Dribbble</cite></small>
</blockquote>
</div>

</div>

<div class="span6 column2">
<div class="testimonial">
<img class="img-grayscale" src="images/joomlart/demo/avartar-2.jpg" alt="Sample image" />
<blockquote>
<p>Suspendisse in lorem ipsum ut magna pharera aliquet non sodales lorem ipsum belit. Donec sed odio rera aliquet. Nulla vitae elit libero, a pharetra augue.</p>
<small>Jay Robinson, <cite title="Source Title">Circle</cite></small>
</blockquote>
</div>

<div class="testimonial">
<img class="img-grayscale" src="images/joomlart/demo/avartar-2.jpg" alt="Sample image" />
<blockquote>
<p>Suspendisse in lorem ipsum ut magna pharera aliquet non sodales lorem ipsum belit. Donec sed odio rera aliquet. Nulla vitae elit libero, a pharetra augue.</p>
<small>Jay Robinson, <cite title="Source Title">Circle</cite></small>
</blockquote>
</div>

<div class="testimonial">
<img class="img-grayscale" src="images/joomlart/demo/avartar-2.jpg" alt="Sample image" />
<blockquote>
<p>Suspendisse in lorem ipsum ut magna pharera aliquet non sodales lorem ipsum belit. Donec sed odio rera aliquet. Nulla vitae elit libero, a pharetra augue.</p>
<small>Jay Robinson, <cite title="Source Title">Circle</cite></small>
</blockquote>
</div>
</div>


[iwadeaz Friend iwadeazJoin date: January 2008Posts: 100Downloads:0Uploads:3 Thanks: 18]

#508656

I set editor to none and pasted the code, but it still shows only one column…??

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#508665

Hi,

Well, can you send me PM with your website’s credentials ? I guess there is something wrong with your inputed codes since they are easy to make us confused.

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#508697

Hi,

Yeah. I just changed a little bit the width of span6 and the margin of blockquoute into templates/ja_onepage/css/custom.css file, the testimonials display finely now.

@media (min-width: 1200px) {
.row-fluid .span6 {
width: 46.571429%;
}
}

.clients .testimonial {
margin: 5px 0;
}

Now you can change the avatar image and content of testimonials to your own in Testimonials module. That is all you need to do here.

1 user says Thank You to phong nam for this useful post

1. iwadeaz

[iwadeaz Friend iwadeazJoin date: January 2008Posts: 100Downloads:0Uploads:3 Thanks: 18]

#509757

Thanks Leo, looks good 🙂

[iwadeaz Friend iwadeazJoin date: January 2008Posts: 100Downloads:0Uploads:3 Thanks: 18]

#518086

My client wants the box(es) widened, how do i widen them?? thanks 🙂

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#518343

@iwadeaz,

As you can see each block is defined within the span6 that covers about 49% width of the template container. So, it will not a good idea to widen the width of the box (quote block) because it can cause the right box go to 2nd line. Please consider if you still wish to widen the width that way.

[iwadeaz Friend iwadeazJoin date: January 2008Posts: 100Downloads:0Uploads:3 Thanks: 18]

#518363

Leo thanks for replying. My client wanted the pictures removed, this created room on the left side. Now I need to widen the left side…

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#518364

Hi,

Well, you can try to put below override css styles into the end of custom.css file:

.clients .testimonial {
overflow: visible;
}

.clients .testimonial blockquote {
margin-left: 80px;
}

Then reduce the margin until you get perfect with block width.

1 user says Thank You to phong nam for this useful post

1. iwadeaz

[iwadeaz Friend iwadeazJoin date: January 2008Posts: 100Downloads:0Uploads:3 Thanks: 18]

#519414

beautiful.

[Author]

Posts