Kedavra - Next Generation Theme

We developed a multifunctional theme for professionals who aim to create a lot of effective and versatile websites: from personal blogs, websites-portfolio and functional landing pages to commercial websites and large online-stores.

When Developing Kevadra theme we were guided by our long term online-business experience and by contemporary usability trends and trends of developing high conversion UIs.

Kedavra features 70+ pre-composed pages but you can easily create new with lots of customizable widgets and elements.

List of Pages

Home Pages
  • Home Presentation
  • Home Business Lawyer
  • Home Business Real Estate
  • Home Portfolio Photographer
  • Home Portfolio Musician
  • Home Blog Corporate
  • Home Blog Personal
  • Home Shop Catalog
  • Home Shop Featured Product
  • Home Events
  • Home Startup
  • Home Landing
  • Home Services
Blog Pages
  • Grid Full Width
  • Grid Sidebar Right
  • Grid Sidebar Left
  • List Full Width
  • List 2 Columns
  • List Sidebar Right
  • List Sidebar Left
  • Single Image Post
  • Single Fullwidth Banner
  • Single Gallery Post
  • Single Slider Post
  • Single Video Post
  • Single Audio Post
Shop Pages
  • Grid 1 Fullwidth
  • Grid 1 Big Banner
  • Grid 1 Sidebar Left
  • Grid 1 Sidebar Right
  • Grid 2 Fullwidth
  • Grid 2 Big Banner
  • Grid 2 Sidebar Left
  • Grid 2 Sidebar Right
  • List Fullwidth
  • List Big Banner
  • List Sidebar Left
  • List Sidebar Right
  • Single Description Right
  • Single Description Left
  • Shopping Cart
  • Wishlist
  • Checkout Page
  • Checkout Unregistered
  • Delivery Info Page
  • Delivery Tracking
  • Purchase History
Secondary Pages
  • Pages Presentation
  • Login Page
  • Sign Up Page
  • User Account Page
  • Resume / Portfolio
  • Single Project Page
  • Events Schedule
  • About Corporate
  • About Personal
  • Contacts
  • Our Team
  • Team Member Profile
  • FAQ Tabs Version
  • FAQ Classic Version
  • Under Construction
  • Search Page
  • Search Results
  • 404 Page
  • 500 Page
  • Sitemap

Folders and Files

File Path Description
Main Root folder
Main/PSD PSD Folder includes all .psd files.
Please see the complete list of files here
Main/Kedavra This folder includes all HTML,LESS, CSS, Javascript, Fonts and Image files of the template.
Main/Kedavra/index.html This is the Presentation Home Page describing all features of Kedavra. +69 other pages
Main/Kedavra/css This folder includes compiled and compressed version of CSS style.css.
Main/Kedavra/css/unminified This folder includes compiled but uncompressed version of CSS style.css.
Main/Kedavra/css/colors This folder holds all .css files with different color schemes. Each file has a color hex number in it's name.
Main/Kedavra/css/colors/unminified This folder holds all uncompressed .css files with different color schemes. Each file has a color hex number in it's name.
Main/Kedavra/less This folder includes all source .less (including Bootstrap less) files from which compiled style.css.
Main/Kedavra/js This folder includes all .js files. To edit Javascript functionality of the template you need to modify scripts.js file. It also includes 2 subfolders: libs and plugins
Main/Kedavra/js/libs This folder includes all JavaScript Libraries files like jQuery.
Main/Kedavra/js/plugins This folder includes all jQuery Plugins used in this template.
Main/Kedavra/masterslider This folder includes all styles of premium slider called Master Slider.
Main/Kedavra/img This folder includes all graphic assets of the template. When you need to change images, slides, backgrounds, etc..this is the place to go.
Main/Kedavra/fonts This folder includes Exclusive Bi-color Icon Font and Font Awsome generated Fonts. They are iconic fonts, that gives you customizable vector icons (more than 500 icons in total). For more information on how it works, please visit: Font Awsome Official Website

Customizing Template (HTML)

