Joomla Templates Club 406,261 posts

[Tech-xml Friend Tech-xmlJoin date: October 2010Posts: 765Downloads:39Uploads:140 Thanks: 106 Thanked: 5 times in 2 posts]

#198299

It is possible to use the Testimonials section in another template? If yes, how do I copy this style?

http://www.joomlart.com/forums/attachment.php?attachmentid=37200&stc=1&d=1401405246

---

Attachments:

1. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#537150

you need to do some css work to make it work in other templates. Also you should have used the latest bootstrap on the other template.

This is the HTML CODE

<div class="ja-testimonial-wrap">
<ul id="ja-testimonial-list">
<li class="col-xs-12 col-sm-2 col-md-1 active"><img title="Thornton Elias via Twitter" src="images/joomlart/demo/testimonials/testimonials-1.jpg" alt="Donec ultrices quam at nunc molestie convallis. Donec justo tellus, euismod a ante at, dignissim feugiat nunc." /></li>
<li class="col-xs-12 col-sm-2 col-md-1"><img title="Stacy Sandford via Twitter" src="images/joomlart/demo/testimonials/testimonials-2.jpg" alt="Dunked is one of the simplest, easiest, and most versatile portfolio creation tools I’ve ever come across. Responsive, Retina & Ready to go!" /></li>
<li class="col-xs-12 col-sm-2 col-md-1"><img title="Delbert Barney via Twitter" src="images/joomlart/demo/testimonials/testimonials-3.jpg" alt="Praesent nec lectus eu neque fringilla volutpat. Nulla tristique ullamcorper quam, ut dapibus massa hendrerit ac!" /></li>
<li class="col-xs-12 col-sm-2 col-md-1"><img title="Ern Malakai via facebook" src="images/joomlart/demo/testimonials/testimonials-4.jpg" alt="Ponec molestie nunc lacus, ut accumsan sem imperdiet eu. Maecenas semper erat vitae elit rutrum!" /></li>
<li class="col-xs-12 col-sm-2 col-md-1"><img title="Sterling Irvine via Twitter" src="images/joomlart/demo/testimonials/testimonials-5.jpg" alt="Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas!" /></li>
<li class="col-xs-12 col-sm-2 col-md-1"><img title="Carl Fulton via Twitter" src="images/joomlart/demo/testimonials/testimonials-6.jpg" alt=" Aliquam eget ante massa. Donec eget ligula auctor, dapibus tellus et, pulvinar urna!" /></li>
<li class="col-xs-12 col-sm-2 col-md-1"><img title="Lloyd Willis via facebook" src="images/joomlart/demo/testimonials/testimonials-7.jpg" alt="Donec ultrices quam at nunc molestie convallis. Donec justo tellus, euismod a ante at, dignissim feugiat nunc!" /></li>
<li class="col-xs-12 col-sm-2 col-md-1"><img src="images/joomlart/demo/testimonials/testimonials-8.jpg" alt="Sed nec ipsum at odio suscipit auctor. Cras quis quam dui. Vestibulum at urna condimentum, mattis dolor" /></li>
<li class="col-xs-12 col-sm-2 col-md-1"><img title="Mordikai Brenton via Twitter" src="images/joomlart/demo/testimonials/testimonials-9.jpg" alt="Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies." /></li>
<li class="col-xs-12 col-sm-2 col-md-1"><img title="Ashton Malcom via Twitter" src="images/joomlart/demo/testimonials/testimonials-10.jpg" alt="Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat!" /></li>
<li class="col-xs-12 col-sm-2 col-md-1"><img title="Avetis Garen via Twitter" src="images/joomlart/demo/testimonials/testimonials-11.jpg" alt="Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus" /></li>
</ul>
</div>

This is the css code

.ie8 #ja-testimonial,
.ie9 #ja-testimonial,
.old-ie #ja-testimonial {
margin: 0 auto;
text-align: center;
float: none;
}
.ja-testimonial-wrap {
min-height: 260px;
max-height: 300px;
} @media (min-width: 992px) {
.ja-testimonial-wrap {
min-height: auto;
}
}
#ja-testimonial-list {
list-style: none;
margin: 0 0 28px;
padding: 100px 0 0;
position: relative;
text-align: center;
}
#ja-testimonial-list:before,
#ja-testimonial-list:after {
content: " ";
display: table;
}
#ja-testimonial-list:after {
clear: both;
} @media (min-width: 992px) {
#ja-testimonial-list {
margin: 0 0 42px;
padding: 0;
}
}
#ja-testimonial-list li {
float: none;
cursor: pointer;
display: inline-block;
margin-bottom: 6px;
padding: 0 3px;
position: relative;
}
#ja-testimonial-list li span {
background: #1bbc9b
display: block;
}
#ja-testimonial-list li span img {
max-width: 100%;
width: 100%;
background: #1bbc9b
-webkit-transition: opacity 300ms;
transition: opacity 300ms;
}
#ja-testimonial-list li i {
color: #ffffff
display: none;
font-size: 40px;
height: 50px;
line-height: 50px;
margin: -25px 0 0 -25px;
position: absolute;
top: 50%;
left: 50%;
width: 50px;
} @media (max-width: 991px) {
#ja-testimonial-list li {
display: block;
height: 100px;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 100%;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#ja-testimonial-list li span {
background: transparent;
}
#ja-testimonial-list li span img {
border-radius: 5px;
width: auto;
}
#ja-testimonial-list li:hover {
cursor: normal;
}
#ja-testimonial-list li.active {
display: block;
text-align: center;
width: 100%;
opacity: 1;
filter: alpha(opacity=100);
}
#ja-testimonial-list li.active span img {
opacity: 1;
filter: alpha(opacity=100);
}
#ja-testimonial-list li.active i.fa {
display: none;
}
}
#ja-testimonial-list li:hover img,
#ja-testimonial-list li.active img {
opacity: 0.5;
}
#ja-testimonial-list li:hover i,
#ja-testimonial-list li.active i {
display: block;
}
#ja-testimonial {
border-left: 0;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
margin-bottom: 0;
min-height: 100px;
padding: 0;
} @media (min-width: 480px) {
#ja-testimonial {
font-size: 20px;
}
} @media screen and (max-width: 767px) {
#ja-testimonial {
margin-left: 40px;
margin-right: 40px;
width: auto !important;
}
} @media (min-width: 992px) {
#ja-testimonial {
font-size: 26px;
margin-top: 0;
}
}
#ja-testimonial small {
font-size: 14px;
font-weight: 400;
padding-top: 5px;
}

