1. Start
  2. How to change intro slider?
  3. How to change the logo?
  4. How to change menu?
  5. How to switch headers?
  6. How to add/manage portfolio?
  7. How to add/manage Grid/Masonry portfolio?
  8. How to add/manage galleries?
  9. How to use shortcodes?
  10. How to change the color scheme?
  11. How to setup contact form?
  12. How to setup twitter?
  13. How to setup flickr?
  14. Source files included
  15. Credits

Frame Responsive HTML5&CSS3 Website Template

Thanks for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to submit your request to my support forum. Also you can find a lot of useful information right there. Thanks so much!

How to change intro page?

Index.html that is locatd in the root folder of your frame theme is an actual intro page

If you want to edit how it looks like then open index.html and edit it. To change images go to the images folder and change the default images with yours

/dark/img/btn_darkskin.jpg for the dark skin

/light/img/btn_lightskin.jpg for the light skin

How to add/manage portfolio?

There are 4 portfolio pages come with this template:

Let's take a look at 1 Column Portfolio, please open portfolio1.html file and go to line 164:

<div data-category="portraits" class="portraits element row-fluid">
<div class="filter_img span6">
<img src="img/portfolio/portfolio1-1.jpg" alt="" width="558" height="363">
<div class="gallery_fadder"></div>
<a href="img/portfolio/portfolio1-1.jpg" class="prettyPhoto"></a><a href="portfolio_post.html" class="post_link"></a>
</div>
<div class="portfolio_dscr span6">
<h3><a href="portfolio_post.html">Awesome Theme!</a></h3>
<div class="portfolio_meta">
<span>25 April 2019</span>
<span><a href="#">John Doe</a></span>
<span>In <a href="#">Category</a></span>
<span>Tags: <a href="#">lorem</a>, <a href="#">ipsum</a>, <a href="#">dolor</a>, <a href="#">sit amet</a>, <a href="#">egestas</a></span>
</div>
<p>Vestibulum eget consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis at dapibus facilisis, lacinia sagittis purus. Ut euismod aliquet enim, nec semper mi posuere nec lors nam nunc est, faucibus iaculis varius vitae, placerat quis felis. Nunc elementum dolor quis aclorem arcuege. tristique viverra. Morbi nec suscipit lacust rhoncus in aliquet ornare vivamus. Vestibulum eget consequat viverra ipsum, sed placerat ligula aliquam eu. Nam sapien eros enatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet ante in massa dapibus blandit. Aliquam vestibulum pellentesque semper. Nullam vitae ligula at ipsum mollis auctor. Donec vulputate congue scelerisque. Donec purus orci, varius nec tincidunt eu, rutrum eu ligula. Etiam imperdiet condimentum tempus. Vivamus tincidunt sem et erat tristique porta. </p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae nulla stibulum justo sit amet pulvinar convallisist massa turpis egets sed facilisis magna eros, id dictum arcu. Curabitur suscipit hendrerit egets porttitor. Aliquam nusl ultricien ullamcorper erat eget tempor eget mauris vulputate diam quis. augue tincidunt rhoncus in aliquet ornare malesuada.
Vivamus tulvinar sapien id tellus sagittis posuere sed placerat ligula aliquam eu nam sapien eros enatis. In hac habitasse platea dictumst. Sed egestas suscipit adipiscing. Maecenas sed eros non libero tincidunt aliquet. Aliquam in risus elit, id eleifend tellus. Sed tempor pretium orci, vel lacinia felis placerat vitae. <a href="#" class="more-link">Read more...</a></p>
</div>
</div><!-- .element -->

How to add/manage Grid/Masonry portfolio?

For editing Grid portfolio you should simply open portfolio_grid.html

To edit the actual Grid items look in the code starting from the line 140

<div data-category="portraits" class="grid_gallery-item portraits element">
<div class="filter_img gallery_item">
<a href="portfolio_post_fw.html">
<img src="img/gallery/gallery_grid1-1.jpg" alt="" width="384" height="272">
<div class="gallery_fadder"></div>
<div class="ico_gallery"></div><!-- .ico_gallery -->
<div class="gallery_descr">
<h6 class="gallery_title">Fusce pellentesque laoreet</h6>
<p>Nam consectetur ullamcorper aliquam. Nullam ut augue porttitor, malesuada.</p>
</div>
</a>
</div>
</div><!-- .grid_gallery-item -->

Simply edit the code to change images and text description

Scroll down to the line 425 and you'll see the code that defines the restof the grid gallery images

{src : 'img/gallery/gallery_grid1-1.jpg', url : 'portfolio_post_fw.html', post_type : 'image', category: 'portraits', title : 'Fusce pellentesque laoreet', description: 'Nunc lobortis odio et mauris iaculis id sollicitudin eros imperdiet.'},

In the same way edit portfolio_masonry.html to change the exiwsting images with yours.

How to use shortcodes ?

In case you need to use one of the existing shortcodes on your page you should simply open shortcodes.html page and copy the existing shortcode

