Replacing the variables
- Enter on the html code
- click anywhere inside the code to enable search
- use ctrl+F or cmd +F to open the search bar
- 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)
<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'><div class="gbml-slide"> <script src="/feeds/posts/default/-/cookie?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts&amp;max-results=80"></script> </div></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>