Editing/customizing a module ( stowl-slider for example)

[hilari]

Believing in the flexibility of Panda I went for it.

The Owl slider/ blog "combo" has different settings : slide on the left and blog on the right is my favourite for my project.

I have tried to modify the blog column into two, in order to display a "two by two" blog block as by default it only allows one column.

I have managed to reproduce it in the chrome inspector and it works:

 

<div id="owl_carousel_container_2" class="owl_carousel_container full_container  hidden-xs  block">            <div id="st_owl_carousel_2" class="owl_carousel_wrap st_owl_carousel_2  owl_images_slider  hidden-xs ">
                <!-- MODULE stowlcarousel -->
    <div class="container">
        <div class="row">
            <div class="col-xs-10 col-sm-6 st_owl_slideshow">
                                    <div id="st_owl_carousel-2" class=" owl-carousel owl-theme owl-navigation-lr  owl-navigation-circle " style="display: block; opacity: 1;">
                                                        <div class="owl-wrapper-outer"><div class="owl-wrapper owl-origin" style="display: block; width: 3330px; left: 0px; transition: all 0ms ease 0s; transform: translate3d(-555px, 0px, 0px); transform-origin: 832.5px center; perspective-origin: 832.5px center;"><div class="owl-item owl-fade-out" style="width: 555px; position: relative; left: 555px;"><div id="st_owl_carousel_block_3" class="st_owl_carousel_block_3 st_owl_carousel_block">
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
    <!--[if IE 9]></video><![endif]-->
<img class="st_owl_carousel_image" src="https://terresebrekm0.com/upload/stowlcarousel/owlslider01.jpg" alt="" width="779" height="466">
</picture>
    <div class="st_owl_carousel_text text_table_wrap ">
        <div class="text_table">
            <div class="text_td style_content  text-left  banner_text_center clearfix">
                                <h4 class="closer uppercase" style="font-family:Lato;">TEST</h4>                            </div>
        </div>
    </div>
    </div></div><div class="owl-item owl-fade-in" style="width: 555px;"><div id="st_owl_carousel_block_4" class="st_owl_carousel_block_4 st_owl_carousel_block">
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
    <!--[if IE 9]></video><![endif]-->
<img class="st_owl_carousel_image" src="https://terresebrekm0.com/upload/stowlcarousel/slide2-1.jpg" alt="Owl_slider" width="2560" height="1300">
</picture>
    <div class="st_owl_carousel_text text_table_wrap ">
        <div class="text_table">
            <div class="text_td style_content  text-left  banner_text_center clearfix">
                                <h4 class="closer uppercase" style="font-family:Lato;">BUY MORE, SAVE MORE</h4>
<p>Pick up two of must-have maternity tops and enjoy 20% off</p>
<div><a class="btn btn-default last" title="See more" href="#">SEE MORE</a></div>                            </div>
        </div>
    </div>
    </div></div><div class="owl-item" style="width: 555px;"><div id="st_owl_carousel_block_1" class="st_owl_carousel_block_1 st_owl_carousel_block">
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
    <!--[if IE 9]></video><![endif]-->
<img class="st_owl_carousel_image" src="https://terresebrekm0.com/upload/stowlcarousel/cestas-promocion-banner.png" alt="" width="975" height="922">
</picture>
    <div class="st_owl_carousel_text text_table_wrap ">
        <div class="text_table">
            <div class="text_td style_content  text-center  banner_text_center clearfix">
                                <h2>Testing Big Heading 1</h2>
<h5>Small Heading 1</h5>                            </div>
        </div>
    </div>
    </div></div></div></div>

                                                        

                                                        

                                            <div class="owl-controls clickable"><div class="owl-pagination"><div class="owl-page"><span class=""></span></div><div class="owl-page active"><span class=""></span></div><div class="owl-page"><span class=""></span></div></div><div class="owl-buttons"><div class="owl-prev"><i class="icon-left-open-3"></i></div><div class="owl-next"><i class="icon-right-open-3"></i></div></div></div></div>
                    <script type="text/javascript">
//<![CDATA[

    jQuery(function($){
                $("#st_owl_carousel-2").owlCarousel({
            
            autoPlay : 7000,
            navigation: true,
            pagination: true,
            paginationSpeed : 1000,
            goToFirstSpeed : 2000,
            rewindNav: true,
            singleItem : true,
                        autoHeight : false,
            slideSpeed: 400,
            stopOnHover: true,
            mouseDrag: true,
                        transitionStyle: "fade"
            
        });
            });
 
//]]>
</script>
                            </div>
            

<div class="col-xs-4 col-sm-3 st_owl_banners">
                                    <div class="owl-carousel-banner carousel_banner_nbr_3 clearfix">
                                                        <div id="st_owl_carousel_block_16" class="st_owl_carousel_block_16 st_owl_carousel_block">
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
    <!--[if IE 9]></video><![endif]-->
<img class="st_owl_carousel_image" src="https://terresebrekm0.com/upload/stowlcarousel/374slide.jpg" alt="" width="210" height="430">
</picture>
    </div>

                                                        

                                                        <div id="st_owl_carousel_block_18" class="st_owl_carousel_block_18 st_owl_carousel_block">
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
    <!--[if IE 9]></video><![endif]-->
<img class="st_owl_carousel_image" src="" alt="recetas" width="207" height="200">
</picture>
    </div>

                                            </div>
                            </div><div class="col-xs-4 col-sm-3 st_owl_banners">
                                    <div class="owl-carousel-banner carousel_banner_nbr_3 clearfix">
                                                        <div id="st_owl_carousel_block_16" class="st_owl_carousel_block_16 st_owl_carousel_block">
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
    <!--[if IE 9]></video><![endif]-->
<img class="st_owl_carousel_image" src="" alt="" width="210" height="430">
</picture>
    </div>

                                                        <div id="st_owl_carousel_block_17" class="st_owl_carousel_block_17 st_owl_carousel_block">
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
    <!--[if IE 9]></video><![endif]-->
<img class="st_owl_carousel_image" src="https://terresebrekm0.com/upload/stowlcarousel/consulta-nutricion-fontdevida-banner.jpg" alt="" width="207" height="200">
</picture>
    </div>

                                                        <div id="st_owl_carousel_block_18" class="st_owl_carousel_block_18 st_owl_carousel_block">
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
    <!--[if IE 9]></video><![endif]-->
<img class="st_owl_carousel_image" src="https://terresebrekm0.com/upload/stowlcarousel/recetas-saludables-fontdevida-banner.jpg" alt="recetas" width="207" height="200">
</picture>
    </div>

                                            </div>
                            </div>
        </div>
    </div>
<!--/ MODULE stowlcarousel -->
            </div>
            </div>

 

But when looking for the html where to pply the changes I fail to find it.

Could anyone point me into the right diretion on where to find the html file where to customize it?...Unless I am missing on how to do it on Panda module editor...

 

Thanks in advance for any help!