1. Start
  2. Navigation In Wetro
  3. Lazyloading
  4. Metro Slider
  5. Colorbox
  6. Portfolio
  7. Slider
  8. Contact Form
  9. Twitter Ticker
  10. Ajax Blog Posts
  11. Color Changes

Metro - Responsive One Page

HTML5 & CSS3


Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Lazyloading


Lazy loading is a jquery plugin.It is so much useful for one page websites.Unless you see a picture it does not load and makes your page load faster.As you scroll down the page you can see your images as gray, after a little time those images will load too.

If you want to use Lazyloading, just make sure it is ok with this format below.

<img data-original="photos/ps-1.jpg" src="images/misc/grey.gif" alt="" />

Instead of putting image url into src, you put it in data-original and make the src 'images/misc/grey.gif'.

Thats all with the Lazyloading.

Metro Slider


Metro Slider has some basic structure which you can easily modify.

Main container is wrapped by <div class="metro-slider">.

Slider is divided by rows, you can make that row as long as you want.However its recommended as in demo theme, 2 rows.

In rows, there are also columns.Columns are 2 types, full and half.Full is 660px wide and half is 327.5px wide.Height of these types are 210px by default.You can still change these from app.css and app.js files.

Lets get to some structure.

<div class="metro-item full">

	<a class="metro-image colorbox-gal" href="photos/slider-1.jpg" title="portfolio link"><img src="photos/metro-slider-1.png" alt="portfolio"></a>

	<div class="metro-description bgcolor-trans">
		<div class="metro-icon white-info deactive"></div>

		<div class="metro-misc">

			<div class="metro-date color-3">20 January 2013</div>
			<a class="metro-title color-2 colorbox-gal" href="photos/slider-1.jpg" title="portfolio details">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</a>
			<div class="metro-text color-2">Ut pellentesque rutrum fermentum. Sed sit amet libero a enim dapibus pharetra quis sit amet dui. Ut consequat condimentum nunc et dignissim. Duis iaculis iaculis justo, eget mollis ipsum fermentum eu. Donec posuere justo vel leo vehicula volutpat. Praesent leo urna, ultrices in rutrum consectetur, condimentum vel mauris. Fusce quam metus, consequat quis lacinia ut, posuere sit amet enim. Suspendisse dignissim iaculis tempus. Pellentesque pharetra faucibus neque, ac imperdiet mi vehicula vel. Suspendisse aliquam varius nibh, auctor iaculis velit fermentum ut. Sed sem quam, pulvinar ac fringilla sit amet, fringilla a mauris. Curabitur eu sapien eget erat tincidunt pharetra in et lorem. Suspendisse gravida laoreet tellus, non aliquet mi congue sit amet.</div>

			<div class="colorbox-images">
				<a class="colorbox-gal" href="photos/slider-a.jpg"></a>
				<a class="colorbox-gal" href="photos/slider-c.jpg"></a>
				<a class="colorbox-gal" href="photos/slider-b.jpg"></a>
			</div>

		</div>

	</div>

</div>

 

As you see at above, this is a full part which is 660px wide.This also contains colorbox images, those are not necessary, you can use this as links to other pages.We will get to colorbox later.

Colorbox


Colorbox is a jquery plugin for galleries.You give some values to set of a tags and bind them with colorbox then when you click one of those links, a popup with related images loads.

I'll show you how you can set up a colorbox gallery step by step.

First set a name for that gallery which contains those links with images.

$('.colorbox-gal').colorbox({rel:'gal'});

Links with class="colorbox-gal" attribute is a one gallery with name of colorbox-gal.

Javascript is done, next step is setting html tags and structure.

This code fires the colorbox javascript.You can see the class="metro-image colorbox-gal" in the a tag.Also you have to give a image link like href="photos/slider.jpg".The 'img' tag in this 'a' tag has nothing to do with colorbox.

<a class="metro-image colorbox-gal" href="photos/slider-1.jpg" title="portfolio link"><img src="photos/metro-slider-1.png" alt="portfolio"></a>

If other images should be hidden, I mean not like a gallery page and navigate through them.Hide other links and make sure they all have same 'class' attribute.