In this block you will find all necessary information regarding Kedavra HTML structure, changing images, icons, building new pages.

General HTML Structure

Please look at code below. It represents general structural blocks that are seen on every page. This blocks include header, navigation / off-canvas mobile navigation, footer and content area.

   Here we write meta tags, link css files, modernizr library, 3rd party APIs (like Google maps)

If you add class "boxed" it wraps the whole document in a box, than you can simply add pattern background to body or leave it white. Please note in a "boxed" mode header doesn't stick to the top. .........................................................................................
You can optionally add class: "sticky", "transparent", "scroller" for different header layouts. .............................................................
Here goes page content. .............................................................
Here goes footer content. .............................................................

Replacing Images, Slides and Backgrounds*

To change images, slides or background you need to go to Kedavra / img / folder. It is devided into subfolders. Each contains appropriate graphic assets. See the complete list below:

  • about - Assets of About pages + Harmonic Widget.
  • blog - Blog pages assets, featured posts, etc.
  • cart-btn - Shopping cart button (one in the header) in .svg and .png formats.
  • cart-dropdown - Product thumbnails inside cart dropdown.
  • clients - Happy clients banner.
  • demo - Assets from Components and Styles, Sliders and Carousels, Grid and List Layouts demo pages.
  • faq - Banner seen on the FAQ Tabs Version.
  • blog - Blog pages assets, featured posts, etc.
  • gallery - Thumbnails and fullsize images from Masonry Grid Gallery, seen on Home Portfolio pages as well as Resume page.
  • home - Assets from Home pages including hero backgrounds, fullscreen sliders, etc.
  • info-tiles - Icons used inside info tiles as seen on Main presentational page right above footer. Inside 6 folders named according to hex number of color scheme.
  • logos - Logotypes from logo carousel.
  • megamenu - Images from Shop Mega-Menu Dropdown.
  • ms-display - Assets of Display Slider by Master Slider.
  • pages - Previews of all Kedavra pages seen on Pages Presentational page.
  • patterns - Patterns that can be used as backgrounds of .
  • portfolio - Images used on Portfolio Single page.
  • shop - All Assets from Shop Layouts pages, Shopping cart, Checkout, Purchase History, etc.
  • specialty-page - Background image from 404, 500 Error Pages, Login / Signup Pages.
  • team - Team members pictures.
  • user - Assets from User Account page.

*In your copy most of images are replaced with placeholders with sizes. Make sure you follow this guides when cropping your own images.

Changing Icons

As mentioned dabove in Kedavra we used self-made bi-color font icons along with FontAwesome icons. So in total you have 500+ icons to choose from.

Adding Kedavra bi-color icon:

Adding FontAwesome icon:

To see complete list of FonAwesome icons visit

Switching to Boxed Layout

In order to switch to boxed layout mode you need to add "boxed" class to the

. See the code below:


In Boxed mode you can add background pattern to .


Adjusting Elements via Data Attributes

In Kedavra some interactive lements can be adjusted throught data-attributes. You dont need to do that inside weird Javascript functions.

This elements are:

  • Interactive Pie Charts (Skills)
data-percent="55" data-bar-color="#448956">
  • Radar Chart (Home Business Lawyer)
data-fill="rgba(68,137,86,0.2)" data-lines="rgba(68,137,86,0.9)">
  • Range Slider (Shop Sidebar)
data-min-val="100" data-max-val="1000" data-start="600" data-step="50">
  • Animated Digits

Removing Parallax Effect

If you do not need parallax effect on backgrounds simply remove "parallax" class from tag.

Changing Template Style

In this section you will learn how to setup LESS environment, editing and compiling .less files, where to find uncompressed style.css, how quickly change color scheme.

Setting Up LESS Environment

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

For more information visit LESS official website.

For compiling LESS file into CSS we used software called "Prepros". Visit it's website at Basic version is completely free and available for Mac and Windows.


LESS Files Structure