[Tech-xml Friend Tech-xmlJoin date: October 2010Posts: 765Downloads:39Uploads:140 Thanks: 106 Thanked: 5 times in 2 posts]

#537285

Thanks for respoder. I did the update on my css template. But not funcinou well, it seems that this is css adapatado only for JoomlArt templates.

http://www.joomlart.com/forums/attachment.php?attachmentid=37216&stc=1&d=1401502366

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#537291

You can try to do this way

+ Go Admin site -> System -> Site tabs -> set Default Editor to Editor – None

+ Go to Testimonials module and use snippet below


<div class="ja-testimonial-wrap">
<ul id="ja-testimonial-list">
<li class="col-xs-12 col-sm-2 col-md-1 active"><span><img src="images/joomlart/demo/testimonials/testimonials-1.jpg" alt="Donec ultrices quam at nunc molestie convallis. Donec justo tellus, euismod a ante at, dignissim feugiat nunc." title="Thornton Elias via Twitter" /></span><i class="fa fa-quote-left"></i></li>

<li class="col-xs-12 col-sm-2 col-md-1"><span><img src="images/joomlart/demo/testimonials/testimonials-2.jpg" alt="Dunked is one of the simplest, easiest, and most versatile portfolio creation tools I’ve ever come across. Responsive, Retina & Ready to go!" title="Stacy Sandford via Twitter" /></span><i class="fa fa-quote-left"></i></li>

<li class="col-xs-12 col-sm-2 col-md-1"><span><img src="images/joomlart/demo/testimonials/testimonials-3.jpg" alt="Praesent nec lectus eu neque fringilla volutpat. Nulla tristique ullamcorper quam, ut dapibus massa hendrerit ac!" title="Delbert Barney via Twitter" /></span><i class="fa fa-quote-left"></i></li>

<li class="col-xs-12 col-sm-2 col-md-1"><span><img src="images/joomlart/demo/testimonials/testimonials-4.jpg" alt="Ponec molestie nunc lacus, ut accumsan sem imperdiet eu. Maecenas semper erat vitae elit rutrum!" title="Ern Malakai via facebook" /></span><i class="fa fa-quote-left"></i></li>

<li class="col-xs-12 col-sm-2 col-md-1"><span><img src="images/joomlart/demo/testimonials/testimonials-5.jpg" alt="Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas!" title="Sterling Irvine via Twitter" /></span><i class="fa fa-quote-left"></i></li>

<li class="col-xs-12 col-sm-2 col-md-1"><span><img src="images/joomlart/demo/testimonials/testimonials-6.jpg" alt=" Aliquam eget ante massa. Donec eget ligula auctor, dapibus tellus et, pulvinar urna!" title="Carl Fulton via Twitter" /></span><i class="fa fa-quote-left"></i></li>

<li class="col-xs-12 col-sm-2 col-md-1"><span><img src="images/joomlart/demo/testimonials/testimonials-7.jpg" alt="Donec ultrices quam at nunc molestie convallis. Donec justo tellus, euismod a ante at, dignissim feugiat nunc!" title="Lloyd Willis via facebook" /></span><i class="fa fa-quote-left"></i></li>

<li class="col-xs-12 col-sm-2 col-md-1"><span><img src="images/joomlart/demo/testimonials/testimonials-8.jpg" alt="Sed nec ipsum at odio suscipit auctor. Cras quis quam dui. Vestibulum at urna condimentum, mattis dolor" /></span><i class="fa fa-quote-left"></i></li>

<li class="col-xs-12 col-sm-2 col-md-1"><span><img src="images/joomlart/demo/testimonials/testimonials-9.jpg" alt="Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies." title="Mordikai Brenton via Twitter" /></span><i class="fa fa-quote-left"></i></li>

<li class="col-xs-12 col-sm-2 col-md-1"><span><img src="images/joomlart/demo/testimonials/testimonials-10.jpg" alt="Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat!" title="Ashton Malcom via Twitter" /></span><i class="fa fa-quote-left"></i></li>

<li class="col-xs-12 col-sm-2 col-md-1"><span><img src="images/joomlart/demo/testimonials/testimonials-11.jpg" alt="Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus" title="Avetis Garen via Twitter" /></span><i class="fa fa-quote-left"></i></li>
</ul>
</div>


[Tech-xml Friend Tech-xmlJoin date: October 2010Posts: 765Downloads:39Uploads:140 Thanks: 106 Thanked: 5 times in 2 posts]

#537299

Is almost 100%

Has these problems:

The comment box will not appear
The quote also símblo not appear
The first image is always marked

How can I send the data access for you to see? My site is offline.

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#537313

Please post your site Url and admin details in PM.

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#537345

I have fixed it for you . uploaded testimonial.js , fonts Awesome css , made some changes on custom.css and index.php.

check it and confirm.

1 user says Thank You to chavan for this useful post

1. Tech-xml

[Author]

Posts