etsy

[UMER] cookie slider on matter theme

Replacing the variables

  1. Enter on the html code
  2. click anywhere inside the code to enable search
  3. use ctrl+F or cmd +F to open the search bar
  4. search for 
<Group description="Slider">

Select the whole Group (line 187 until line 227) and replace with the code below 

<Group description="Slider">
  <Variable name="slide.post.title.color" description="Slide Post Title Color" type="color" default="#000000" value="#000000"/>
  <Variable name="slide.post.title.color.hover" description="Slide Post Title Hover Color" type="color" default="#AA9381" value="#AA9381"/>
  <Variable name="slide.post.title.font" description="Slide Post Title Font" type="font" default="normal normal 12px lato, sans-serif" value="normal normal 12px lato, sans-serif"/>
  <Variable name="slide.pager.font" description="Slide Pager Font (Next/Prev)" type="font" default="normal normal 10px lato, sans-serif" value="normal normal 10px lato, sans-serif"/>
  <Variable name="slide.pager.color" description="Slide Font Color Pager (Next/Prev)" type="color" default="#F1F1F1" value="#F1F1F1"/>
  <Variable name="slide.pager.bg" description="Slide Background Pager (Next/Prev)" type="color" default="#000000" value="#000000"/>
  <Variable name="slide.dots" description="Slide Color Dots" type="color" default="#000000" value="#000000"/>
</Group>

Replacing the css 


Search for 
.slide-wrap {
Select the whole css section (line 1567 until line 1742) and replace with 
.slide-wrap {
  margin: 5em 0;
  position: relative;
}

#HTML300 h3 {
  display: none;
}

.owl-item {
  list-style: none;
}

.owl-item.active {
  margin: 0 10px !important;
}

ul.owl-carousel.owl-theme.owl-loaded.owl-drag {
  padding: 0;
  position: relative;
}

.owl-theme .owl-dots .owl-dot span {
  background: $(slide.dots) !important;
  opacity: 1 !important;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot.active:hover span,
.owl-theme .owl-dots .owl-dot:hover span {
  width: 25px !important;
}

.owl-theme .owl-dots .owl-dot:hover span {
  width: 10px !important;
}

.owl-nav {
  position: absolute;
  bottom: 30% !important;
  width: 100% !important;
  z-index: 999999999 !important;
}

button.owl-prev,
button.owl-next {
  background: $(slide.pager.bg) !important;
  border-radius: 0 !important;
  color: $(slide.pager.color) !important;
  display: block !important;
  font: $(slide.pager.font) !important;
  float: left;
  letter-spacing: 0.08em;
  margin: 0 !important;
  padding: .4em .9em .5em .9em !important;
  text-transform: uppercase !important;
}

button.owl-next {
  float: right;
}

.cycle-slideshow {
  display: block;
  height: 400px;
  margin: 0;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 0;
}

.cycle-slideshow ul {
  height: 100%;
  height: 100vh;
  padding: 0;
  width: 100%;
}

.cycle-slideshow li {
  height: 90%;
  margin: 0;
  padding: 0;
  width: 100%;
}

.slide-inside {
  background: $(body.background);
  height: 20%;
  padding: 0;
  position: absolute;
  bottom: 0;
  transition: all .25s ease-out;
  width: 100%;
  -webkit-transition: all .25s ease-out;
  -moz-transition: all .25s ease-out;
  -o-transition: all .25s ease-out;
  z-index: 9;
}

.slide-title {
  margin: 0 auto;
  max-width: 95%;
  padding-top: 1em;
}

.slide-image {
  background-repeat: no-repeat;
  background-size: cover;
  height: 80%;
  width: 100%;
}

.slide-image:hover,
.slide-image:focus {
  opacity: .8;
}

.slide-h3 {
  color: $(slide.post.title.color);
  font: $(slide.post.title.font);
  letter-spacing: 0.08em;
  line-height: 1.4em;
  max-width: 100%;
  text-transform: uppercase;
  z-index: 99;
}

.slide-h3:hover,
.slide-h3:focus {
  color: $(slide.post.title.color.hover);
}

.slide-cat,
.slide-divider,
.slide-excerpt,
.slide-more {
  display: none;
}


Replacing the html

  search for
<div class='slide-wrap'>
Select the whole part indicated on the screenshot below (if the arrows are open, close them to make easier visualize the code) 

and replace with the code below: 

<div class='slide-wrap'>
 <b:section class='slide clearfix' id='slide' name='Slider' showaddelement='yes'>
   <b:widget id='HTML300' locked='true' title='Slide' type='HTML' visible='true'>
     <b:widget-settings>
       <b:widget-setting name='content'>&lt;div class=&quot;gbml-slide&quot;&gt;
&lt;script src=&quot;/feeds/posts/default/-/cookie?orderby=published&amp;amp;alt=json-in-script&amp;amp;callback=showgalleryposts&amp;amp;max-results=80&quot;&gt;&lt;/script&gt;
&lt;/div&gt;</b:widget-setting>
     </b:widget-settings>
     <b:includable id='main'>
  <b:include name='widget-title'/>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
   </b:widget>
 </b:section>
</div>
<script>//<![CDATA[
$(document).ready(function(){
$('.owl-carousel').owlCarousel({
    loop:true,
    dots:true,
    margin:20,
    nav: true,
    navText: ['prev', 'next'],
    responsive:{
        0:{
            items:1
        },
        600:{
            items:2
        },
        1000:{
            items:3
        }
    }
})
});
//]]></script>

save the changes.

Contact Form