Flatrok theme is a responsive layout using the Bootstrap framework (ver. 3) Each content sections is labeled with an id. (ex: <div id="profile"></div>). Many classes associated with each div are related to the bootstrap framework. For more information regarding bootstrap classes please refer to the bootstrap docs, located here. You will find that the html file, index.html is well commented on each section. Refer to the documentation below for more information.
The page header sections is marked with a class page-head and it contains your profile picture, name, quote, job tag and navigation. These elements are shown below:
To change the profile picture, update the URL of the <img> tag. The name and quote displayed are both inside the <div class="tagline">.
<div class="col-sm-12 col-md-12">
<div class="profile-pic">
<img src="images/profile.png" width="181" height="181" alt="Profile picture."/>
</div>
<div class="tagline">Joe Smith<span>Going forward, one line at a time.</span></div>
<div class="clearfix"></div>
<div class="jobtag">
<span>Developer</span>
</div>
</div>
At the start of the profile section, there is a general overview area. This area is a standard div with a class of info. Edit the contents of <p> to update this sections.
The information sections contains information about yourself.
<!--Profile Information-->
<div class="col-xs-12 col-sm-3 col-md-offset-1 col-md-3">
<h2>Profile</h2>
<h3>Information</h3>
<div class="profile-information">
<div class="item">Name: <span>Joe Smith</span></div>
<div class="item">Age: <span>27</span></div>
<div class="item">From: <span>USA</span></div>
<div class="item">Lives In: <span>New York, NY</span></div>
<div class="item">Likes:
<ul class="tag-area">
<li>Programming</li>
<li>Running</li>
<li>Sports</li>
<li>Design</li>
<li>Cars</li>
</ul>
</div>
</div>
</div> <!--End Profile Information -->
The skills section is broken down into two divs. The center column and the right column. The center column is commented as <!--Profile Skills Section 1--> with the right column being <!--Profile Skills Section 2-->. An individual skill item is shown below:
Important
The data-fill-level attribute is used to set the amount to fill the progress bars. Values range 1-10
<div class="skill-item">
<h5>C# / ASP.NET</h5>
<ul class="progress-bubbles color-bg-profile" data-fill-level="2"></ul>
<p>Tamquam apeirian argumentum vim id. Cu reque quaeque vis, id quo sumo vero.</p>
</div>
The resume is broken down into two sections, the Timeline and Experience.
The timeline is used for both the Education and Work sections of the Resume. The Work section uses an extra <span> to display the job title.
Note
The <span class="job-title"> show a sub heading other the item’s header. ex. Work List Item.
<div class="timeline-item">
<div class="date">
<div class="dot"></div>
<span>Feb 2001 - Nov 2003</span>
</div>
<h5 class="timeline-title">Great Company</h5>
<span class="job-title">iOS Developer</span>
<p>Donec blandit aliquam enim ac adipiscing. Quisque tempus lacus quis volutpat mattis. Quisque vel
gravida massa, et pharetra lacus. Nulla facilisi.</p>
</div>
<!--Experience Item-->
<div class="experience-item">
<p>PHP</p>
<div class="progress">
<div class="progress-bar progress-bar-experience" role="progressbar" data-value="70"
aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">70% Complete (success)</span>
</div>
</div>
</div> <!-- End Experience Item -->
To change the value of the progress bar update the data-value attribute on the progress-bar-experience <div>.
The Other Experience section is made up of a <ul> element with a class of tag-area. Each <li> element is a new item in the section.
<!--Other Experience-->
<div class="row">
<div class="col-md-offset-1 col-md-10">
<div class="other-experience">
<h5>Other Experience</h5>
<ul class="tag-area">
<li>Django</li>
<li>Visual Studio</li>
<li>Adobe Illustrator</li>
<li>Adobe Photoshop</li>
<li>Ruby</li>
<li>Rails</li>
<li>Linux</li>
<li>Windows</li>
<li>Mac OSX</li>
<li>MongoDB</li>
</ul>
</div>
</div>
</div> <!-- End Other Experience -->
The Portfolio section uses to <ul> elements to make the menu as well as the images to display. The portfolio menu has a nested <a> element, which is used to determine which images are displayed.
Warning
Only one <li> must should have a class of active to show the initial selected item. Each <a> must contain a data-filter attribute, which is used to determine the class of items to display.
<!--Portfolio Menu -->
<ul class="portfolio-menu">
<li class="active"><a href="#" data-filter="*">Everything</a></li>
<li><a href="#" data-filter=".photos">Photos</a></li>
<li><a href="#" data-filter=".videos">Videos</a></li>
<li><a href="#" data-filter=".sites">Sites</a></li>
</ul>
The corresponding image for the Photos menu item:
<li class="portfolio-item photos">
<a href="images/blankframe.png" class="popbox">
<img src="images/blankframe.png" alt="Portfolio Image"/>
</a>
</li>
Portfolio Container:
<ul id="portfolio-container">
<li class="portfolio-item photos">
<a href="images/blankframe.png" class="popbox">
<img src="images/blankframe.png" alt="Portfolio Image"/>
</a>
</li>
<li class="portfolio-item sites">
<a href="images/testImg1.png" class="popbox">
<img src="images/testImg1.png" alt="Portfolio Image"/>
</a>
</li>
<li class="portfolio-item sites videos"><a href="images/largeImg.png" class="popbox"><img
src="images/largeImg.png"
alt="Portfolio Image"/></a></li>
</ul>
The Contact section contains a map using Google Map’s API, a section for contact information and a form to email you feedback.
The plugin inserts the map by finding <div id="#gMap"></div>, and pulling the address from contact address section.
See also
<!-- Contact Map Address -->
<p>
<span>Joe Smith</span>
123 Main St. <br/>
New York, NY 10013
</p>
<!-- End Contact Map Address -->
To change the icons used for each section, change the Font Awesome class on the corresponding <i> element.
<div class="col-sm-5 col-md-offset-1 col-md-4 contact-info">
<h3>Contact Information</h3>
<div class="contact-address">
<i class="fa fa-user"></i>
<!-- Contact Map Address -->
<p>
<span>Joe Smith</span>
123 Main St. <br/>
New York, NY 10013
</p>
<!-- End Contact Map Address -->
</div>
<div class="contact-phone">
<i class="fa fa-phone"></i>
<p>
+1 555-555-5555
</p>
</div>
<div class="contact-email">
<i class="fa fa-envelope"></i>
<p>
joesmith@company.com
http://www.joesmith.com
</p>
</div>
</div>
The contact form uses a simple php script to send mail. In order for the contact form to get mail to you, please update the contact form config.php file.
Note
Error Messages are set within the postaction.php file.
<?php
//Email Config
define('to', 'youremail@domain.com');
define('from', 'fromemail@domain.com');
define('subject', 'Someone has contacted you.');
?>
1.1. Social Links Section¶
Remove / Update the social links using FontAwesome set class names.
Note
For more information on FontAwesome class names, please refer to FontAwesome CheatSheet.
Note
When changing social links in the header, the footer social links will update accordingly.