Support » Plugin: WP Customer Area » Container changes

  • Hi I would like to change the container width, as you can see from the image it is too narrow and you have to scroll to see the top section (assigned to) etc. It also just looks a bit bunched up. Any help appreciated

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author Thomas Lartaud

    (@tlartaud)

    Hi,

    Those tiles are managed by jQuery Slick. The code managing it is located in customer-area/skins/frontend/master/assets/js/main.js, line 584:

    
    // Responsive JS Slider
                    if ($.isFunction($.fn.slick)) {
                        var slickSlider = $('.cuar-js-slick-responsive', $wrapperJS);
                        if (slickSlider.length) {
                            var slickSlidesCount = slickSlider.find('.cuar-js-slick-slide-item').length;
                            slickSlider.slick({
                                autoplay: false,
                                centerMode: true,
                                respondTo: 'slider',
                                adaptiveHeight: false,
                                speed: 300,
                                arrows: true,
                                slidesToShow: (slickSlidesCount < 4 ? slickSlidesCount : 4),
                                slidesToScroll: (slickSlidesCount < 4 ? slickSlidesCount : 4),
                                responsive: [{
                                    breakpoint: 1024,
                                    settings: {
                                        slidesToShow: (slickSlidesCount < 3 ? 2 : 3),
                                        slidesToScroll: (slickSlidesCount < 3 ? 2 : 3),
                                        infinite: true,
                                        dots: true
                                    }
                                }, {
                                    breakpoint: 880,
                                    settings: {
                                        slidesToShow: (slickSlidesCount < 2 ? 1 : 2),
                                        slidesToScroll: (slickSlidesCount < 2 ? 1 : 2)
                                    }
                                }, {
                                    breakpoint: 480,
                                    settings: {
                                        slidesToShow: 1,
                                        slidesToScroll: 1
                                    }
                                }]
                            });
                        }
                    }

    Basically, you would need to :
    – Create a custom WP Plugin
    – Add a JS file including this code you customized and load it on WPCA single posts
    – Copy/edit the template containing the slider HTML (do not hesitate to ask if you don’t have access to the template system documentation, since our site is actually off) and change cuar-js-slick-responsive to something you customize like custom-cuar-js-slick-responsive. That way, you can bind your own function to the slider, and map your own parameters for each screen size.

    Best regards.

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.