Sidebar Clean
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
Gallery Widget
Code Snippet For Sidebar
<div class = "col-lg-4 mt-5 wdpk-sidebar-wrapper wdpk-sidebar-left d-none d-lg-flex">
<div class = "wdpk-sidebar">
<section class = "wdpk-sidebar-section">
<h5 class = "mt-2 mb-4">Search Articles</h5>
<div class = "wdpk-menu-search">
<input type = "email" class = "form-control form-control-sm" id = "wdpkSearchInput"
aria-describedby = "SearchInput" placeholder = "Search">
</div>
</section>
<!-- Gallery Section -->
<section class = "wdpk-sidebar-section">
<h5 class = "mt-2 mb-3">Gallery Widget</h5>
<div id = "wdpk-light-gallery-1" class = "card-columns wdpk-light-gallery">
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-1.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-1.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-2.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-2.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-3.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-3.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-4.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-4.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-5.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-5.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-6.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-6.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-7.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-7.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-8.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-8.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-9.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-9.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
</div>
</section>
<!-- / Gallery Section -->
<!-- Social Share Section -->
<section class = "wdpk-sidebar-section">
<h5 class = "mt-2 mb-4">Social Share</h5>
<div id = "wdpkSocial"></div>
</section>
<!-- /Social Share Section -->
<!-- Categories Section -->
<section class = "wdpk-sidebar-section">
<h5 class = "mt-2 mb-4">Categories</h5>
<div class = "list-group wdpk-list-group">
<a href = "/demos/main-demo/shortcodes/accordion-light.html"
class = "list-group-item list-group-item-action ">
<span class = "wdpk-list-group-text">
Accordions
</span>
</a>
<a href = "/demos/main-demo/shortcodes/alerts-light.html"
class = "list-group-item list-group-item-action ">
<span class = "wdpk-list-group-text">
Alerts
</span>
</a>
<a href = "/demos/main-demo/shortcodes/animations.html"
class = "list-group-item list-group-item-action ">
<span class = "wdpk-list-group-text">
Animations
</span>
</a>
<a href = "/demos/main-demo/shortcodes/audio-player.html"
class = "list-group-item list-group-item-action ">
<span class = "wdpk-list-group-text">
Audio
</span>
</a>
<a href = "/demos/main-demo/shortcodes/blockquotes.html"
class = "list-group-item list-group-item-action ">
<span class = "wdpk-list-group-text">
Blockquotes
</span>
</a>
</div>
</section>
<!-- /Categories Section -->
</div>
</div>
$wdpk-gray-200: #e9ecef !default;
$wdpk-sidebar-type: 1 !default;
$wdpk-card-columns-gap: .15rem !default;
$wdpk-card-columns-margin: .15rem !default;
$wdpk-card-border-width: 0px !default;
$wdpk-card-border-radius: 0px !default;
$wdpk-light-gallery-icon-size: .7rem !default;
$wdpk-light-gallery-icon-padding: 7px !default;
$wdpk-social-sharing-theme: 'flat' !default;
$wdpk-social-sharing-border-radius: 40px !default;
$wdpk-social-sharing-horizontal-padding: .5rem !default;
$wdpk-social-sharing-vertical-padding: .5rem !default;
$wdpk-social-sharing-font-size: 0.8rem !default;
$wdpk-social-sharing-line-height: 0.8rem !default;
$wdpk-sidebar-type: 3 !default;
$wdpk-side-border: true !default;
$wdpk-side-border-color: $wdpk-gray-200 !default;
$wdpk-sidebar-background-color: transparent !default;
$wdpk-margin-sections: 2.5rem !default;
jQuery(document).ready(function ()
{
if (jQuery(".wdpk-light-gallery").length !== 0)
{
let obj = {
selectorID: 'wdpk-light-gallery-1',
thumbnail: true,
animateThumb: false,
showThumbByDefault: false
};
require(["app/shortcodes/wdpkLightGallery"], function (e)
{
e.publicCall(obj);
});
}
});
jQuery(document).ready(function ()
{
if (jQuery("#wdpkSocial").length !== 0)
{
let obj = {
shares: [
"facebook",
"twitter",
"googleplus",
"linkedin",
],
url: "https://uneebox.com/woodpecker-html/",
text: "WoodPecker is an HTML theme that is modular and fast",
showLabel: false,
showCount: false,
shareIn: "popup",
selectorID: 'wdpkSocial',
on: {
click: function (e)
{
},
mouseenter: function (e)
{
},
mouseleave: function (e)
{
},
}
};
require(["app/shortcodes/wdpkSocialShare"], function (e)
{
e.publicCall(obj);
});
}
});
