Overview of the template, its contents, and how to get started with the template.
by pixelwars
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, you can sign in to our support forums with your purchase code. And please rate the theme on themeforest if you liked it. Thanks so much!
- Pixelwars Team
Any questions that are beyond the scope of this help file, use support forums.
Follow us on themeforest and don't miss new upcoming premium themes.
If you liked the theme you can rate it on themeforest in your downloads menu.
We assume you have basic knowledge of HTML / CSS and JS. In this doc you will not learn how to code but you will learn how to setup, use and customize the theme. Before you begin make sure you have a code editor, you can use Dreamweaver or any other editor like Notepad++ will be enough.
Within the download you'll find the following file structure, logically groupped common assets.
Once downloaded, unzip the compressed folder to see the structure of th theme. You'll see something like this:
cvCard/ ├── css/ ├── js/ ├── media/ ├── images/ ├── Templates/ └── index.html └── other html files
If you have Dreamweaver, and you are going to build a static html site with this template you can benefit template files in "Templates" folder. Template files includes layout markup shared by all pages, and once you have updated a template all pages that inherits that template are automatically updated. For example if you create a new site in Dreamweaver, then copy all project files to this site folder, then open "layout.dwt" under "Templates/" folder and update some parts in the markup in "layout.dwt", when you save it, all pages' markup will be updated. Check out this article for more about Dreamweaver templates. Here are the Dreamweaver template files in this project;
In this template you will find all HTML files in well formatted and highly commented.. Most of the markup is self explanatory with comments. So i will only explain the parts where the markup needs more attention.
cvCard includes two layout; one is "CSS3 Sliding Horizontal Layout" and the other is "Classic Layout" for non supported browsers. Both layout uses the same common markup. This template is a kind of a one page template, all pages are in "index.html".
Uses plain HTML5 Doctype
<!DOCTYPE html>
html tag with custom html5 data attributes for easy customizing. You can learn more about in customization section
<html lang="en" class="no-js one-page-layout" data-classic-layout="false" data-mobile-only-classic-layout="true" data-inAnimation="fadeInUp" data-outAnimation="fadeOutDownBig">
Important : one-page-layout class only used in index.html file which has a one page layout.
Other single pages use single-page-layout class;
<html lang="en" class="no-js single-page-layout" data-classic-layout="false" data-mobile-only-classic-layout="true" data-inAnimation="fadeInUp" data-outAnimation="fadeOutDownBig">
Head tags contains meta tags, font / css and some script files, other script files are added just before the closing tag of the body.
Here are meta tags and title. You can edit them as you want except the viewport meta tag, it preserves responsive layout.
<meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="description" content="cvCard - Responsive HTML5 vCard Template"> <meta name="keywords" content="vcard, html5, portfolio"> <meta name="author" content="Pixelwars"> <title>cvCard</title>
You will see .htaccess file in the template directory. This file contains the code piece that prevents IE to go into "compatibility mode" and ruins the layout. But this file is for "Apache servers". If you will not host your site on "Apache server" and want support IE8, then you should add the meta tag below. But remember this code will not be validated by w3 validator.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
Here are favicon and apple touch icons;
<!-- FAV and TOUCH ICONS --> <link rel="shortcut icon" href="images/ico/favicon.ico"> <link rel="apple-touch-icon" href="images/ico/apple-touch-icon.png"/>
Here are font files. Fonts by Google Webfonts
<!-- FONTS --> <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>
Modernizr script.
<script src="js/modernizr.custom.js"></script>
Here are css files.
<!-- STYLES --> <link rel="stylesheet" type="text/css" media="print" href="css/print.css"> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="js/nprogress/nprogress.css"> <link rel="stylesheet" type="text/css" href="css/animate.css"> <link rel="stylesheet" type="text/css" href="css/fonts/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="css/fonts/fontello/css/fontello.css"> <link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css"> <link rel="stylesheet" type="text/css" href="js/google-code-prettify/prettify.css"> <link rel="stylesheet" type="text/css" href="css/uniform.default.css"> <link rel="stylesheet" type="text/css" href="css/flexslider.css"> <link rel="stylesheet" type="text/css" href="js/mediaelement/mediaelementplayer.css"> <link rel="stylesheet" type="text/css" href="css/tooltipster.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/main.css">
Fallback script files for older ie versions.
<!--[if lte IE 9]> <script src="js/html5shiv.js"></script> <script src="js/respond.min.js"></script> <script src="js/selectivizr-min.js"></script> <![endif]-->
jQuery and other script files are located at the end of the body tag. These are the general script files used over all files.
<!-- SCRIPTS --> <script src="js/jquery-1.10.2.min.js"></script> <script src="js/jquery-migrate-1.2.1.min.js"></script> <script src="js/jquery.address-1.5.min.js"></script> <script src="js/triple.layout.js"></script> <script src="js/smoothscroll.js"></script> <script src="js/nprogress/nprogress.js"></script> <script src="js/fastclick.js"></script> <script src="js/jquery.imagesloaded.min.js"></script> <script src="js/jquery.isotope.min.js"></script> <script src="js/jquery.flexslider-min.js"></script> <script src="js/jquery.fitvids.js"></script> <script src="js/jquery.validate.min.js"></script> <script src="js/jquery.uniform.min.js"></script> <script src="js/jquery.fancybox-1.3.4.pack.js"></script> <script src="js/jquery.tooltipster.min.js"></script> <script src="js/google-code-prettify/prettify.js"></script> <script src="js/twitterFetcher_v10_min.js"></script> <script src="js/mediaelement/mediaelement-and-player.min.js"></script> <script src="js/send-mail.js"></script> <script src="js/classie.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script src="js/main.js"></script>
This template has 5 pages in index.html file: About Me + Portfolio + Contact + Blog(latest posts only) + Resume. The HTML files are in well formatted and highly commented.
Here is the markup for general layout;
<!-- CONTAINER -->
<div class="container" id="container">
<!-- HEADER -->
<header class="header">
</header>
<!-- HEADER -->
<!-- WRAPPER -->
<div class="wrapper">
<!-- PAGE : ABOUT -->
<section id="about" class="page">
<div class="content">
<!-- ABOUT PAGE CONTENT -->
</div>
<!-- CONTENT -->
</section>
<!-- PAGE : ABOUT -->
<!-- PAGE : PORTFOLIO -->
<section id="portfolio" class="portfolio page">
<div class="content">
<!-- PORTFOLIO PAGE CONTENT -->
</div>
<!-- CONTENT -->
</section>
<!-- PAGE : PORTFOLIO -->
<!-- PAGE : CONTACT -->
<section id="contact" class="page">
<div class="content">
<!-- CONTACT PAGE CONTENT -->
</div>
</section>
<!-- PAGE : CONTACT -->
<!-- PAGE : BLOG -->
<section id="blog" class="page">
<div class="content">
<!-- BLOG PAGE CONTENT -->
</div>
</section>
<!-- PAGE : BLOG -->
<!-- PAGE : RESUME -->
<section id="resume" class="page">
<div class="content">
<!-- RESUME PAGE CONTENT -->
</div>
<!-- CONTENT -->
</section>
<!-- PAGE : RESUME -->
</div>
<!-- WRAPPER -->
</div>
<!-- CONTAINER -->
<!-- PORTFOLIO SINGLE AJAX CONTENT CONTAINER -->
<div class="p-overlay"></div>
<div class="p-overlay"></div>
<!-- ALERT : used for contact form mail delivery alert -->
<div class="site-alert animated"></div>
Here is the markup for header.
<!-- HEADER --> <header class="header"> <img src="images/site/avatar.png" alt="avatar"> <h1>Johnny Doe</h1> <p>freelance graphic designer</p> <!-- NAV MENU --> <ul class="vs-nav"> <li><a href="#/about">about me</a></li> <li><a href="#/portfolio">portfolio</a></li> <li><a href="#/contact">contact</a></li> <li><a href="#/blog">blog</a></li> <li><a href="#/resume">resume</a></li> </ul> <!-- NAV MENU --> <!-- SEARCH --> <div class="header-search"> <form role="search" method="get" id="search-form" action="#"> <input type="text" value="" name="s" id="search" placeholder="ENTER KEYWORD"> <input type="submit" id="search-submit" title="Search" value="→"> </form> </div> <!-- SEARCH --> </header> <!-- HEADER -->
This template is based on Bootstrap 's solid responsive 12 column grid system.
Here is a simple example of using grid to crate a 3 column layout;
<div class="row"> <div class="col-md-4">column 4/12</div> <div class="col-md-4">column 4/12</div> <div class="col-md-4">column 4/12</div> </div>
Note that: columns must be wrapped by a row container. This is a simple usage of the grid system. Bootstrap grid sytems has more powerfull features, check out Bootstrap Doc to learn more about the grid system.
This template uses 2 font icon set. They are all font icons(vector) and can be styled easily with css. They are also easy to drop in anywhere as you will see in some part of this template.
For FontAwesome icons;
<i class="fa fa-microphone"></i>
For Fontello icons;
<i class="icon-comment"></i>
"About Me" page is consist of : Intro Text / Latest Tweets / Services / Work Process / Fun Fact and Clients.
<!-- intro --> <div class="intro"> <h2> Hello. I am <span class="rotate-words"> <span>an illustrator.</span> <span>a writer.</span> <span>a freelancer.</span> <span>an inventor.</span> <span>a wordpress fan.</span> <span>a coffee lover.</span> </span> <br> I live in a small town somewhere in the world. <br> I am passionated about <strong>minimalistic</strong> and flat design. </h2> </div> <!-- intro -->
You can add many span to div.rotate-words, they will be rotated automatically.
<div id="latest-tweets" class="widget-twitter" data-twitterId="388393979672150017" data-tweet-count="1"></div>
How to create a valid ID to use:
data-twitterIddata-tweet-count determines how many tweet to show.
Resume page is consist of : Work and Education History/ Skills / Testimonials.
Here is the markup for skills;
<!-- DEV SKILLS --> <div class="skillset"> <!-- .skill-unit --> <div class="skill-unit"> <h4>HTML5</h4> <div class="bar" data-percent="100"> <div class="progress"></div> </div> </div> <!-- .skill-unit --> <!-- .skill-unit --> <div class="skill-unit"> <h4>CSS3</h4> <div class="bar" data-percent="50"> <div class="progress"></div> </div> </div> <!-- .skill-unit --> </div> <!-- DEV SKILLS -->
Note that : Use data-percent="number" attribute to give percentage to each skill.
Portfolio page has multi column masonry layout and filtering powered by isotope plugin.
Here is the markup for filters;
<!--FILTERS--> <ul id="filters" class="filters"> <li class="current"><a href="#" data-filter="*">ALL</a></li> <li><a href="#" data-filter=".design">DESIGN</a></li> <li><a href="#" data-filter=".coding">CODING</a></li> <li><a href="#" data-filter=".logo">LOGO</a></li> </ul> <!--FILTERS-->
Note that : data-filter=".design" attiribute keeps the class name of items which will be filtered under same category.
Here is the structure of portfolio items;
<!-- PORTFOLIO ITEMS --> <div class="portfolio-items media-grid" data-layout="masonry"> <div class="hentry design media-cell"> ... </div> <div class="hentry coding media-cell"> ... </div> <div class="hentry logo media-cell"> .. </div> </div> <!-- PORTFOLIO ITEMS -->
Note that again : class name design in <div class="hentry design"> is related to data-filter=".design" attribute of filter markup.
data-layout determines grid layout, see all isotope layouts. Most used two layouts are masonry and fitRows.
We have 3 different types of portfolio item in general; Ajax Portfolio Details (with sidebar - full width layout) / Lightbox (image - image gallery - video - audio) and Custom Url.
Uses jquery ajax html loading to show portfolio details. Here is the markup;
<!-- portfolio-item --> <div class="media-cell design hentry"> <div class="media-box"> <img src="images/portfolio/01.png" alt="portfolio-post"> <div class="mask"></div> <a href="portfolio-item-01.html" class="ajax"></a> </div> <div class="media-cell-desc"> <h3>Personal Cv Project</h3> <p class="category">an illustration work</p> </div> </div> <!-- portfolio-item -->
Uses customized and mobile optimized fancybox plugin. Supports image titles, image gellaries, videos and audios. Here is the markup;
<!-- portfolio-item - lightbox image --> <div class="media-cell design image hentry"> <div class="media-box"> <img src="images/portfolio/04.png" alt="portfolio-post"> <div class="mask"> <!-- lightbox - image --> <a href="images/portfolio/lightbox-01.jpg" title="an illustration by Vasili Tkach" data-lightbox-gallery="fancybox-item-01" class="lightbox"></a> <!-- lightbox - image --> </div> </div> <div class="media-cell-desc"> <h3>World War X</h3> <p class="category">ligthbox image</p> </div> </div> <!-- portfolio-item - lightbox image --> <!-- portfolio-item - lightbox gallery --> <div class="media-cell logo image hentry"> <div class="media-box"> <img src="images/portfolio/07.png" alt="portfolio-post"> <div class="mask"> <!-- lightbox - gallery --> <a href="images/portfolio/lightbox-02.jpg" data-lightbox-gallery="fancybox-item-02" class="lightbox" title="Octopus is dangerous!"></a> <a href="images/portfolio/lightbox-03.jpg" data-lightbox-gallery="fancybox-item-02" class="hidden lightbox"></a> <a href="images/portfolio/lightbox-04.jpg" data-lightbox-gallery="fancybox-item-02" class="hidden lightbox" title="Dog have dreams"></a> <!-- lightbox - gallery --> </div> </div> <div class="media-cell-desc"> <h3>Wizard Adventure</h3> <p class="category">lightbox gallery</p> </div> </div> <!-- portfolio-item - lightbox gallery --> <!-- portfolio-item - lightbox video --> <div class="media-cell coding video hentry"> <div class="media-box"> <img src="images/portfolio/03.png" alt="portfolio-post"> <div class="mask"></div> <!-- lightbox - video --> <a href="http://player.vimeo.com/video/79380715?title=0&byline=0&portrait=0&color=009966" title="Paper by FiftyThree" data-lightbox-gallery="fancybox-item-03" class="lightbox iframe"></a> <!-- lightbox - video --> </div> <div class="media-cell-desc"> <h3>Sleepy Games</h3> <p class="category">lightbox video</p> </div> </div> <!-- portfolio-item - lightbox video --> <!-- portfolio-item - lightbox soundcloud --> <div class="media-cell coding audio hentry"> <div class="media-box"> <img src="images/portfolio/06.png" alt="portfolio-post"> <div class="mask"> <!-- lightbox - soundcloud --> <a href="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/129829419&color=009966&auto_play=false&show_artwork=true" title="Soundcloud embed" data-lightbox-gallery="fancybox-item-04" class="lightbox iframe"></a> <!-- lightbox - soundcloud --> </div> </div> <div class="media-cell-desc"> <h3>Empty Battery</h3> <p class="category">lightbox soundcloud</p> </div> </div> <!-- portfolio-item - lightbox soundcloud -->
Note that : items with the same value of data-lightbox-gallery attribute will be shown as lightbox gallery.
Note that : lightbox video or audio link need to have class iframe to work correctly.
Opens a custom url in a new tab. The markup;
<!-- portfolio-item - custom url --> <div class="media-cell logo url hentry"> <div class="media-box"> <img src="images/portfolio/08.png" alt="portfolio-post"> <div class="mask"> <a href="http://themeforest.net/user/pixelwars" target="_blank"></a> </div> </div> <div class="media-cell-desc"> <h3>Shinny Robot</h3> <p class="category">an illustration work</p> </div> </div> <!-- portfolio-item - custom url -->
We have two different layout for portfolio details: Sidebar / without Sidebar.
Here is the generic layout of portfolio single pages;
<!-- CONTAINER --> <div class="container" id="container"> <!-- HEADER --> <header class="header"> </header> <!-- HEADER --> <!-- WRAPPER --> <div class="wrapper"> <!-- .portfolio-single --> <div class="portfolio-single"> <!-- .row --> <div class="row"> <!-- TITLE - column 8/12 --> <div class="col-md-8 portfolio-field portfolio-title"> <h2>Showcase your project</h2> </div> <!-- TITLE - column 8/12 --> <!-- PORTFOLIO-NAV - column 4/12 --> <div class="col-md-4 portfolio-field portfolio-nav"> <a class="icon button prev ajax" href="portfolio-item-03.html"></a> <a class="icon button next ajax" href="portfolio-item-02.html"></a> <a class="button back" href="#/portfolio"></a> </div> <!-- PORTFOLIO-NAV - column 4/12 --> </div> <!-- .row --> <!-- PORTFOLIO SINGLE PAGE CONTENT --> <!-- .row --> <div class="row"> <!-- PORTFOLIO-NAV BOTTOM - column 12/12 --> <div class="col-md-12 portfolio-field portfolio-nav bottom"> <a class="icon button prev ajax" href="portfolio-item-03.html"></a> <a class="icon button next ajax" href="portfolio-item-02.html"></a> <a class="button back" href="#/portfolio"></a> </div> <!-- PORTFOLIO-NAV BOTTOM - column 12/12 --> </div> <!-- .row --> </div> <!-- .portfolio-single --> </div> <!-- WRAPPER --> </div> <!-- CONTAINER -->
Note : we will pull the content of <div class="portfolio-single"> in index.html via ajax.
And the markup is;
<!-- .row --> <div class="row"> <!-- PORTFOLIO-IMAGES - column 8/12 --> <div class="col-md-8 portfolio-field"> <img src="images/portfolio/single/single-05.png" alt="project"> <img src="images/portfolio/single/single-07.png" alt="project"> </div> <!-- PORTFOLIO-IMAGES - column 8/12 --> <!-- PORTFOLIO SIDEBAR - column 4/12 --> <div class="col-md-4 portfolio-field"> <h3>Description</h3> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. </p> <p>Established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters. </p> <h3>Client</h3> <p>Apple Inc.</p> <h3>Technology</h3> <ul class="tags"> <li><a>HTML 5</a></li> <li><a>CSS 3</a></li> <li><a>jQuery</a></li> <li><a>Responsive Design</a></li> </ul> <div class="launch"> <a href="#" class="button primary">LAUNCH PROJECT</a> </div> </div> <!-- PORTFOLIO SIDEBAR - column 4/12 --> </div> <!-- .row -->
And the markup is;
<!-- .row --> <div class="row"> <!-- PORTFOLIO-IMAGES - column 8/12 --> <div class="col-md-8 portfolio-field"> <img src="images/portfolio/single/single-05.png" alt="project"> <img src="images/portfolio/single/single-07.png" alt="project"> </div> <!-- PORTFOLIO-IMAGES - column 8/12 --> <!-- PORTFOLIO SIDEBAR - column 4/12 --> <div class="col-md-4 portfolio-field"> <h3>Description</h3> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. </p> <p>Established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters. </p> <h3>Client</h3> <p>Apple Inc.</p> <h3>Technology</h3> <ul class="tags"> <li><a>HTML 5</a></li> <li><a>CSS 3</a></li> <li><a>jQuery</a></li> <li><a>Responsive Design</a></li> </ul> <div class="launch"> <a href="#" class="button primary">LAUNCH PROJECT</a> </div> </div> <!-- PORTFOLIO SIDEBAR - column 4/12 --> </div> <!-- .row -->
NOTE : You can add images or videos as many as you wish to portfolio single content as shown above. They will behave flexible.
NOTE : You can built your own portfolio single templates with built in bootstrap responsive grid as you wish.
Contact page is consist of : Contact Info / Social Icons / Contact Form / Google Map.
1-) You can change mail subject in form's html markup;
<!-- enter mail subject here --> <input type="hidden" name="subject" id="subject" value="You have a new message from cvCard!">
Change only the value="You have a new message from cvCard!" to your desired subject.
2-) Edit send-mail.php in a text editor,
// site owner $site_name = 'cvCard HTML5 Template'; $sender_domain = 'server@your-domain.com'; $to = 'your-mail@gmail.com';
$site_name : this will be shown as sender name.$sender_domain : this is required for some hosting like dreamhost. It should be like server@your-domain.com.$to : This is the receiver e-mail address, your address.Here is the markup for all available social icons;
<!-- SOCIAL --> <ul class="social"> <li><a class="facebook" href="#"></a></li> <li><a class="twitter" href="#"></a></li> <li><a class="linkedin" href="#"></a></li> <li><a class="google-plus" href="#"></a></li> <li><a class="pinterest" href="#"></a></li> <li><a class="github" href="#"></a></li> <li><a class="behance" href="#"></a></li> <li><a class="dribbble" href="#"></a></li> <li><a class="instagram" href="#"></a></li> <li><a class="lastfm" href="#"></a></li> <li><a class="rss" href="#"></a></li> <li><a class="vimeo" href="#"></a></li> <li><a class="forrst" href="#"></a></li> <li><a class="skype" href="#"></a></li> <li><a class="picasa" href="#"></a></li> <li><a class="youtube" href="#"></a></li> <li><a class="flickr" href="#"></a></li> <li><a class="tumblr" href="#"></a></li> <li><a class="blogger" href="#"></a></li> <li><a class="delicious" href="#"></a></li> <li><a class="digg" href="#"></a></li> <li><a class="friendfeed" href="#"></a></li> <li><a class="wordpress" href="#"></a></li> <li><a class="stack-overflow" href="#"></a></li> <li><a class="foursquare" href="#"></a></li> <li><a class="xing" href="#"></a></li> <li><a class="weibo" href="#"></a></li> <li><a class="soundcloud" href="#"></a></li> <li><a class="fivehundredpx" href="#"></a></li> <li><a class="slideshare" href="#"></a></li> </ul> <!-- SOCIAL -->
This is the markup for google map;
<!-- GOOGLE MAP --> <div class="map"> <div data-latitude="-25.363882" data-longitude="131.044922" data-zoom="4" id="map-canvas" class="map-canvas"></div> </div> <!-- GOOGLE MAP -->
How to get latitude and longitude values.
data-latitude : enter latitude value for your mapdata-longitude : enter longitude value for your mapdata-zoom : enter zoom value for your map$sender_domain : this is required for some hosting like dreamhost. It should be like server@your-domain.com.$to : This is the receiver e-mail address, your address.There are 2 different types of single page layout in this template;
Perfect for readable content. Here is the markup;
<!-- CONTAINER --> <div class="container" id="container"> <!-- HEADER --> <header class="header"> </header> <!-- HEADER --> <!-- WRAPPER --> <div class="wrapper"> <!-- .readable-content --> <div class="readable-content"> <!-- .hentry --> <article class="post hentry"> <!-- .entry-header --> <header class="entry-header"> <h1 class="entry-title">PAGE TITLE</h1> </header> <!-- .entry-header --> <!-- .entry-content --> <div class="entry-content"> <!-- PAGE CONTENT HERE --> </div> <!-- .entry-content --> </article> <!-- .hentry --> </div> <!-- .readable-content --> </div> <!-- WRAPPER --> </div> <!-- CONTAINER -->
Perfect for readable content. Here is the markup;
<!-- CONTAINER --> <div class="container" id="container"> <!-- HEADER --> <header class="header"> </header> <!-- HEADER --> <!-- WRAPPER --> <div class="wrapper"> <!-- .full-width-content --> <div class="full-width-content"> <!-- .hentry --> <article class="page type-page hentry"> <!-- .entry-header --> <header class="entry-header"> <h1 class="entry-title">PAGE TITLE</h1> </header> <!-- .entry-header --> <!-- .entry-content --> <div class="entry-content"> <!-- PAGE CONTENT HERE --> </div> <!-- .entry-content --> </article> <!-- .hentry --> </div> <!-- .full-width-content --> </div> <!-- WRAPPER --> </div> <!-- CONTAINER -->
Blog page supports several post formats. I want to talk about self hosted audio and video. Other post format's html markup is simple enough.
This template uses mediaelementjs script for self hosted html5 audio/video solution. It also has flash/silverlight fallbacks for non-supported browsers.
Only one .mp3 file is enough for self hosted html5 audio. Here is the markup;
<audio preload="none" src="media/AirReview-Landmarks-02-ChasingCorporate.mp3" style="width: 100%;"></audio>
And again thanks to mediaelementjs only one .mp4 file is enough for self hosted html5 video. Here is the markup;
<!-- .media-wrap --> <div class="media-wrap"> <video src="media/big-buck-bunny-trailer.mp4" poster="media/big-buck-bunny-trailer.jpg" preload="none" style="width: 100%; height: 100%;"></video> </div> <!-- .media-wrap -->
Note : <div class="media-wrap">is needed to make the video responsive with correct aspect ratio.
Note : poster="media/big-buck-bunny-trailer.jpg" is the image that will be shown as placeholder (or poster) before video playing.
This template uses flexslider for image gallery. Here is the markup for slides;
<!-- .flexslider --> <div class="flexslider" data-autoplay="false" data-interval="3000" data-animation="slide" data-direction="horizontal" data-animationSpeed="600" data-pauseOnHover="true"> <!-- .slides --> <ul class="slides"> <!-- slide --> <li> <img src="images/blog/daft-punk-presentation.png" alt="slide"> <p class="flex-title">This is a slide title.</p> </li> <!-- slide --> <!-- slide --> <li> <img src="images/blog/lee-2.png" alt="slide"> </li> <!-- slide --> <!-- slide --> <li> <img src="images/blog/lee.png" alt="slide"> </li> <!-- slide --> </ul> <!-- .slides --> </div> <!-- .flexslider -->
You can customize flexslider with data attributes;
data-autoplay autoplay slideshow : "true" or "false"
data-interval slideshow image change interval(in ms) when autoplay is on.
data-animation slide change animation : "slide" or "fade"
data-direction slide direction : "horizontal" or "vertical"
data-animationSpeed slide change animation speed(in ms)
data-pauseOnHover pause the slideshow when interacting with control elements : "true" or "false"
Here is a complete list of used css files in the theme and what thay stand for;
In this theme we have used font icons instead of png icons, because font icons are vector-scalable, ready for retina screens, saves bandwidth and easy to work with.
We are using jquery (v1.10.2) as javascipt framework.
Here is a complete list of used script files in the template and what thay stand for;
We designed this template for easy customization. You can customize the template easily to your needs in two general ways : Html Data Attributes / CSS Skins.
Here is a list of custom data attributes you can use with html tag.
<html lang="en" class="no-js one-page-layout" data-classic-layout="false" data-mobile-only-classic-layout="true" data-inAnimation="fadeInUp" data-outAnimation="fadeOutDownBig">
data-classic-layout : true/false : when true always fallbacks to classic layout, deactivates "Sliding Horizontal Layout" layout. Default value is false.data-mobile-only-classic-layout : true/false : when true always fallbacks to classic layout on mobile devices. Default value is true. Make it false if you want to try "Sliding Horizontal Layout" on mobile.data-inAnimation : Determines the animation type for ajax portfolio details page in animation; You can see a full list of supported animations live in animate.css.data-outAnimation : Determines the animation type for ajax portfolio details page out animation; You can see a full list of supported animations live in animate.css. NOTE : Make sure you select any "in" animation for data-inAnimation and "out" animation for data-outAnimation attributes.
This template has 3 predefined skins for quick customization. Skin files are located in css/skins folder.
css/skins/ ├── flat.css ├── overlay.css └── overlay-bold.css
If you don't include any skin you will get the minimal style.
Add the selected skin style file just before the close bracket of head tag.
<link rel="stylesheet" type="text/css" href="css/skins/flat.css">
While this template is designed for easily styling with predefined css skin files if you want to edit a specific section of the site, follow these steps;
First grab the element you want to style by inspecting element in your browser, right click the element and click Inspect Element. If you don't know how, check out this article, once you are familiar with this approach you will find it extremely easy to edit/override current styles of an element.
Let's say you want to make active filter link item bolder in portfolio filtering. Grab the element by right click on it and click "Inspect Element", on the right pane of developer tool window we can see to code to grab the elemnent with css : #filters .current a Then do the following;
#filters .current a { font-weight: bold; }
If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight .
#portfolio #filters .current a { font-weight: bold ; }
And if your new style is not overriding, add !important at the end of style definition;
#filters .current a { font-weight: bold !important; }
NOTE : Add your custom css code after all style definitions in your head tag.
<style>
#filters .current a { font-weight: bold !important; }
</style>
Here are some simple css code snippets to customize the essentials;
Change classic layout nav menu active item text color and background color;
/* Classic Layout Nav Active Item */
.classic-layout .vs-nav li a:hover,
.classic-layout .vs-nav li.current_page_item a {
color: #fff; background: #345;
}
Change cover h3 span (yellow) titles text color;
.cover h3 span { color: #FC0; }
Change link colors;
/* Links */
a { color: #096; }
a:hover { color: #5BCF80; }
Change text-selection color;
/* Text Selection */
::selection { text-shadow: none; color: #333; background: #FFFFCF; }
::-moz-selection { text-shadow: none; color: #333; background: #FFFFCF; }
You will see "THEME" section at the end of the main.css file. You can easily customize primary/secondary color there.
/* --------------------------------------------
8. THEME - customize colors etc...
-------------------------------------------- */
body {
color: #345;
}
/* Links */
a {
color: #096;
}
a:hover {
color: #5BCF80;
}
/* Text Selection */
::selection {
text-shadow: none; color: #333; background: #FFFFCF;
}
::-moz-selection {
text-shadow: none; color: #333; background: #FFFFCF;
}
/* Service Icons */
.color1 i {
background: #F8CB30;
}
.color2 i {
background: #74BADE;
}
.color3 i {
background: #5BCF80;
}
.color4 i {
background: #E25E5B;
}
/* PRIMARY COLOR : #096
================================================== */
.navigation a:hover,
.pagination a:hover,
.entry-meta a:hover,
.single-page-layout .vs-nav li i:hover,
.media-box .mask:before,
.button.primary:hover,
a.more-link:hover,
.flex-control-paging li a.flex-active,
.mejs-controls .mejs-time-rail .mejs-time-current,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
background: #096
}
.entry-title a:hover,
.portfolio-nav a.button:hover,
.related-posts li a:hover,
.nav-single a:hover,
.comment-meta a:hover,
.comment-meta .fn + a:hover,
.comment-reply-link:hover {
color: #096
}
.portfolio-nav a.button:hover,
.format-link .link-content > a:first-child:hover,
.flex-control-paging li a:hover,
.bypostauthor > article {
border-color: #096
}
/* SECONDARY COLOR : #5BCF80 - lighter than primary color
================================================== */
.skill-unit .bar .progress,
.event .date,
.letter-info p i,
.media-cell-desc .date,
#nprogress .bar,
#fancybox-close,
.portfolio-nav a.button.back {
background: #5BCF80;
}
#nprogress .spinner-icon {
border-top-color: #5BCF80; border-left-color: #5BCF80;
}
We included the fonts in this template from Google Webfonts which uses font-face technique for font embeeding.
Font declerations are at the head section;
<!-- FONTS --> <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>
To change fonts, just go to Google Webfonts site, search and select a new font, click "Quick use" link, then copy the stylesheet code from Add this code to your website: / Standart section and paste the code into head section. Then change the font family name in main.css starting from line:376. These font definitions in main.css are the only font definitions for the entire theme, once you have changed font-family in these lines, you are done!
/* BODY */
body,
input,
textarea,
select,
button {
font-family: Lato, Arial, serif
}