LESS File Name Elements Inside
animations folder Includes animate.less file - keyframe animations library.
bootstrap folder All Bootstrap framework .less file.
card folder Interactive credit card (Checkout Page)
colors folder Colores.less file - for generating different color schemes.
font-awesome folder FontAwesome icons .less files.
icons folder Kedavra exclusive bi-color icons .less files.
ihover folder Interactive hover effects.
lightgallery lightGallery plugin .less files.
variables.less File that holds all variables. There you can globally change colors, font-sizes, margins, paddings, etc...
scaffolding.less Body styles, utility classes, page container.
types.less Headings, paragraphs, lists, links, blockquotes styles, etc...
header.less Header styles including different header types: sticky, transparent, scroller (one-page).
footer.less Footer styles.
navi.less Main navigation (menu) styles including collapsed state (off-canvas mobile navigation).
buttons.less Buttons styles (normal and outlined buttons).
forms.less Form elements styles
mixins.less Mixins mix properties from existing styles.
home.less Styles of all elements of Home pages: Hero Slider, Hero Static, Hero Fullscreen, Fullwidth Image Banner, Category Bars, Category Tiles.
shop.less Styles include: Catalog Grid / List Layouts, Shopping Cart, Color Switcher, Size Switcher, Single Product Tools, Info Tile Radios, Tracking Pag, Delivery Methods, Purchase History, PayPal Button.
blog.less Includes: Recent Posts / List View Posts / Search Results, Blog Layouts (Grid / List), Post Controls / Tools, Single Post, Posts Archive List.
pages.less Includes: Specialty Pages 404 / 505 Page, Login / Sign Up page, Search Page, Team Page, Team Member Profile / Portfolio Single, FAQ Page, User Account Page, Event Schedule.
sidebar.less Sidebar Widgets (Blog, Shop). Includes: Sidebar general styles, Featured Posts Widget, Blog Categories Widget, Search Widget, Subscribe Widget, Shop Categories / Links Widget, Shop Filters, Shopping Cart Content Widget, Shopping Cart Totlas, Coupone Field, Sidebar Button (In mobile view scrolling to sidebar).
modals.less Modal dialog styles.
widgets.less Includes: Partial View Slider, Display Slider, Staff 3D Carousel, Master Slider Captions, Product Showcase Slider, Single Product Slider, OWL Carousel, Logo Carousel, Packages Carousel, Tabs Widget, Image Tabs, Panels / Accordion, Google Maps Widget, Info Box Widget, Info Banner Widget, Info String, Pricing Plans, Harmonic Widget, Gallery Grid Filters, Massonry Grid, Isotope Filter Animations, Animated Digits, Interactive Chart, Countdown Widget, Animated Percents Chart (Skills), Tile Buttons (FAQ), Thumbnails, 3D Image Effect / 3D Thumbnail Effect, Thumbnail Zoom Hover, Toolbox, Breadcrumbs, Sorting, Pagination, Follow Buttons / Marketplace Buttons, Date Picker, Info Block / Banners, Featured Icons Block, Sticky Buttons (Quick Mail, Scroll Up), UI Slider Widget (Range Slider),

Editing CSS

For those who for some reason do not like to work with LESS we prepared separate uncompressed style.css. It can be found in css/unminified folder.

Changing Color Scheme Globally

There are 3 possible ways to change color scheme of the whole template.

1. The most quick and easy way is to go to Kedavra / less / variables.less find variable @brand-primary and change hex number. Make sure you re-compile styles.less in order all changes take effect.

2. Make the same changes as in the first variant but this time in Kedavra / less / colors / color.less file. Than compile color.less into color.css and link it right below the main style.css in section of the document (on every page!).

3. Link one of the predefined color.css files in section of the document (on every page!) below main style.css. You can also edit directly color.css file i order to create your unique color scheme.

jQuery Plugins (Editing JS Files)

In order to customize Kedavra Javascript components you need to go to Kedavra / js / scrits.js. This file holds all custom javascript for the template as well as all plugin initialisations and options.

Plugins Used

While creating this template we used some Javascript (jQuery) plugins to extend its functionality:*