For example in shortcodes.html you want to copy diagram. In this case copy the code starting from line 1167-1220 and then past it in your page where you need and then edit it

<div class="row-fluid">
<div class="span12 module_cont module_normal_padding module_diagramm">
<div class="bg_title"><h3 class="headInModule">Diagram</h3></div>
<div class="shortcode_diagramm_shortcode diagramm">
<script type="text/javascript" src="js/waypoint.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (jQuery(window).width() > 760) {
jQuery('.skill_div').waypoint(function(){
set_width = jQuery(this).attr('data-percent');
jQuery(this).stop().animate({'width' : set_width + '%'},1000);
},{offset: 'bottom-in-view'});
} else {
jQuery('.skill_div').each(function(){
set_width = jQuery(this).attr('data-percent');
jQuery(this).stop().animate({'width' : set_width + '%'},1000);
});
}
});
</script>
<ul class="skills_list">
<li class="skill_li">
<div class="diagram_bar">
<h6 class="skill_name">Lorem ipsum</h6><h6 class="skill_percent">65%</h6>
<div class="clear"></div>
<div class="skill_div-wrapper"><div class="skill_div" data-percent="65"></div></div>
</div>
</li>
<li class="skill_li">
<div class="diagram_bar">
<h6 class="skill_name">Egestas mauris mas</h6><h6 class="skill_percent">100%</h6>
<div class="clear"></div>
<div class="skill_div-wrapper"><div class="skill_div" data-percent="100"></div></div>
</div>
</li>
<li class="skill_li">
<div class="diagram_bar">
<h6 class="skill_name">Cras vitae</h6><h6 class="skill_percent">28%</h6>
<div class="clear"></div>
<div class="skill_div-wrapper"><div class="skill_div" data-percent="28"></div></div>
</div>
</li>
<li class="skill_li">
<div class="diagram_bar">
<h6 class="skill_name">Pellentesque sodales</h6><h6 class="skill_percent">79%</h6>
<div class="clear"></div>
<div class="skill_div-wrapper"><div class="skill_div" data-percent="79"></div></div>
</div>
</li>
</ul>
<a id="anchor17"></a>
</div>
</div><!-- .module_cont -->
</div><!-- .row-fluid -->

Result

Simply change the number values with yours. That's it

How to change the color of the theme?

You can do that easily, in two ways:

Contact Form Setup

You can setup your contact form in 2 clicks, please open mail.php file and find "te

st@test.com" on line 8, simply replace to your the email address all the requests will be sent to. That's all ;)

How to setup twitter?

To show posts from your twitter account all you need is to insert your account details in html page line, simply replace default username with yours ;)

For example open about.html line 310 and edit this code

$(document).ready(function(){
$('.tweet_1057').tweet({
modpath: 'twitter/',
count: 3,
username : 'themedev'
});
});

After this go to folder twitter and open index.php file and insert your consumer keys and user token keys.

/ Your Twitter App Consumer Key
private $consumer_key = 'YOUR_CONSUMER_KEY';

// Your Twitter App Consumer Secret
private $consumer_secret = 'YOUR_CONSUMER_SECRET';

// Your Twitter App Access Token
private $user_token = 'YOUR_ACCESS_TOKEN';

// Your Twitter App Access Token Secret
private $user_secret = 'YOUR_ACCESS_TOKEN_SECRET';

Then save your changes and test it on your server.

Please note! In case you have inserted the twitter login then you should insert the rest of the twitter account details otherwise remove the twitter login from the script if you're not gonna use twitter feeds.

How to setup flickr?

To show posts from your flickr account you need is to insert your account details in index.html file line 897, simply replace default username with yours ;)

<script src="http://www.flickr.com/badge_code_v2.gne?count=6&display=latest&size=s&layout=x&source=user&user=92335820@N08"></script>

Source files included

Frame comes with 18 PSD and 64 HTML files (32 HTML files in each skin version). Some PSD files can include different pages inside, and can have hidden layers. Please note that the images are not included in the package.

All .js files are located in the /js/ folder.

Credits

I would like to say a big thnx to all the people who created an awesome stuff:

jQuery Carousel 0.9.8 by Thomas Lanciaux and Pierre Bertet
jQuery Easing v1.3 by George McGinley Smith. - http://gsgd.co.uk/sandbox/jquery/easing/
jQuery Form Plugin v2.05 - http://malsup.com/jquery/form/
Isotope v1.5.21 by David DeSandro / Metafizzy - http://metafizzy.co/#licenses
jQuery Nivo Slider v3.1 by Dev7studios - http://nivo.dev7studios.com
OneByOne Slider - http://codecanyon.net/user/sike
jQuery PrettyPhoto plugin by Stephane Caron - http://www.no-margin-for-errors.com
Tipsy tooltips for jQuery by Jason Frame - jason@onehackoranother.com
jquery.tweet.js by Todd Matthews & Steve Purcell - http://tweet.seaofclouds.com/
Superfish v1.4.8 - jQuery menu widget by Joel Birch - http://users.tpg.com.au/j_birch/plugins/superfish/