Code Block
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
Create Code Blocks
WoodPecker uses PrismJS to render code blocks. To generate a codeblock for any progamming
langauge just add the code in a code block <code class="language-html"></code>
followed by the 'class="langauge-*"' where '*' is the language of your
choice. We support the default PrismJS languages for additional languages you need to download
theJS file for the relevant languge and include it in your markup.
<ul class = "nav nav-pills mb-3 mt-4" id = "pills-tab" role = "tablist">
<li class = "nav-item">
<a class = "nav-link active" id = "html-tab" data-toggle = "pill" href = "#html"
role = "tab" aria-controls = "html" aria-selected = "true">HTML</a>
</li>
<li class = "nav-item">
<a class = "nav-link" id = "scss-tab" data-toggle = "pill" href = "#scss"
role = "tab" aria-controls = "pills-profile" aria-selected = "false">SCSS</a>
</li>
<li class = "nav-item">
<a class = "nav-link" id = "js-tab" data-toggle = "pill" href = "#js"
role = "tab" aria-controls = "pills-profile" aria-selected = "false">JS</a>
</li>
</ul>
.wdpk-sticky
{
position: fixed !important;
top: 0;
border: none; // To reset the inherited border
@if (map-get($wdpk-sticky-menu-shadow, shadowOn))== false
{
-webkit-box-shadow: none;
box-shadow: none;
}
.wdpk-menu
{
justify-content: $wdpk-menu-align-items !important;
font-size: $wdpk-sticky-menu-font-size;
color: $wdpk-sticky-menu-font-color;
li
{
&:hover > a
{
color: $wdpk-sticky-menu-font-color-hover;
}
a
{
transition: color map-get($wdpk-hover-effect, animationDuration) ease;
&:hover
{
color: $wdpk-sticky-menu-font-color-hover;
}
}
}
}
}
jQuery(document).ready(function ()
{
if (jQuery(".main-carousel").length !== 0)
{
let obj = {
draggable: true,
dragThreshold: 10, // dragging doesn't start until 10px moved
cellAlign: 'center',
freeScroll: false,
wrapAround: true,
groupCells: 1, // Accepts Values in numbers eg. 2 format and boolean
autoPlay: false, // Accepts Values in 1000 format and boolean
pauseAutoPlayOnHover: false,
contain: true,
imagesLoaded: true,
fullscreen: true,
selector:'.main-carousel',
};
require(["app/shortcodes/wdpkCarousel"], function (e)
{
e.publicCall(obj);
});
}
});
WoodPecker® is a modular design system crafted to make creating layouts easy for the developers. Now instead of fucussing on the low level detail of developing these modules, you can simple use the existing modules to create fantasstic layouts.