<div class="colorbox-images">
	<a class="colorbox-gal" href="photos/slider-a.jpg"></a>
	<a class="colorbox-gal" href="photos/slider-c.jpg"></a>
	<a class="colorbox-gal" href="photos/slider-b.jpg"></a>
</div>

 

You can create different galleries as many as you want, just make sure you follow these steps.

Portfolio


Portfolio items can be in 3 different type of animation.These animations are controlled by css.

Here is the three of them:

<div class="span3">
	<div class="portfolio-container">

		<a href="#" class="portfolio-item" data-portfolio-destination="1">
			<img data-original="photos/ps-1.jpg" src="images/misc/grey.gif" alt="" />
		</a>

		<h2 class="portfolio-little-title color-6">ALEX KONRAD</h2>
		<h1 class="portfolio-big-title color-6">BRAIN BREAK</h1>

		<a href="#" class="portfolio-link" data-portfolio-destination="1"></a>

		<div class="bottom-line bgcolor-trans"></div>

	</div>
</div>

 

<div class="span3">
	<div class="portfolio-container">
		<a href="#" class="portfolio-item" data-portfolio-destination="2">
			<img data-original="photos/ps-2.jpg" src="images/misc/grey.gif" alt="" />
		</a>

		<h2 class="portfolio-little-title color-6">ALEX KONRAD</h2>
		<h1 class="portfolio-big-title color-6">BRAIN BREAK</h1>
		<a href="#" class="portfolio-link white-one"></a>

		<a class="colored-background bgcolor" href="#" data-portfolio-destination="2"></a>
	</div>
</div>

 

<div class="span3">

	<div class="portfolio-container">
		<a href="#" class="portfolio-item" data-portfolio-destination="3">
			<img data-original="photos/ps-3.jpg" src="images/misc/grey.gif" alt="" class="no-opacity-portfolio-img" />
		</a>

		<div class="bottom-titles bgcolor-trans">

			<h2 class="portfolio-little-title color-6">ALEX KONRAD</h2>
			<h1 class="portfolio-big-title color-6">BRAIN BREAK</h1>

		</div>

</div>

 

There is the 3 types of portfolio item.They look same but there are some significant changes between them.

Apart from styles and structre, make sure you see data-portfolio-destination="3".All of these have this kind of tag.These items also have detail parts, those are hidden above items in code.And they bind eachother(portfolio item and details) by data-portfolio-destination="3" tag.

For example, When you click the item with data-portfolio-destination="3" tag it goes to this code block and works it:

<div class="row portfolio-detail" data-portfolio-detail="3">

	<div class="nine columns">

		<iframe src="http://player.vimeo.com/video/44583147?color=ec1c24" width="100%" height="400" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

	</div>

	<div class="three columns">

		<div class="title black-title">Project Title</div>

		<div class="text margin-tb-10">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt commodo consequat labore et dolore magna aliqua.
		</div>

		<div class="margin-tb-10 color text">Project Spefication</div>

		<ul class="list margin-tb-10">
			<li>WEB DESIGN</li>
			<li>WORDPRESS DEVELOPMENT</li>
			<li>USER EXPERIENCE</li>
		</ul>

		<div class="text font-15 margin-tb-20">Rating : <span class="color">★★★</span>☆☆</div>
		<div style="clear: both;"></div>
		<a href="#" title="Check Our Work" class="icon-with-small-text black-magnifier margin-tb-20">View Site</a>
		<a href="#" title="Share This" class="icon-with-small-text black-connection margin-tb-20">Share</a>

	</div>

</div><!-- Portfolio 3 Row Ends -->

 

You can see the data-portfolio-detail="3" tag in the code above.So, When you click an item it gets the number and matches with that.

Slider


We use foundations Orbit Slider as slider.

This is a easy to use slider with many feaures.Let me explain you the structure and options those you can use.

This code block is sliders options and where to bind it.The caption with id="featured" will be using these options for the slider.

