Full Testimonial Page using Rocked Pro

There appears to be only a slider control for Testimonials with Rocked Pro. But I need to show all Testimonials in a grid fashion on their own page. Thoughts on how to accomplish this?

Hello there,

In order to accomplish such that objective, please try doing the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box

/**
 * Javascript-Equal-Height-Responsive-Rows
 * https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows
 */
(function($){'use strict';$.fn.equalHeight=function(){var heights=[];$.each(this,function(i,element){var $element=$(element);var elementHeight;var includePadding=($element.css('box-sizing')==='border-box')||($element.css('-moz-box-sizing')==='border-box');if(includePadding){elementHeight=$element.innerHeight();}else{elementHeight=$element.height();}
heights.push(elementHeight);});this.css('height',Math.max.apply(window,heights)+'px');return this;};$.fn.equalHeightGrid=function(columns){var $tiles=this.filter(':visible');$tiles.css('height','auto');for(var i=0;i<$tiles.length;i++){if(i%columns===0){var row=$($tiles[i]);for(var n=1;n<columns;n++){row=row.add($tiles[i+n]);}
row.equalHeight();}}
return this;};$.fn.detectGridColumns=function(){var offset=0,cols=0,$tiles=this.filter(':visible');$tiles.each(function(i,elem){var elemOffset=$(elem).offset().top;if(offset===0||elemOffset===offset){cols++;offset=elemOffset;}else{return false;}});return cols;};var grids_event_uid=0;$.fn.responsiveEqualHeightGrid=function(){var _this=this;var event_namespace='.grids_'+grids_event_uid;_this.data('grids-event-namespace',event_namespace);function syncHeights(){var cols=_this.detectGridColumns();_this.equalHeightGrid(cols);}
$(window).bind('resize'+event_namespace+' load'+event_namespace,syncHeights);syncHeights();grids_event_uid++;return this;};$.fn.responsiveEqualHeightGridDestroy=function(){var _this=this;_this.css('height','auto');$(window).unbind(_this.data('grids-event-namespace'));return this;};})(window.jQuery);

;(function($) {

   'use strict'

   $(window).on('load resize', function() {
   
     if( $('.roll-testimonials').length ){

        $('.roll-testimonials .owl-item').responsiveEqualHeightGrid();
        
     }

   });
    
   
})(jQuery); 

  1. Update
  2. Add the below extra custom CSS code to Appearance > Customize > Additional CSS:

.roll-testimonials .owl-wrapper{
  max-width: 100% !important;
  transition: none !important;
  transform: none !important;
  position: static !important;
}

.roll-testimonials .owl-wrapper-outer {
  height: auto !important;
}

.roll-testimonials .owl-controls{
  display: none !important;
}

 .roll-testimonials .owl-item {
  margin-bottom: 40px;  
}  

@media only screen and (min-width:992px) {
  
  .roll-testimonials .owl-item {
    width: 50% !important;
    float: left !important;
  }
  
}

Regards,
Kharis

Hiya Kharis,

If I want to display full testimony on only one particular page, where should I place the custom css code?

Thanks for your help.

Cheers!

Hiya again,

I just found out that we can add this specific line to target a particular page, by inserting the page id:

.page-id-39 .roll-testimonials .owl-wrapper{
  max-width: 100% !important;
  transition: none !important;
  transform: none !important;
  position: static !important;
}

Source: http://mangomattermedia.com/wordpress/wp-quick-tip-target-a-specific-page-with-css/

I have one more question. How do you change the spacing between the two column of the full page testimony?

Thanks for your help.

Cheers.

> I just found out that we can add this specific line to target a particular page

Great!

> How do you change the spacing between the two column of the full page testimony?

Please try adding this CSS code:


.page-id-39 .roll-testimonials .owl-item {
  margin-bottom: 80px;  
}  

Regards,
Kharis

Thank you for the reply Kharis.

That code works for the distance between two rows. To change the distance between column, I need to use this code apparently (margin-right instead of margin-bottom).

.page-id-39 .roll-testimonials .owl-item {
  margin-right: 40px;  
}

One last question, is there any way to make the testimony widget to use all space (full width)?

Thank you!

Hello there,

Try adding this extra custom CSS code:


.roll-testimonials {
  width: 1140px;
  max-width: 100%;  
}  

Regards,
Kharis