While creating this template we used some Javascript (jQuery) plugins to extend its functionality:*

jQuery v1.10.2 - most popular feature-rich JavaScript library.

jQuery Easing v1.3 - add-on for jQuery to create nice easing effects.

Modernizr - JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

Respong.js - script enables responsive web designs in browsers that don't support CSS3 Media Queries - in particular, Internet Explorer 8 and under.

noUISlider - jQuery Range Slider.

Master Slider - Responsive Premium Touch Swipe Slider

Easy Pie Chart - jQuery plugin to render and animate pie charts with the HTML5 canvas element.

iCheck - Customized Checkboxes and Radio Buttons for jQuery.

jQuery Waypoints - jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

jQuery Validate - Clientside Form Validation Plugin.

OWL Carousel - Responsive touch enabled jQuery carousel slider.

Isotope - jQuery plugin for categorizing, sorting, and filtering a responsive grid of items.

jQuery lightGallery - lightweight jQuery lightbox gallery for displaying image and video.

Stellar.js - jQuery plugin for creating Parallax effect.

The Final Countdown - A simple and html agnostic date countdown plugin for jQuery.

*To get more detailed information about how to use / customize these plugins please visit their official websites.

Please be informed that we DO NOT provide support to any third party plugin's. We can only answer simple usage questions or issues related to incompatibility with the template.

Sliders and Carousels Options

Sliders Options

Setting Time/Time Format for Countdown

If you want to set time in Countdown clock you need to go to Kedavra / js / scripts.js to section called "Countdown Widget" and edit lines in bold.

  // Under Construction Page Timer
  if($('#timer1').length > 0) {
    $('#timer1').countdown('2014/12/20', function(event) {
      $(this).html(event.strftime('%D : %H : %M : %S'));
      /*Time Format String where: %D - days; %H - hours; %M - minutes; %S - seconds.*/
  // Event Timer
  if($('#timer2').length > 0) {
    $('#timer2').countdown('2014/12/20', function(event) {
      $(this).html(event.strftime('%D : %H : %M : %S'));
      /*Time Format String where: %D - days; %H - hours; %M - minutes; %S - seconds.*/

Master Slider Documentation

You can find separate detailed Master Slider documentation in the same directory as this help file in the folder called masterslider.

In case you are watching online documentation here is the direct link: Master Slider Documentation

If you need support regarding this plugin please visit the Author Profile page on CodeCanyon.

Photoshop Files

All Photoshop files related to this template you will find in the PSD folder. Please note, these files are used as mockups and can be different from final template. But you can still find necessary graphic assets.

List of Files

Home Pages
  • home-blog-corporate.psd
  • home-blog-personal.psd
  • home-buisness-law.psd
  • home-buisness-real-estate.psd
  • home-event.psd
  • home-landing.psd
  • home-portfolio.psd
  • home-shop.psd
  • home-startup.psd
Blog Pages
  • blog-grid.psd
  • blog-list.psd
  • blog-list-2columns.psd
  • blog-single.psd
Shop Pages
  • cart.psd
  • cart-dropdown.psd
  • checkout.psd
  • checkout-accordion-1.psd
  • checkout-accordion-2.psd
  • checkout-accordion-3.psd
  • checkout-tabs.psd
  • checkout-tabs-2.psd
  • checkout-unregistered.psd
  • order-tracking.psd
  • purchase-history.psd
  • shop-list.psd
  • wishlist.psd
Secondary Pages
  • 404-page.psd
  • 500-page.psd
  • about-corporate.psd
  • about-personal.psd
  • contacts.psd
  • faq-classic.psd
  • faq-tabs.psd
  • login-page.psd
  • profile-view.psd
  • resume.psd
  • search-dropdown.psd
  • search-page.psd
  • search-results.psd
  • share-modal.psd
  • signup-page.psd
  • team.psd
  • under-construction.psd
  • user-account.psd
  • user-account-addresses.psd
  • user-account-notifications.psd
  • user-account-payment.psd
  • user-account-privacy.psd
  • user-account-sharing.psd