introduction
Before setting up the theme, it is imperative to realize it's capabilities, scope and potential usage.While developing this theme our main focus was to make it user friendly and easy to use for non-technical users requiring their less input or otherwise minimal expertise.
This template is 100% (highly) customizable, each block is portable and can be moved to another page hence producing a new design/layout.
Also by simply adding classes in code, user can get variations in styles.
We have optimized the code for load speed and extensively used CSS for effects etc.
The code is 100% bug free and follows W3C standards.
We have used latest tools for development e.g., HTML5/CSS3, BootStrap that will give you powerful and innovative experience for your projects. The theme is fully responsive and retina ready, compatible with all browsers and mobile-devices.
It has passed highest standards of Quality Assurance, giving you freedom and enjoyment of a well-managed, error free code that you can use in any project.
Darna is a construction business Template that has following feature
Home & Inner Pages
- 5 Home Pages
- 3 Blog Pages
- 4 shop Pages
- 8 Shortcodes
- 5 project Page
- 5 primary Page
- 1 Error Page
Setting up Darna Theme
Follow these guide lines below to get started with your Site:
- Open the
Darna/markupFolder to find all the Templates Files - You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
- Make sure you upload the required files/folders listed below:
markup/css- Required css filesmarkup/fonts- Required fonts filesmarkup/images- Required images filesmarkup/js- Required Javacripts filesmarkup/revolution- Revolution Slidermarkup/contact.php- Required PHP filemarkup/index.html- Index File/Homepage
- The other files can be used according to your requirement.
- After adding all these folder on server you're now good to go..! just add your Content and you will have awesome Template.
HTML Structure
We have Developed Darna with a simple coding structure. here is the sample:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- All Stylesheets here -->
</head>
<body>
<!-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -
PRELOADER STARTS
-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -->
<div id="preloader">
....
</div>
<!-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -
PRELOADER END
-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -->
<!-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -
TOPBAR START
-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -->
<div class="top-bar">
......
</div>
<!-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -
TOPBAR END
-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -->
<header>
<div class="container">
<!-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -
NAVIGATION STARTS
-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -->
<div class="navbar-header">
<!-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -
BURGR MENU STARTS
-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -->
<button class=" burger-menu easy-sidebar-toggle">
<span class="menu-global menu-top"></span>
<span class="menu-global menu-middle"></span>
<span class="menu-global menu-bottom"></span></button>
<!-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -
BURGR MENU END
-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -->
<!-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -
LOGO START
-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -->
<a class="navbar-brand" href="home_1.html">
<img alt="" src="images/logo.png"></a>
<!-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -
LOGO END
-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -->
</div>
<!-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -
MENU START
-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -->
<!-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -
SLIDER START
-- -- -- - -- -- -- - -- -- -- - -- -- -- -- -->
<div class="slider">
<div class="slider">
...
</div>
<!-- Contents Containers -->
<div class="container">
...
</div>
<!-- footer of the page -->
<footer>
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Please Note to use jQuery("Selector") instead of using $ -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
</body>
</html>Page PreLoaders
You can show Interactive loaders to your Visitors while the Pages of you Website loads in the background & then Reveal your Pages with CSS3 Transitions.
<div id="preloader">
<div id="status">
<!-- Here you can add preloader style -->
</div>
</div>
HTML Layout
1. Boxed
Just add class body tag.
<body class="body-boxed">
2. Boxed Pattern
Just add class boxed-pattern inside body tag.
<body class="boxed-pattern">
Note You can change pattern background by change image name pattern.jpg from images folder
3. Boxed Image
Just add class boxed-image inside body tag.
<body class="boxed-image">
Note You can change image background by change image name bg-image.jpg from images folder
4. Boxed Color
Just add class boxed-color inside body tag.
<body class="boxed-color">
Note You can change background color by change hex from style.css at
body.boxed-color {background:#121212;}
5. RTL version
Just add RTL style link under defalut style inside Head tag.
<link href="css/style.css" rel="stylesheet" >
<link href="css/style-rtl.css" rel="stylesheet" >
Note RTL CSS file depends on the defalut style must use both styles in the previous order
Logo Settings
The Logo can be found in the Nav Section - nav
<a class="navbar-brand" href="index.html"> <img src="images/logo/logo.png" class="img-responsive" alt="Darna Logo"> <img src=""images/logo/logo-02.png"" class="img-responsive" alt="Darna Logo"> <img src=""images/logo/logo-03.png"" class="img-responsive" alt="Darna Logo"> </a>
Note The Logo Image's width/ height can be 175px/ 44px
Retina Logo
If you wish to use a Retina Logo, make sure that you use double the size of your Standard Logo.
Color Schemes
You can change your Website's Color Scheme in an instant.
- Changeing just HEX value in
css/color.css
Changing Fonts
Changing Fonts in Darna is very easy. By default, Darna uses Lato from the Google Fonts Library.
1- Add this code to your website, "css/style.css" file.
<!-- Fonts Poppins -->
@import url(https://fonts.googleapis.com/css?family=Lato:100,200,300,400,400italic,500,600,700,700italic,900);
@import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700);
2- Integrate the fonts into your CSS:
font-family: 'Lato', sans-serif;
Page Titles
Darna has following base HTML structure for page title.
Images classes .page-head, .page-head-blog, .page-head-shop, .page-head-project,...
<section class="blog-content-title-wrap page-head-blog"> <div class="blog-content-title-overlay"> </div> <div class="container"> <div class="blog-content-title-inner block-center"> <div class="block-center-inner"> <h1>Blog</h1> <ul class="breadcrumbs"> <li><a class="home" href="/" rel="v:url"> <i class="fa fa-home"></i></a></li> <li><span>Blog</span></li> </ul> </div> </div> </div> </section>
Columns & Grid
Bootstrap Grid
Slider Types & their Options
Darna includes 2 Unique Sliders & Pre-Built Slider Templates for you to be used on any Page with 10s of Options. The List of all the Sliders included are mentioned as follows:
- Revolution Slider
- Owl Slider
Revolution Slider
You can find the Revolution Slider related Documentation here.
Read Revolution Slider Docs
Blog Setup
Darna has 2 different type of Blog Posts. Use the Code Sample below:
Blog post
<article> <div class="entry-wrap clearfix"> <div class="entry-thumbnail-wrap"> <div class="entry-thumbnail"> ...</div> </div> <div class="entry-c-wrap"> ... </div> <div class="entry-excerpt"> <p>....</p> </div> <a class="darna-button style4 size-sm" > Read more</a> </div> </article>
Post Types
You can use a 14 different types of Post Types:
- Image
- image full width
- 3 column
- blockquote
- lEFT SIDEBAR
- right SIDEBAR
- both sidebar
- slider
- audio
- sound cloud
- vimeo
- youtube
- html5 video
Setting Up Parallax Sections:
Make sure your Parallax Images are of enough Width & Height, preferably 1920x1080 or above.
<div class="parallax-1"> <div class="container"> <div class="row"> <div class="col-lg-12"> </div> </div> </div> </div>
Tabs, Toggles & Accordions
You can use Tabs, Toggles & Accordions in Various Styles and with Different Options to display Below the Fold content.
Tabs
Use this code to display Tabs:
<div class="tabs-section"> <ul class="tabset"> <li><a href="#tab-1">Tab 1</a></li> <li><a href="#tab-2">Tab 2</a></li> <li><a href="#tab-3">Tab 3</a></li> </ul> <div class="tab-content"> <div id="tab-1"> This is Tab 1 Content </div> <div id="tab-2"> This is Tab 2 Content </div> <div id="tab-3"> This is Tab 3 Content </div> </div> </div>
Note: Make sure you add unique IDs for each Tab Container and Tab Items.
Accordion
You can add an Accordion using the Code below:
<div id="accordion" class="panel-group"> <div class="panel panel-default"> <div class="panel-heading actives"> <div class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> title....</a> </div> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> ... </div> </div> </div>
Lightbox
Setting up Lightboxes:
Adding a .lightbox class to any Link or Button will turn it into a Lightbox Element. You can use different Types of Lightbox with an Easy Setup:
Single Image:
<a class="image-popup-vertical-fit" href="images/vehicle-park/1.jpg" title="Pellentesque habitant morbi"></a>
Video:
<a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Lightbox Video</a>
Note: It is recommended that you use only this Format http://www.youtube.com/watch?v=kuceVNBTJio for Youtube Videos.
Google Maps
You can add Embedded Google Maps iframe to any Page using the following setup:
Add a section which will contain your Google Map:
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d25215.625657884106!2d144.956637!3d-37.81456500000001!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d4e793770d3%3A0x9e44d6ad0d76ba7c!2s121+King+St%2C+Melbourne+VIC+3000%2C+Australia!5e0!3m2!1sen!2sus!4v1435061406583" height="400" allowfullscreen></iframe>
Countdown
You can add a Countdown Timer to any Page using the following setup:
<div class="count"></div>
<script>
$(window).load(function() {
$('.count').counterUp({
delay: 10,
time: 1000
});
});
</script>
Contact AJAX Form Setup
Update email address. Please open contact.php†update your email address in line#2.
$adminemail = "youremailhere@googlemail.com";
Images
Note: If you need the Default Mockups PSD Files used in the Darna Template, you can Buy them here
CSS & Fonts
- Bootstrap
- Font-Awesome (Font Icons)
- Icomoon (Font Icons)
- Google Fonts
Initial Release V2.0
Released on 1st NOV 2016