$("#featured").orbit({
animation: "horizontal-push",   // fade, horizontal-slide, vertical-slide, horizontal-push
        animationSpeed: 800,            // how fast animtions are
        timer: true,                    // true or false to have the timer
        advanceSpeed: 4000,      // if timer is enabled, time between transitions
        pauseOnHover: false,      // if you hover pauses the slider
        startClockOnMouseOut: false,  // if clock should start on MouseOut
        startClockOnMouseOutAfter: 1000,// how long after MouseOut should the timer start again
        directionalNav: true,      // manual advancing directional navs
        captions: true,      // do you want captions?
        captionAnimation: "fade",  // fade, slideOpen, none
        captionAnimationSpeed: 800,  // if so how quickly should they animate in
        bullets: true,         // true or false to activate the bullet navigation
        bulletThumbs: false,     // thumbnails for the bullets
        bulletThumbLocation: "", // location from this file where thumbs will be
        afterSlideChange: function(){}  // empty function
    });

 

This is the HTML code structure for the slider. 

<div id="featured">
	<img data-original="photos/slider-1.jpg" src="images/misc/grey.gif" alt="HTML Captions" data-caption="#htmlCaption" />
	<img data-original="photos/slider-2.jpg" src="images/misc/grey.gif"  alt="Overflow: Hidden No More" />
	<img data-original="photos/slider-3.jpg" src="images/misc/grey.gif" alt="and more features" />
</div>

<span class="orbit-caption" id="htmlCaption">I'm A Badass Caption</span>

You just put the images in caption with id="featured".Because we created javascript for this caption.

Also, If you want to use caption on that image make sure you put a attribute as data-caption="#htmlCaption".This points the element with that id.There is a span caption with the pointed id.

Contact Form


Open mail.php and change these lines as you wish.

$fromMail = 'info@yourdomain.com';

$toMail = 'info@yourdomain.com';

Twitter Ticker


Testimonials

Testimonials and Twitter feed can be ticked every 5 seconds.

Testimonial's basic HTML structure should be like this:

<div class="testimonials margin-tb-20 tests">

	<div class="customer-image"><img data-original="photos/customer.png" src="images/misc/grey.gif" alt="customer" /></div>

	<div>
		<b>Erkan Giris :</b>  To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it ?<br>
		<span class="color">http://www.erkangiris.com</span>
	</div>

</div>

For testimonial ticker, each div has to have tests class binded itself.You can put as many as you want like this box and they tick.

 

Twitter

Twitter ticker has the same logic as Testimonials.For this, you have to give twits class to that div.

<div class="testimonials margin-tb-20 twits">

	<div>
		<b>Tolga Günel :</b> But I must explain to you how all this mistaken idea of denounci pleasure and praising pain was born <span class="color">http://t.co/smyruJbX</span>
	</div>

</div>

 

Ajax Blog Posts


As you know, our blog design is different than others.It has to work with ajax mainly.When you click a blog post it comes to the middle, replaces the current blog post.

In our theme, it pulls the page related to blog post link.

So, this is the link box:

<div class="random-blog-item">
	<img data-original="photos/random-blog-4.png" src="images/misc/grey.gif" alt="random blog post" class="random-blog-img">
	<a href="blog-page-1.html" title="random blog post" class="random-blog-title ajax-blog">Creativity</a>
	<div class="random-blog-descr">Lorem ipsum dolor sit amet, conse tetur adipisicing...</div>
	<div class="random-blog-item-bg bgcolor"></div>
</div>

If you look at the 'a' tag, there is 'href' attribute for which page do you want to pull.Those pages are located with index.html.To make it work with ajax you need to put 'class="ajax-blog"' into a tag.

Color Changes


Metro One page is coded for flexible color changing.You can change the colors from css file with easy steps.

However, You can also use our color changing tool to change main color of the site.

If you wonder where you can choose your color and watch it, please go to our demo page: http://metcreative.com/demo_viewer/index.php?theme=metroonepage

Open the left panel with X symbol on it and choose your color from that color picker.You will see some codes appear down there.Click on that box and copy that code.

Now go to css folder in your template.Locate colorChanges.css file and open it.Paste the code that you just copied.

 

Thats it.

 

Thank you for buying our item. Hope we give you a good experience with this theme.