Testimonials or "customers say about"

Hi!

Please help me!

I would like to put a space such as "Reservation" in Stakehouse theme (like the attach) for testimonials.... (like in carrousel with the arrows)

How I can add this?


Thanks for all your help! and for create these very complete and fabulous themes!!!

sorry I forgot attach the example!

Hi,

Generally it requires a lot of work, you have to copy the HTML structure from the Steakhouse theme to text widget in your simplicity theme, now you have to copy css:

Code: Select all

/* Frontpage - testimonials */
.gk-testimonials {
  text-align: center;
  position: relative;
}
.gk-testimonials > div:first-child {
  margin: 80px auto 50px auto;
  overflow: hidden;
  text-align: center;
  width: 94%;
}
.gk-testimonials > div:first-child > div {
  -webkit-transition: all .6s ease-out;
  -moz-transition: all .6s ease-out;
  -ms-transition: all .6s ease-out;
  -o-transition: all .6s ease-out;
  transition: all .6s ease-out;
  width: 100%;
}
.gk-testimonials .button-border {
  display: inline-block;
  float: none;
}

.gk-testimonials[data-amount="2"] > div > div {
  width: 200%;
}

.gk-testimonials[data-amount="3"] > div > div {
  width: 300%;
}

.gk-testimonials[data-amount="4"] > div > div {
  width: 400%;
}

.gk-testimonials[data-amount="5"] > div > div {
  width: 500%;
}

.gk-testimonials[data-amount="6"] > div > div {
  width: 600%;
}

.gk-testimonials[data-amount="7"] > div > div {
  width: 700%;
}

.gk-testimonials[data-amount="8"] > div > div {
  width: 800%;
}

.gk-testimonials blockquote {
  float: left;
  margin: 0 1.5%;
  text-align: center;
  width: 75%;
}

.gk-testimonials[data-amount="2"] blockquote {
  margin: 0 6.25%;
  width: 37.5%;
}

.gk-testimonials[data-amount="3"] blockquote {
  margin: 0 4.166666%;
  width: 25%;
}

.gk-testimonials[data-amount="4"] blockquote {
  margin: 0 3.125%;
  width: 18.75%;
}

.gk-testimonials[data-amount="5"] blockquote {
  margin: 0 2.5%;
  width: 15%;
}

.gk-testimonials[data-amount="6"] blockquote {
  margin: 0 2.083333%;
  width: 12.5%;
}

.gk-testimonials[data-amount="7"] blockquote {
  margin: 0 1.785714%;
  width: 10.714285%;
}

.gk-testimonials[data-amount="8"] blockquote {
  margin: 0 1.5625%;
  width: 9.375%;
}

.gk-testimonials blockquote {
  opacity: 1;
  -webkit-transition: all .15s ease-out;
  -moz-transition: all .15s ease-out;
  -ms-transition: all .15s ease-out;
  -o-transition: all .15s ease-out;
  transition: all .15s ease-out;
}

.gk-testimonials blockquote.hidden {
  opacity: 0;
}

.gk-testimonials-prev,
.gk-testimonials-next {
  border: 1px solid #d5d5d5;
  border-right: none;
  border-bottom: none;
  cursor: pointer;
  display: block;
  left: 0;
  height: 60px;
  margin-top: 20px;
  opacity: 1;
  position: absolute;
  top: 0;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  width: 60px;
}

.gk-testimonials-prev:hover {
  left: -10px;
}

.gk-testimonials-prev:active,
.gk-testimonials-prev:focus,
.gk-testimonials-prev:hover,
.gk-testimonials-next:active,
.gk-testimonials-next:focus,
.gk-testimonials-next:hover {
  border-color: #d27244;
}

.gk-testimonials-next {
  left: auto;
  right: 0;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.gk-testimonials-next:hover {
  right: -10px;
}

.gk-testimonials-pagination {
  position: absolute;
  text-align: center;
  top: -60px;
  width: 100%;
}

.gk-testimonials-pagination li {
  background: #d5d5d5;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  height: 8px;
  margin: 0 2px;
  overflow: hidden;
  padding: 0;
  text-indent: -9999px;
  width: 8px;
}

.gk-testimonials-pagination li.active {
  background: #d27244;
}


and js code:

Code: Select all

// Testimonials
        var testimonials = $('.gk-testimonials');

        if(testimonials.length > 0) {
            testimonials.each(function(i, wrapper) {
                wrapper = $(wrapper);
                var amount = wrapper.data('amount');

                var testimonial_prev = $('<a>', { class: 'gk-testimonials-prev' });
                var testimonial_next = $('<a>', { class: 'gk-testimonials-next' });
                var testimonial_pagination = $('<ul>', { class: 'gk-testimonials-pagination' });

                var quotes = wrapper.find('blockquote');
                var current_page = 0;
                var sliding_wrapper = wrapper.find('div div');

                for(var j = 0; j < amount; j++) {
                    var titem = '<li' + (j === 0 ? ' class="active"' : '') + '>' + (j+1) + '</li>';
                    testimonial_pagination.html(testimonial_pagination.html() + titem);
                }

                testimonial_prev.appendTo(wrapper);
                testimonial_next.appendTo(wrapper);
                testimonial_pagination.appendTo(wrapper);
                var pages = testimonial_pagination.find('li');
                // hide quotes
                quotes.each(function(i, quote) {
                    if(i > 0) {
                        $(quote).addClass('hidden');
                    }
                });
                // navigation
                testimonial_prev.click(function(e) {
                    e.preventDefault();
                    e.stopPropagation();

                    $(quotes[current_page]).addClass('hidden');
                    current_page = (current_page > 0) ? current_page - 1 : pages.length - 1;
                    $(quotes[current_page]).removeClass('hidden');
                    pages.removeClass('active');
                    $(pages[current_page]).addClass('active');
                    sliding_wrapper.css('margin-left', -1 * (current_page * 100) + "%");
                });

                testimonial_next.click(function(e) {
                    e.preventDefault();
                    e.stopPropagation();

                    $(quotes[current_page]).addClass('hidden');
                    current_page = (current_page < pages.length - 1) ? current_page + 1 : 0;
                    $(quotes[current_page]).removeClass('hidden');
                    pages.removeClass('active');
                    $(pages[current_page]).addClass('active');
                    sliding_wrapper.css('margin-left', -1 * (current_page * 100) + "%");
                });

                pages.each(function(i, page) {
                    page = $(page);
                    page.click(function() {
                        quotes[current_page].addClass('hidden');
                        current_page = i;
                        $(quotes[current_page]).removeClass('hidden');
                        pages.removeClass('active');
                        $(pages[current_page]).addClass('active');
                        sliding_wrapper.css('margin-left', -1 * (current_page * 100) + "%");
                    });
                });
            });
        }


sorry I do not know if I understood well .... I copied these two codes in a text widget in the widget section that I need?

if so ... I copied them and the code is reflected only on the site but made ​​no change...

please explain me, if Im wrong

Please add the css code into Simplicity/css/override.css file and js code into i.e. Simplicity/js/gk.scripts.js file, then you can copy the html structure into text widget, that's all.

Hi Piotr

I Already Update my theme... and I Put the first code in the override.css file and the second one in the gk.scipts.js

I copy the HTML structure of the Stakehouse theme... (in a text widget) but it doesn't look like the steakhouse theme...

How I could make this section remain as the demo?
Thanks!

For more explanation... :
The testimonials aren't changing or running as you would a carousel!

Thanks

You have js error in the console, sorry but this kind of modifications are beyond our technical support and without basic js/css knowledge it's not easy to implement.

Try to replace each "$" character into "jQuery" in your js code.