Theme Customization
In this section we will present you and explain how to customize Pocket, starting from choosing color style.
Choosing Color Style
As already noted, there are six color styles you can choose from: pink, blue, teal, red, green and gold.
So, the first thing to do when customizing this theme is choosing a color style. So, how to do that? All
css color styles are placed in css folder. You will need to put path to style you want to use in head section of all of your pages.
Current color style is pink. To change it, simply change the name of the style. For example, on blog page this is on line 16. You can see the
example on the following image.
If you don't need other color styles you can simply delete them from your css folder.
Top Bar Customization
In this section we will present you and explain how to customize top bar that is presented on the top of your pages.
The top bar which you can see on the top of your pages is wrapped in section with class "top-bar-wrapper". this section has full width.
Inside of it there is actually div named "top-bar" which contains it's content.
Inside of it there is "a" tag that presents the close button. To change this text simply change the text in "a" tag. If you'd like to change
the icon of that close button go to the css file of the style you are using, for example pink.css, to line 29. there you can change it's icon,
color of the text and the color of the text on hover. See image below.
Changing Logo
In this section we will present you and explain how to change the logo image.
Because of that Pocket comes with six color styles, in the img folder there are one folder named "colors". inside of it
you will find separate folder for every color. Inside this specific folder, logo image is placed. So to change the logo you'll have to make
some simple steps.
-
First of all, you need to change the image in the folder of the style you are using.
- If you didn't changed the name or folder in which you have placed your logo, you can skip this step. Otherwise, you need to
put the right path to your image in all your html files.
-
The width of the Pocket logo is 216px, so if your logo has different size, you'll need to make some changes in the main style.css file. Total
width of logo and main navigation must be 1005px. Logo has right margin of 30px. So if your logo is 200px wide, your navigation must be maximum
775px wide. You can find this styling in main css file style.css beginning from the line 285. See below image for more details.
Main Navigation
In this section we will explain how to make main navigation and responsive navigation.
Main navigation is placed inside a section called nav-container,
inside of a header. Main navigation HTML structure is
the same for all pages, except one little difference -
class named "active" which represents the current
active page.
Inside of the nav-container is "nav" tag that presents main
navigation and "select" with id "nav-responsive". The select is your
responsive navigation which is visible only on small device screens.
So when you insert your pages in the menu, you must
do the same in the „nav-responsive“ select tag. The HTML structure
of main navigation is shown below.
<!-- nav container start -->
<section id="nav-container">
<!-- main navigation start -->
<nav id="nav">
<ul>
<li>
<a href="index.html">
<i class="icon-nav icon-home"></i>
Home
</a>
<span>Welcome intro</span>
<ul>
<li><a href="home2.html">Home Page 2</a></li>
</ul>
</li>
<li>
<a href="about.html">
<i class="icon-nav icon-about"></i>
Pages
</a>
<span>Why choose us</span>
<ul>
<li><a href="about.html">About us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="pricing.html">Pricing tables</a></li>
<li><a href="faq.html">FAQ Page</a></li>
<li><a href="404.html">404 Page</a></li>
<li><a href="columns.html">Columns</a></li>
</ul>
</li>
<li>
<a href="portfolio.html">
<i class="icon-nav icon-portfolio"></i>
Portfolio
</a>
<span>Our amazing work</span>
<ul>
<li><a href="portfolio2.html">Portfolio 2 columns</a></li>
<li><a href="portfolio3.html">Portfolio 3 columns</a></li>
<li><a href="portfolio4.html">Portfolio 4 columns</a></li>
<li><a href="portfolio-single.html">Portfolio single</a></li>
</ul>
</li>
<li class="active">
<a href="blog.html" class="active">
<i class="icon-nav icon-blog"></i>
Blog
</a>
<span>Our thoughts</span>
<ul>
<li><a href="blog.html">Blog sidebar right</a></li>
<li><a href="blog-left.html">Blog sidebar left</a></li>
<li><a href="blog-single.html">Blog single</a></li>
</ul>
</li>
<li>
<a href="contact.html">
<i class="icon-nav icon-contact"></i>
Contact
</a>
<span>Get in touch</span>
</li>
</ul>
</nav><!-- main navigation end -->
<!-- responsive navigation start -->
<select id="nav-responsive">
<option selected="" value="">Site Navigation...</option>
<option value="">Home</option>
<option value="index.html">- Home default</option>
<option value="home2.html">- Home page 2</option>
<option value="">About</option>
<option value="about.html">- About us</option>
<option value="services.html">- Services</option>
<option value="pricing.html">- Pricing tables</option>
<option value="faq.html">- FAQ Page</option>
<option value="404.html">- 404 Page</option>
<option value="columns.html">- Columns</option>
<option value="">Portfolio</option>
<option value="portfolio2.html">- Portfolio 2 col</option>
<option value="portfolio3.html">- Portfolio 3 col</option>
<option value="portfolio4.html">- Portfolio 4 col</option>
<option value="portfolio-single.html">- Portfolio single</option>
<option value="">Blog</option>
<option value="blog.html">- Blog sidebar right</option>
<option value="blog-left.html">- Blog sidebar left</option>
<option value="blog-single.html">- Blog single</option>
<option value="">Contact</option>
<option value="contact.html">- Contact page</option>
</select> <!-- responsive navigation end -->
</section><!-- nav container end -->
As you can see on the preview and here in the code,
first level menu item has an icon attached. The menu icon
is placed in css file "color-style".css. To change the icon,
first make a change in the image folder (the folder of color style you are
using). After that simply make changes in your css files.
To add second level sub menu, you will have to insert
new unordered list inside of a list item that should
have sub menu. you can see the example in the code presented above.
Main Navigation is fully based on CSS and uses jQuery
only for sliding animation, which means that the menu
will work perfectly even if a user has Javascript
turned off. Function for animation of the menu is
placed in include.js file in "js" folder. To use menu
on all of your pages you must call this Javascript
file in the
tag of your HTML files.
You don't need do change anything in this file.
You can see code of the function below:
/* ================ MAIN NAVIGATION ================ */
function piMainmenu(){
$(" #nav ul ").css({
display: "none"
}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({
visibility: "visible",
display: "none"
}).slideDown(250);
},function(){
$(this).find('ul:first').css({
visibility: "hidden"
});
});
}
function piSelectMenu(){
$('#nav-responsive').on('change', function() {
window.location = $(this).val();
});
}
Responsive Navigation
Responsive navigation should always be present in
all of your pages below main navigation (nav section).
It's display property is set to none on standard
screen resolutions. When resolution changes it
becomes visible, and main navigation becomes invisible.
Responsive navigation is in short terms "select menu",
where every option is one link to HTML page.
All you have to do is to make the same structure
as the main nav, except you'll be putting link to your
page inside the <option> tags. You can see an example in code
above that presents HTML structure of the main navigation.
Home Pages Customization
In this section we will explain how to customize home pages, starting from customizing the slider.
Customizing the slider
As noted before, this theme is using "Anything slider".
If you'd like you can read more about it
here.
This slider has a lot of features. It's structure is shown below.
<!-- slider start -->
<article id="anything-slider">
<section id="slider-container">
<ul id="slides">
<li class="panel1">
<section class="slide-elements">
<div class="slide-img-container no-shadow right">
<img src="img/slider/imac.png" alt="imac" class="imac">
<img src="img/slider/ipad.png" alt="ipad" class="ipad">
<img src="img/slider/iphone.png" alt="iphone" class="iphone">
</div>
<div class="title">
<h1>The Great <span class="in-color">Fullwidth Slider</span></h1>
<h2>Cool & Clear Presentation</h2>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras ut venenatis massa. Nam a neque et nisi eleifend interdum ac
sed leo. Ut vitae lacus risus. Quisque varius fermentum
neque</p>
<div class="buttons">
<div class="btn">
<a href="#">Buy now!</a>
</div>
<span>(or)</span>
<div class="btn-black">
<a href="#">Contact us!</a>
</div>
</div>
</section>
</li>
<li class="panel2">
<section class="slide-elements">
<div class="slide-img-container right border">
<img src="img/slider/slide-2.jpg" alt="Slider Image 2">
<div class="slider-img-shadow"></div>
</div>
<div class="title">
<h1><span class="in-color">Lorem Ipsum</span> dolor sit amet</h1>
<h2>Cool & Clear Presentation</h2>
</div>
<p>Lorem ipsum dolor slo onsec tueraliquet Morbi nec In
Curabitur lreaoreet nisl lorem in pellente pellente eget.
Lorem ipsum dolor slo onsec Vivamus.</p>
<div class="buttons">
<div class="btn">
<a href="#">Buy now!</a>
</div>
</div>
</section>
</li>
<li class="panel3">
<section class="slide-elements">
<div class="slide-img-container left border">
<img src="img/slider/slide-2.jpg" alt="Slider Image 2">
<div class="slider-img-shadow"></div>
</div>
<div class="blockquote">
<blockquote>Life is conversational. Web design
should be the same way. On the web, you’re
talking to someone you’ve probably never met –
so it’s important to be clear and precise. Thus,
well structured navigation and content organization goes
hand in hand with having a good conversation.</blockquote>
<p>
- <a href='http://quotesondesign.com/chikezie-ejiasi/'>
Chikezie Ejiasi</a>
</p>
</div>
</section>
</li>
</ul>
</section>
</article><!-- slider end -->
If you want to add new image within the slider you
should create new list item element "li" in the
unordered list tag "ul". Best way to do this is to
copy existing list item element and change it in the
way you want. All content you want to show in slide
of the slider should be placed in div with class
"slide-elements". In that way slider will recognize
all elements. Image should be placed in the div with
class "slide-img-container". You are free to add any
tag you want with any content you want and it will be
animated by the slider.
As you can see on the preview, image can be floated
left or right. If you want your image to be placed right,
simply add additional class "right". If you want for your image to be
placed left, add additional class "left". Also there
is a possibility that image have white border. To accomplish that
add class border. Image shadow will be added automatically,
so if you do not want shadow on your images, simply
add class "no-shadow".
Slider animation
Anything slider has few options for animating slider.
These options are very simple and you can see how it
look in the code below.
$('#slides') // Using FX base effects
.anythingSlider({
resizeContents : true,
expand : true,
buildArrows : true,
buildNavigation : false,
buildStartStop : false,
autoPlay : false,
delay: 5000
})
.anythingSliderFx({
inFx: {
'.panel1 .slide-img-container' : { left: 0, opacity: 1, duration: 400,
easing: 'easeOutCirc' },
'.panel1 .title' : { right: 0, opacity: 1, duration: 400,
easing: 'easeOutCirc' },
'.panel1 p' : { right: 0, opacity: 1, duration: 400,
easing: 'easeOutCirc' },
'.panel1 .buttons' : { right: 0, opacity: 1, duration: 400,
easing: 'easeOutCirc' },
'.panel2 .slide-img-container' : { top: 0, opacity: 1, duration: 400,
easing: 'easeOutCirc' },
'.panel2 .title' : { top: 0, opacity: 1, duration: 400,
easing: 'easeOutCirc' },
'.panel2 .buttons' : { top: 0, opacity: 1, duration: 400,
easing: 'easeOutCirc' },
'.panel2 p' : { top: 0, opacity: 1, duration: 400,
easing: 'easeOutCirc' },
'.panel3 blockquote' : { top: 0, opacity: 1, duration: 400,
easing: 'easeOutCirc' },
'.panel3 p' : { top: 0, opacity: 1, duration: 400,
easing: 'easeOutCirc' }
},
outFx: {
'.panel1 .slide-img-container' : { left: -400, opacity: 0, duration: 200,
easing: 'easeOutCirc' },
'.panel1 .title' : { right: -400, opacity: 0, duration: 200,
easing: 'easeOutCirc' },
'.panel1 p' : { right: -400, opacity: 0, duration: 200,
easing: 'easeOutCirc' },
'.panel1 .buttons' : { right: -400, opacity: 0, duration: 200,
easing: 'easeOutCirc' },
'.panel2 .slide-img-container' : { top: 0, opacity: 0, duration: 200,
easing: 'easeOutCirc' },
'.panel2 .title' : { top: -400, opacity: 0, duration: 200,
easing: 'easeOutCirc' },
'.panel2 .buttons' : { top: -400, opacity: 0, duration: 200,
easing: 'easeOutCirc' },
'.panel2 p' : { top: -400, opacity: 0, duration: 200,
easing: 'easeOutCirc' },
'.panel3 blockquote' : { top: -400, opacity: 0, duration: 200,
easing: 'easeOutCirc' },
'.panel3 p' : { top: -400, opacity: 0, duration: 200,
easing: 'easeOutCirc' }
}
});
Desired animation are defined in the initialization
code of the Anything slider. That code is show above.
Animation for one element has four options. You can
see that if we want to animate image in the slider
we will first write it's class, after that colon and
that desired options. These are called based FX definitions:
'.selector' : [ 'effect(s)', 'size', 'time', 'easing' ]
'size', 'time' and 'easing' are optional parameters, but must be kept in order if added.
If you want to animate image you should first write
desired effect which can be found in
Official slider website.
Effect used in Pocket are "top" and "right".
That means that some of elements will fly in from top or right side.
Second parameter is size which defines where element should be placed before it fly in.
Third parameter defines animation duration.
Fourth parameter defines "easing" animation.
You can find all possible animation in the Official
easing plugin website.
Slider has some predefined option which can be change
if that's needed. At the end of index page you can
find these options. These options are not recommended
to change except autoplay which are used to start
automatic animation of slides and delay which can be
changed if we want to increase or decrease time of
visibility of each slide.
Important
For slider to work you must include following files on your home page:
JavaScript files
- jquery-1.7.2.js
- jquery.anythingslider.fx.min.js
- jquery.anythingslider.min.js
CSS files:
- basic.css - must be included in all of your pages
- style.css - must be included in all of your pages
- "color-style".css - color style that you are using
- anythingslider.css - style for Anything slider
Also don't forget to call the slider and it's animations
at the bottom of the body on your home page, as shown in the code above.
Now we'll proceed with explaining how to customize Home page version 1,
in your files that is index.html file. You can open it for more easy understanding.
content wrappers
So what do we have on this page? We have three separated content wrappers. First one,
has border and is short, so we will have short shadow on it. Second one has no border
nor shadow, and third has no border, but has shadow. So how to accomplish this?
As noted before, first content wrapper will have classes "content-wrapper", "multiple"
and "short-shadow". This will give him top border, short shadow and bottom margin.
Second content wrapper will have classes "content-wrapper", "no-border", "no-shadow" and multiple.
This will remove the top colored border and add light grey border of one px, and remove
the shadow. Also this will add bottom margin to it.
Third content wrapper doesn't have border on the top, but has normal shadow and it is last on the page
so it is attached to the footer. He will have class "content-wrapper" and "no-border". He will also have normal long shadow, which is not so
visible because the content is very short, but will be visible on other pages.
You can use any of this content wrappers you want. This is just for showcasing all the possibilities.
Entry note
So, the first thing in the contact wrapper is the entry note. It is really easy to customize. here is it's structure.
<article class="grid_12 entry-note">
<h1>Subscribe to <span class="text-color">Newsletter </span>for Free</h1>
<p>
Lorem ipsum dolor slo Vivamus, please contact us for
everything you need.
</p>
<div class="btn">
<a href="#">Sign Up</a>
</div>
</article>
Entry note has that colored icon on the top which is added through css. If you want to remove it
simply go to your color-style.css file and edit it there. To change the text of the note simply
change the text inside "h1" tag - this is title, and text inside "p" tags - this is subtitle.
As you can see in the "h1" tag there is a span with class "text-color". It will color the text
in the color of the style you are using. This note can have a button or do not. So if you do not want button, simply
remove this div with class "btn". To change the text of the button, edit text in the "a" tag.
CSS styling for the entry note is placed in two css files - color-style.css (color that you are using), under line
114, and main css file "style.css" under line 684. if you want to change it's styling you can do it there.
DIVIDER
After the note there is a divider, which is used on several pages. To add a divider,
you must assign the class of the column you want to use it in and class "divider". On home page example
it has class "grid_12" which means it will be full width.
SERVICES
There are two styles for services you can use. One is presented on the home page version 1 and we'll explain
now how to edit that. The second is presented in the home page 2, and we'll talk about it later.
Services are wrapped in "ul". Every "li" presents one service item. It must have class of the column
you are putting it into and class "service". Below is the code for one service item.
<li class="grid_4 service">
<a class="icon service-1">service</a>
<h4>Responsive Theme</h4>
<p>
Lorem ipsum dolor slo onsec tueraliquet Morbi nec In
Curabitur lreaoreet nisl lorem in pellente pellente eget.
Lorem ipsum dolor slo onsec Vivamus. Curabitur
</p>
</li>
The first "a" tag is used for service icon. As you can see it has class "icon",
which defines icon position and size for all services items, and class "service-1",
which is used for styling that specific icon. You can find these icons in main css file
style.css under line 1472. You can change these icon there, but you will also need to make
change in the img folder (there you need to replace those icons if you want).
To edit the heading of the service or it's text, simply replace the texts inside h4 and p tags.
team article
As you can see on teh index.html preview, there is an article containing team members description.
At the top of it there is a title that has border and some link aside. How to accomplish that? here is the HTML structure.
<!-- divider with title start -->
<section class="divider-with-title clearfix">
<div class="title">
<h4>Our Great Team</h4>
</div>
<a href="about.html" class="title-link">Read more</a>
</section><!-- divider with title end -->
So to use that kind of title simply use the HTML structure presented above.
You can edit the title text inside "h4" tags. Also, if you don't want the link
you can simply remove it.
After the title there is one fourth columns containing team members description.
To make this, create a div or section or article with following classes: grid_3 (for one-fourth column),
team and home. Note that this grid_3 is placed in a larger div with class grid_9, so it will also have
class "alpha" (the first nested child). Last team member div will have class "omega" (last nested child).
So, here is the HTML structure of that memebr article.
<article class="grid_3 alpha team home">
<img src="img/about/home-team-1.jpg" alt="team" />
<h6>Markus Smith</h6>
<p class="position">Creative Designer and CEO</p>
<div class="team-description">
<p>
Fugiat dapibus, tellus ac cursus commodo, mauesris
condime ntum nibut fermentum mas justo sitters.
</p>
</div>
</article>
Images fo team members are placed in about folder, inside img folder, so you can edit it there.
In the code above you can see how to simply change the text of this article. CSS styling for team members is placed in main
css file style.css under line 713.
SMALL ACCORDION
As you can see on the preview there is small accordion with title why choose us. To use accordion you need to
use following HTML structure.
<section class="accordion">
<div class="accordion-content-wrapp">
<div class="title active"><a href="#">Our Support Staff</a></div>
<div class="content">
<p>
Lorem ipsum dolor slo onsec tueraliquet
Morbi nec In Curabitur lreaoreet nisl lorem
in pellente pellente eget. Lorem ipsum
</p>
</div>
</div>
<div class="accordion-content-wrapp">
<div class="title"><a href="#">Responsive Theme</a></div>
<div class="content">
<p>
Lorem ipsum dolor slo onsec tueraliquet
Morbi nec In Curabitur lreaoreet nisl lorem
in pellente pellente eget. Lorem ipsum
</p>
</div>
</div>
<div class="accordion-content-wrapp">
<div class="title"><a href="#">Worldwide Support</a></div>
<div class="content">
<p>
Lorem ipsum dolor slo onsec tueraliquet
Morbi nec In Curabitur lreaoreet nisl lorem
in pellente pellente eget. Lorem ipsum
</p>
</div>
</div>
</section><!-- accordion end -->
You can edit these titles in any way you want, same as the content text. note that
first accordion title has class "active". This means that this content will be opened
when the page is loaded. You can put this class on second or third title too. CSS for styling
accordion content is placed inside "basic.css" file. Icons for accordion are placed in folder that matches the
color style you are using. According to that it's css styling is placed in "color-style".css that you are using.
You can edit everything there.
PRODUCT CAROUSEL
At the bottom there is product carousel that has slider for every product inside of it.
Product carousel is accomplished with jcarouFredsel plugin. To make this kind of carousel
it is important to use following HTML structure:
<div class="grid_12 jcarousellite product-carousel clearfix">
<!-- divider with title start -->
<section class="divider-with-title carousel clearfix">
<div class="title">
<h4>Our Products</h4>
</div>
<ul class="carousel-nav">
<li>
<a class="carousel-nav-1 prev" href="#"></a>
</li>
<li>
<a class="carousel-nav-1 next" href="#"></a>
</li>
</ul>
</section><!-- divider with title end -->
<ul id="carousel-1" class="carousel-li">
<li>
<div class="product-slider-wrap">
<div id="slider-1" class="nivoSlider product-slider">
<img src="img/home-products/slider-1.jpg" alt="blog" />
<img src="img/home-products/slider-2.jpg" alt="blog" />
<img src="img/home-products/slider-3.jpg" alt="blog" />
</div>
<div class="slider-shadow"></div>
</div>
<div class="product-description">
<h5>Fancy product with slider</h5>
<span class="product-date">
Date: June 28, 2012
</span>
<p>
Lorem ipsum dolor slo onsec tueraliquet
Morbi nec In Curabitur lreaoreet nisl lorem.
Directed Smile Lorem ipsum dolor slo onsec
tueraliquet Morbi nec In Curabitur lreaoreet nisl lorem.
</p>
<p>
Directed Smile Lorem ipsum dolor slo onsec
tueraliquet Morbi nec In CurabiturLorem
ipsum dolor slo onsec tueraliquet Morbi
nec In Curabitur lreaoreet nisl lorem.
Directed Smile Lorem ipsum dolor slo onsec
tueraliquet Morbi nec In Curabitur lreaoreet
nisl lorem.
</p>
</div>
</li>
....
</ul>
</div>
title of the carousel can be changed inside "h4" tags. the images
used for products are placed in "home-products" folder inside img folder.
So when replacing your images, first do it there. Note that the images should have
the same width and height, because then you won't have to edit anything in the css files.
You can see that every product (list item) has slider inside of it. FOr that purpose NivoSlider plugin
is used.
CSS styling for product carousel and Nivo Slider inside of it is placed
in main css file style.css under line 722, so if you need to change anything that's the place to do that.
important
You must include these .js and css files for product carousel to work:
- jquery.carouFredSel-6.0.0-packed.js
- jquery.nivo.slider.js
- jquery-1.7.2.js
- nivo-slider
You will also need to include the call for the carousel on the bottom of
the body on your page. here is the code.
$('#carousel-1').carouFredSel({
items: 1,
prev: '.carousel-nav-1.prev',
next: '.carousel-nav-1.next',
auto: false,
scroll: 1
});
CLIENT CAROUSEL
There is one more carousel presented on the home page,
and that is client carousel. It's HTML structure is presented below.
<div class="container_12 client-carousel clearfix">
<ul id="carousel-2" class="grid_12 carousel-li">
<li>
<div class="client-1">
<img src="img/about/client-1.png" alt="client" />
</div>
<div class="client-1-hover">
<img src="img/about/client-1-hover.png" alt="client" />
</div>
</li>
<li>
<div class="client-2">
<img src="img/about/client-2.png" alt="client" />
</div>
<div class="client-2-hover">
<img src="img/about/client-2-hover.png" alt="client" />
</div>
</li>
<li>
<div class="client-3">
<img src="img/about/client-3.png" alt="client" />
</div>
<div class="client-3-hover">
<img src="img/about/client-3-hover.png" alt="client" />
</div>
</li>
<li>
<div class="client-4">
<img src="img/about/client-4.png" alt="client" />
</div>
<div class="client-4-hover">
<img src="img/about/client-4-hover.png" alt="client" />
</div>
</li>
<li>
<div class="client-5">
<img src="img/about/client-5.png" alt="client" />
</div>
<div class="client-5-hover">
<img src="img/about/client-5-hover.png" alt="client" />
</div>
</li>
</ul>
<a class="carousel-nav-2 prev" href="#"></a>
<a class="carousel-nav-2 next" href="#"></a>
</div>
Because there is animation from turning grey image to colored,
you'll need to include two images. First one is grayscale and second one (placed in div client-number-hover)
is actually colored image. You can change these images inside about folder in "img" folder. You should kept
the names the same, so you won't need to edit it in the css files.
For this carousel to work you will also need to include the call for it in the bottom of the body of your document, like this:
$('#carousel-2').carouFredSel({
items: 4,
prev: '.carousel-nav-2.prev',
next: '.carousel-nav-2.next',
auto: false,
scroll: 1
});
customizing home page second version
So now we'll see how to customize second version of the home page. This file is named "home2.html". You can also open this file
for more easy understanding.
At the top of the page there is Anything slider and note, which was already explained, so there's no need to do that. So we'll start with
second option for presenting services.
home page 2 services
Every service is placed in a grid with class "service-home". You can see that every service icon has animation when hovered.
Colored circle appears. Because of that every service icon has small colored circle they are placed in folder that matches the color style used in the img folder. So if you want
to change the icons for these services, first replace those images inside.
So how to create these services? Here is the HTML structure you should use.
<li class="grid_3 service-home">
<div class="icon-container">
<div class="service-mask"></div>
<a class="icon service-1">service</a>
</div>
<a href="services.html"><h4>Responsive Theme</h4></a>
<p>
Lorem ipsum dolor slo onsec tueraliquet Morbi nec In
Curabitur lreaoreet nisl lorem in pellente pellente eget.
</p>
<a href="services.html" class="read-more">Read more</a>
</li>
As you can see every service is one list item. It contains
div that holds the icon named "icon-container". inside of it there is a div with class
"service-mask". This is that colored circle that appears on hover.
Logic for the service icon is the same as for the previously explained services on home page 1.
To replace the heading or the text of these services, simply change it in the "h4" and "p" tag respectively.
If you'd like to edit icons for these services, you can do that in the "color-style".css file that matches the
color style you are using (this is for icons). Size and all other properties can be changed in main css
file style.css beginning at line 811.
carousel note
The second thing we have here is carousel note. To make a carousel note you
need to make the following HTML structure.
<div class="grid_12 jcarousellite carousel-note">
<div class="carousel">
<ul class="carousel-nav">
<li>
<a class="carousel-1-nav prev" href="#"></a>
</li>
<li>
<a class="carousel-1-nav next" href="#"></a>
</li>
</ul>
</div>
<ul id="carousel-1" class="carousel-li">
<li>
<div class="note-text">
<div class="note-title">
<h4>Welcome! We are Pocket. <span
class="text-color">You can follows us clicking
the button.</span></h4>
</div>
<p>
Lorem ipsum dolor slo Vivamus, curabus iretundus als,
please contact us for everything you need.
</p>
</div>
<div class="btn">
<a href="about.html">Read more</a>
</div>
<div class="clearfix"></div>
</li>
<li>
<div class="note-text">
<div class="note-title">
<h4>This is a very cool note! <span
class="text-color">You can define auto sliding
too.</span></h4>
</div>
<p>
Lorem ipsum dolor slo Vivamus, curabus iretundus als,
lorem lpsum dolor sit amet consequista.
</p>
</div>
<div class="btn">
<a href="about.html">Read more</a>
</div>
<div class="clearfix"></div>
</li>
<li>
<div class="note-text">
<div class="note-title">
<h4>Excelent place to present your thoughts! <
span class="text-color">Or maybe some very important
notes.</span></h4>
</div>
<p>
Lorem ipsum dolor slo Vivamus, curabus iretundus als,
lorem lpsum dolor sit amet consequista.
</p>
</div>
<div class="btn">
<a href="about.html">Read more</a>
</div>
<div class="clearfix"></div>
</li>
</ul>
</div>
As you can see every note that will be displaying is placed
in a list item. Every list item has div with class "note-text"
and button. You can put as many notes as you want.
You can change the note text inside p tags. The same is for the title.
You can edit it inside "h4" tags. This carousel is also made with
jcarouFredsel plugin, so you'll need to include it in your pages.
Also do not forget to include the call for this plugin at the bottom
of the body of your document. Here is the code for calling note carousel.
$('#carousel-2').carouFredSel({
items: 1,
prev: '.carousel-2-nav.prev',
next: '.carousel-2-nav.next',
auto: false,
scroll: 1
});
If you like you can also include auto scrolling. This can be accomplished by inserting
true to this label "auto". See code above. If yu would like to change this
carousel it can be done in the main css file style.css beginning at line 990.
The style for this carousel is made for full width column. So if you'd like to use it in another column
you will just have to change the width of carousel-li item of that specific carousel.
Portfolio section
After the note we have latest portfolio section. The latest portfolio
items are placed in a grid_8 (this is three-fourth column). So, one
portfolio item is placed in one-third column. Because of that every portfolio item is
placed in a parent div grid_8, first will have class "alpha", and the last will have class "omega".
To make this simply use following HTML structure. You can also put this portfolio
items in one-fourth, one-third or one-half columns.
<article class="grid_4 alpha">
<figure class="portfolio">
<div class="img-hover">
<a class="portfolio-image" href="portfolio3.html">
<img src="img/portfolio/3col/portfolio1.jpg" alt="portfolio" width="300"/>
</a>
<div class="mask">
<a class="thumb info"
title=""
href="img/portfolio/3col/portfolio1.jpg"
data-gal="prettyPhoto[pp_gallery]">
</a>
</div>
</div>
<figcaption>
<div class="caption-title">
<p class="title">
Simply Amazing
</p>
<p class="subtitle">
Photography
</p>
</div>
</figcaption>
</figure>
</article>
So as you can see, portfolio item is placed in a figure with class "portfolio".
Do not forget to use this class when creating portfolio item. inside of it there is a div with class
"img-hover". this div contains portfolio image (placed in a tag with class "portfolio-image") and div mask.
Div with class mask is used for displaying animation on hover. As you can see in the code above we have class
"thumb-info". This class has small magnifier icon as background. When you click on that icon,
lightbox with bigger image will be displayed.
So how to use all of these informations? Well, first to make the portfolio
look like in the preview, you will have to follow some simple steps.
- Make HTML structure as shown above
- Replace the images inside img/portfolio/column_you_are_using folder.
- You can also make another folder that will contain full size images (that will be displayed in a lightbox).
- When you replaced your images go to this HTML structure and replace the paths to your images
- For image that will be displayed change the path inside a tag with class "portfolio-image"
- For image that will be displayed in a lightbox change the path inside "href" tag (inside div with class "mask").
So, images are now ready. now you can replace the title of the portfolio item, inside p tag with class "title".
The same way you can change subtitle, by editing the text inside p tag with class "subtitle".
important
You must include these files for portfolio:
- portfolio.js
- include.js
- jquery-1.7.2.js
- jquery.prettyPhoto.js
- prettyPhoto
testimonial scroll
After the portfolio there is testimonial scroll. You can display
any number of testimonials you want. The important thing is that you should use following HTML structure.
<article class="grid_4 jcarousellite testimonial-carousel clearfix">
<section class="divider-with-title carousel clearfix">
<div class="title">
<h4>Testimonials</h4>
</div>
<ul class="carousel-nav">
<li>
<a class="carousel-2-nav prev" href="#"></a>
</li>
<li>
<a class="carousel-2-nav next" href="#"></a>
</li>
</ul>
</section><!-- divider with title end -->
<ul id="carousel-2" class="carousel-li">
<li>
<div class="testimonial-text-container">
<p>
Lorem lipsum, condimentum ultrices consequat
vidis vehicula mauris lipsum adipiscing eneane.
Lorem lipsum, condimentum ultrices consequat
vidis vehicula mauris lipsum adipiscing eneane.
Lorem lipsum, condimentum ultrices consequat
vidis vehicula mauris lipsum adipiscing eneane.
</p>
</div>
<a href="#" class="testimonial-author">Jane Doe,
<span class="text-color">Company CEO</span></a>
</li>
<li>
<div class="testimonial-text-container">
<p>
Lorem lipsum, condimentum ultrices consequat
vidis vehicula mauris lipsum adipiscing eneane.
Lorem lipsum, condimentum ultrices consequat
vidis vehicula mauris lipsum adipiscing eneane.
</p>
</div>
<a href="#" class="testimonial-author">Elton Doe,
<span class="text-color">Company CEO</span></a>
</li>
<li>
<div class="testimonial-text-container">
<p>
Lorem lipsum, condimentum ultrices consequat
vidis vehicula mauris lipsum adipiscing eneane.
Lorem lipsum, condimentum ultrices consequat
vidis vehicula mauris lipsum adipiscing eneane.
Lorem lipsum, condimentum ultrices consequat.
</p>
</div>
<a href="#" class="testimonial-author">Elton Doe,
<span class="text-color">Company CEO</span></a>
</li>
</ul>
</article>
For testimonial scroll is also used jcarouFredsel plugin, so it functions pretty similar
to other carousels already explained.
As you can see, every testimonial is one list item that has div with text. Here you can insert the text of your testimonial.
The second div is a tag with class "testimonial-author". here you can insert the author of that testimonial.
important
Do not forget to include jcarouFredsel.js file in the ehad of
your document. Also don't forget to include the call for the plugin at the bottom
of the body of your page. that code is presented bellow. You can simply copy it.
$('#carousel-2').carouFredSel({
items: 1,
prev: '.carousel-2-nav.prev',
next: '.carousel-2-nav.next',
auto: false,
scroll: 1
});
You can edit the styling of the testimonial scroll inside the main css file stylle.css
starting at line 882. The color style of the testimonial is placed in the "color-style".css you are using.
About Page Customization
In this section we will explain how to customize the About page.
Every page, except of the home pages has "page title2 at the top. This
title is placed immediately after the header-wrapper. You can see it's HTML structure below.
<section class="page-title">
<div class="title">
<h1>About Us</h1>
<span class="subtitle">
We love What We Do
</span>
</div>
</section>
Section "page-title" has full width. insie of it is div with class "title" and it has the same
width as the content-wrapper, that is 1005px. You can edit the title inside "h1" tags. Subtitle can be edited inside
span with class "subtitle". The subtitle color will be the same as the color style you are using. You can change it's color
in "color-style".css file. The size, width and all other properties of a page title can be edited
in main css file, style.css beginning at the line 595.
article and slider
As you can see in the demo, there is an article and a slider at the top of the content.
here is the HTML structure.
<section class="grid_12 section-title">
<h3>Something About Us</h3>
</section>
<article class="grid_8">
<p>
Fugiat dapibus, tellus ac cursus commodo, mauesris con,
ntum nibh, ut fermentum mas justo sitters amet risus.
Cras mattis cosi sectetut amet fermens etrsaters dimets.
Fugiat dapibus, tellus ac cursus commodo, mauesris con,
ntum nibh, ut fermentum mas justo sitters amet risus.
Cras mattis cosi sectetut amet fermens etrsaters dimets.
Fugiat dapibus, tellus ac cursus commodo, mauesris con,
ntum nibh, ut fermentum mas justo sitters amet risus.
Cras mattis cosi sectetut amet fermens etrsaters dimets.
</p>
<p>
Fugiat dapibus, tellus ac cursus commodo, mauesris con,
ntum nibh, ut fermentum mas justo sitters amet risus.
Cras mattis cosi sectetut amet fermens etrsaters dimets.
</p>
<ul class="check-list">
<li>Fugiat dapibus, tellus ac cursus commodo, mauesris
con,ntum nibh, ut fermentum .</li>
<li>Cras mattis cosi sectetut amet fermens etrsaters
dimets. Fugiat dapibus</li>
<li>Fugiat dapibus, tellus ac cursus commodo, mauesris
con,ntum nibh, ut fermentum .</li>
<li>Cras mattis cosi sectetut amet fermens etrsaters
dimets. Fugiat dapibus</li>
</ul>
</article>
<article class="grid_4 one-third-slider">
<div id="slider-1" class="nivoSlider">
<img src="img/about/slider1.jpg" alt="about" />
<img src="img/about/slider2.jpg" alt="about" />
<img src="img/about/slider3.jpg" alt="about" />
</div>
<div class="one-third-slider-shadow"></div>
</article>
At the top of the article there is a section with class "section-title".
Section title is used for styling headings that has three line border. You can use this section title
on any page you want and in any column you want.
You can edit the text inside the article simply by replacing it inside "p" tags. After the text there is a list with
colored check-marks. To make that kind of list, simply create an unoredered list with class "check-list".
On the right side of the article there is a slider. You can see the code above. This slider is made with Nivo Slider plugin,
so you will need to include it's .js file and it's css file in the head of your document.
note that this slider is placed in a grid with class 2one-third-slider". That means that it is
styled for one-third column. If you want to use it in some other column you'll have to do some changes in
the main css file "style.css".
So how to customize the slider? First of all, change the images. Images are placed in about folder, inside of the img folder.
You can also place theme anywhere you want. After replacing your images, simply change the path to them in your HTML file
inside this "img" tags (inside div with class "nivoSlider"). You will also need to include the call for
the slider plugin at the bottom of the body. here is the code for that.
$(window).load(function() {
$('#slider-1').nivoSlider({
directionNav: false
});
});
So what is else here on this page? There is a carousel note and client carousel
which we already explained, so there's no need to do that. But there are also
member columns. Now, let's see it's HTML structure first.
<div class="grid_4 team">
<img src="img/about/team1.jpg" alt="team" />
<h6>John Smith</h6>
<p class="position">Creative Designer and CEO</p>
<div class="team-description">
<p>
Fugiat dapibus, tellus ac cursus commodo, mauesris
condime ntum nibut fermentum mas justo sitters.
</p>
</div>
<ul class="team-social">
<li class="facebook">
<a href="#">facebook</a>
</li>
<li class="dribbble">
<a href="#">dribbble</a>
</li>
<li class="rss">
<a href="#">rss</a>
</li>
<li class="skype">
<a href="#">skype</a>
</li>
<li class="twitter">
<a href="#">twitter</a>
</li>
<li class="linkedin">
<a href="#">linkedin</a>
</li>
<li class="behance">
<a href="#">behance</a>
</li>
</ul>
</div>
So as you can see every team member is placed in a one-third grid. it has image,
name of the member, it's place in company, some description and social bookmarks.
So how to customize this? First of all member images. They are placed inside about folder (inside img folder). After that
change the path in your HTML file to that images. You can edit the name of the team member inside "h6" tags.
You can change it's position in company inside a p tag with class "position". Description can be changed in div
with class "tem-description".
Below the description you can see available social icons for every team member. You can edit these icons
in image folder that matches the color style you are using. Additional styling of a team member column
can be done in main css file "style.css", beginning at line 1093.
Services Customization
In this section we will explain how to customize services page.
As you can see in the preview, we have page title, one-third slider, some articles and list items with check mark that are
explained before. We also have client carousel that is the same as on the home page.
You can see that the services presented has the same style as ones on the home page version 1. So you can easily follow the steps explained in that section.
But here is one thing that we haven't already explained. An that is this one third article named "Services overvoew". So how to customize that?
It's quite simple actually. This is just a simple article with a class that defines the column width. Inside of it there is
a span with class "intro" - this is the italic text you can see in the preview. And below is simple "p" tag with some text. You can see it's HTML structure below:
<article class="grid_4">
<h4>Services overview</h4>
<span class="intro">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce et elit orci. Vivamus quis
</span>
<p>
Lorem ipsum dolor slo onsec tueraliquet Morbi nec In
Curabitur lreaoreet nisl lorem in pellente pellente eget.
Lorem ipsum dolor slo onsec Vivamus. Curabitur
</p>
</article>
So to edit this italic text, simply edit the text inside span with class 2intro". Text of the service overview can e edited inside "p" tags.
You can put this "overview text" in any column you want. Same is for services columns.
Pricing Tables Customization
In this section we will explain how to customize pricing tables page.
there are two versions of pricing tables available. First one has label column aside which is presenting
the service that is offered. The second one is simple column style. So, let's start with first version.
here is the HTML structure.
<article class="grid_12 pricing-style-1">
<div class="pricing-table-col labels">
<ul>
<li class="head"></li>
<li>Monthly payments</li>
<li>Bonus Themes</li>
<li>Our Themes</li>
<li>Our Extenshions</li>
<li>New Themes</li>
<li>Support Access</li>
<li>Theme Update</li>
<li>Domain Number</li>
</ul>
</div>
<div class="pricing-table-col">
<ul>
<li class="head">
<h5>basic plan</h5>
<span class="price">$20</span>
<span>per month</span>
</li>
<li>
<span class="label">Monthly payments</span>
Not available
</li>
<li>
<span class="label">Bonus Themes</span>
1 Theme
</li>
<li>
<span class="label">Our Themes</span>
1 Theme
</li>
<li class="pricing-check">
<span class="label">Our Extensions</span>
</li>
<li>
<span class="label">New Themes</span>
Not available
</li>
<li>
<span class="label">Support Access</span>
-
</li>
<li>
<span class="label">Theme Update</span>
Not available
</li>
<li>
<span class="label">Domain Number</span>
1
</li>
<li class="pricing-footer">
<div class="btn-black">
<a href="#">Sign up</a>
</div>
</li>
</ul>
</div>
<div class="pricing-table-col">
<ul>
<li class="head">
<h5>standard plan</h5>
<span class="price">$40</span>
<span>per month</span>
</li>
<li>
<span class="label">Monthly payments</span>
Not available
</li>
<li>
<span class="label">Bonus Themes</span>
1 Theme
</li>
<li class="pricing-check">
<span class="label">Our Themes</span>
</li>
<li class="pricing-check">
<span class="label">Our Extensions</span>
</li>
<li>
<span class="label">New Themes</span>
-
</li>
<li class="pricing-check">
<span class="label">Support Access</span>
</li>
<li>
<span class="label">Theme Update</span>
Unlimited
</li>
<li>
<span class="label">Domain Number</span>
Unlimited
</li>
<li class="pricing-footer">
<div class="btn-black">
<a href="#">Sign up</a>
</div>
</li>
</ul>
</div>
<div class="pricing-table-col selected">
<ul>
<li class="head">
<h5>premium plan</h5>
<span class="price">$60</span>
<span>per month</span>
</li>
<li>
<span class="label">Monthly payments</span>
Not available
</li>
<li>
<span class="label">Bonus Themes</span>
Unlimited Themes
</li>
<li>
<span class="label">Our Themes</span>
5+
</li>
<li class="pricing-check">
<span class="label">Our Extensions</span>
</li>
<li>
<span class="label">New Themes</span>
6+ New Themes
</li>
<li>
<span class="label">Support Access</span>
Unlimited
</li>
<li class="pricing-check">
<span class="label">Theme Update</span>
</li>
<li>
<span class="label">Domain Number</span>
Unlimited
</li>
<li class="pricing-footer">
<div class="btn">
<a href="#">Sign up</a>
</div>
</li>
</ul>
</div>
<div class="pricing-table-col">
<ul>
<li class="head">
<h5>business plan</h5>
<span class="price">$80</span>
<span>per month</span>
</li>
<li>
<span class="label">Monthly payments</span>
Unlimited
</li>
<li>
<span class="label">Bonus Themes</span>
Unlimited
</li>
<li class="pricing-check">
<span class="label">Our Themes</span>
</li>
<li class="pricing-check">
<span class="label">Our Extensions</span>
</li>
<li>
<span class="label">New Themes</span>
Unlimited
</li>
<li class="pricing-check">
<span class="label">Support Access</span>
</li>
<li>
<span class="label">Theme Update</span>
Unlimited
</li>
<li>
<span class="label">Domain Number</span>
Unlimited
</li>
<li class="pricing-footer">
<div class="btn-black">
<a href="#">Sign up</a>
</div>
</li>
</ul>
</div>
</article>
As you can see, the first column has class "pricing-table-col2 and class "labels".
Inside this list items you can put your services you offer for the packages. You can add as
many rows as you want.
This styling is done for five columns. to edit that, to put less or more columns, go to your
css file "stye.css" and replace the percentage that is defining the width of the column. Styling for pricing tables starts at line
1537.
After this labels column starts actual pricing tables. You can see code above. pricing table is actually a div with class
pricing-table-col. Note that the table that is highlighted has class "selected". So to highlight a pricing table simply add
this class to it.
Editing a table is the same as editing a simple table. So the first list item is head. there goes the name of the plan and the price.
Second list item is first row. thrird list item is the second row and so on. As you can see, you can put text
in this row, or a check makr. To use a chack mark, simply create a li with class "pricing-check". the color of the
check mark is the same as the color style used.
Also in this list items (rows) you can see span with class "label". This span is only visible on the small resolutions,
because the column with labels isn't. try to look at it on the mobile device for better understanding.
At the bottom of the pricing table there is a list item with class "pricing-footer". inside of it is placed a button.
You can change this text and link inside "a" tag.
The second option for using pricing table is simple table. It has the same structure as the first version. the only difference is
that the second version is wrapped in a div with class "pricing-style-2". You can edit this table the same way as version one. just when you use it, do not forget to add
this class "pricing-style-2". You can also add as many columns you want. You will just need to change the column width (in percentage) in the main css file "style.css",
beginning at line 1639.
FAQ Page Customization
In this section we will explain how to customize FAQ page.
The structure of a FAQ page is actually really simple.
This is a page that have a sidebar. It is important to note that every of your pages can have sidebar. here is how it's done.
The content of the page is placed in a grid_8 with class "content-sidebar-right". This means
that this page will ahve sidebar that is positioned right. A page that has sidebar on the left will have
content in grid_8 with class "content-sidebar-left".
Inside this grid there is accordion which has the same structure as one explained at the home page section.
here is it's structure.
<section class="accordion">
<div class="accordion-content-wrapp">
<div class="title"><a href="#">Lorem ipsum
dolor slo onsec tueraliquet Morbi nec In dominium
slaves</a></div>
<div class="content">
<p>
Mauris mauris ante, blandit et, ultrices a,
suscipit eget, quam. Integer ut neque. Vivamus
nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
Mauris mauris ante, blandit et, ultrices a,
suscipit eget, quam. Integer ut neque. Vivamus
nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
</p>
<p>
Mauris mauris ante, blandit et, ultrices a,
suscipit eget, quam. Integer ut neque. Vivamus
nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
Mauris mauris ante, blandit et, ultrices a,
suscipit eget, quam. Integer ut neque. Vivamus
nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
</p>
<p>
Mauris mauris ante, blandit et, ultrices a,
suscipit eget, quam. Integer ut neque. Vivamus
nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
Mauris mauris ante, blandit et, ultrices a,
suscipit eget, quam. Integer ut neque. Vivamus
nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
</p>
</div>
</div>
<div class="accordion-content-wrapp">
<div class="title active"><a href="#">
Lorem ipsum dolor slo onsec tueraliquet Morbi nec
In </a></div>
<div class="content">
<p>
Sed non urna. Donec et ante. Phasellus eu ligula.
Vestibulum sit amet purus. Vivamus hendrerit,
dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo.
Mauris mauris ante, blandit et, ultrices a,
suscipit eget, quam. Integer ut neque. Vivamus
nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
</p>
<p>
Mauris mauris ante, blandit et, ultrices a,
suscipit eget, quam. Integer ut neque. Vivamus
nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
Mauris mauris ante, blandit et, ultrices a,
suscipit eget, quam. Integer ut neque. Vivamus
nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
</p>
</div>
</div>
...
</div>
</section>
You can edit this content in the same way explained for accordion
on home page version 1. just remember to include "include.js" file,
where the accordion JavaScript is placed.
More about customizing the sidebar in "Customizing the sidebar2 section.
404 Page Customization
In this section we will explain how to customize 404 Page.
As pocket comes with six color styles, there are six 404 images for every color style.
Those images are placed in a folder that matches the color style that you are using, inside the "img" folder.
So if you want to change the image, there is a place to do that.
So, let's see the HTML structure of this page's content.
<article class="grid_12">
<div class="error-content-container clearfix">
<section class="error-img-container clearfix">
<p>
<span class="star-mark">*</span>
Oops! Page not found...
</p>
<div class="error-img"></div>
</section>
<section class="search-area clearfix">
<p>The Page You Are Loking For Can Not Be Found</p>
<form class="error-search" action="#" method="get">
<input class="search-input" type="text" placeholder="Search website..." />
<input class="search-submit" type="submit" value="Submit search"/>
</form>
</section>
</div>
<article class="error-page-text">
<p>
Lid est laborum dolos rumes fustsirs sit untras. Et
harums ser quidem sit rerums facilis est dolores uni
nemis Lid est laborum dolos rumes fustsirs sit untras.
Et harums ser quidem sit rerums facilis est dolores
uni nemis . Lid est laborum dolos rumes fustsirs sit
untras. Et harums ser quidem sit rerums facilis est
dolores uni nemis Lid est laborum dolos rumes
fustsirs sit untras. Et harums ser quidem sit rerums
facilis est dolores uni nemis
</p>
</article>
</article>
As you can see, all the content is placed inside grid_12. Inside of it there is
a div with class "error-content-container ". It contains the image and search area.
You can change the text or image here.
Below the image there is an text article. You can include this in your 404 page, but if you don't want it, you can simply remove it.
You can edit his text inside "p" tag. Styling of 404 page is placed in style.css file beginning at line 1728.
So if you want to change anything that's the place to do that.
Portfolio Pages Customization
In this section we will explain how to customize portfolio pages.
There are three versions of Portfolio pages available:
- Portfolio 2 columns
- Portfolio 3 columns
- Portfolio 4 columns
Every of those pages has the same HTML structure, except of one thing and that is the class
of the grid you are using. So what do you need to customize the portfolio pages?
Well, those pages have quicksand plugin, so you will need to include it in the head
of your document. Also they have prettyPhoto lightbox, as previously explained in "Customizing the home page" section.
We will present you here HTML structure for portfolio with two columns and explain how to customize it. The same
rules can be applied to other versions.
here is the HTML Structure.
<div class="container_12">
<section class="grid_12 section-title">
<h3>Awesome Projects</h3>
<ul id="portfolio-filter">
<li class="active"><a class="all" href="#">All</a>/</li>
<li><a class="photography" href="#">Photography</a>/</li>
<li><a class="webdesign" href="#">Web Design</a>/</li>
<li><a class="graphicdesign" href="#">Graphic design</a>/</li>
<li><a class="motiongraphics" href="#">Motion Graphics</a></li>
</ul><!-- portfolio quicksand filter end -->
</section>
</div><!-- container_12 end -->
<div class="container_12">
<ul id="filter-item">
<!-- portfolio item start -->
<li data-id="id-1" class="grid_6" data-type="webdesign">
<figure class="portfolio">
<div class="img-hover">
<a class="portfolio-image" href="portfolio2.html">
<img src="img/portfolio/2col/portfolio1.jpg"
alt="portfolio" width="460"/>
</a>
<div class="mask">
<a class="thumb info"
title=""
href="img/portfolio/2col/portfolio1.jpg"
data-gal="prettyPhoto[pp_gallery]">
</a>
</div>
</div>
<figcaption>
<div class="caption-title">
<p class="title">
Simply Amazing
</p>
<p class="subtitle">
Photography
</p>
</div>
</figcaption>
</figure>
</li><!-- portfolio item end -->
<!-- portfolio item start -->
<li data-id="id-2" class="grid_6" data-type="graphicdesign">
<figure class="portfolio">
<div class="img-hover">
<a class="portfolio-image" href="portfolio2.html">
<img src="img/portfolio/2col/portfolio4.jpg"
alt="portfolio" width="460"/>
</a>
<div class="mask">
<a class="thumb info"
title=""
href="img/portfolio/2col/portfolio4.jpg"
data-gal="prettyPhoto[pp_gallery]">
</a>
</div>
</div>
<figcaption>
<div class="caption-title">
<p class="title">
Work by streetx222
</p>
<p class="subtitle">
Graphic design
</p>
</div>
</figcaption>
</figure>
</li><!-- portfolio item end -->
...
</ul>
<ul class="pagination">
<li class="active">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
<!-- arrow left start -->
<li class="arrow">
<a href="#">»</a>
</li><!-- arrow left end -->
</ul><!-- pagination for portfolio page end -->
</div>
So, at the top of the page we have section title that is holding the
title and quicksand filters. One filter presents the portfolio category.
You can change the category name by replacing the text inside those list items
inside ul with class "portfolio-filter".
Every portfolio item is list item that needs to have
data-id (1, 2, 3,...), class that defines it's width
(as a column) and data-type that defines in which
portfolio category it belongs. Here you need to
change portfolio category name by editing data-type
value of list item.
Now you need to replace the image in the "img" portfolio folders.You can add
another folder that will contain full size images that will be displayed in prettyPhoto lightbox.
So to customize the portfolio items, simply follow these simple steps (same as the portfolio on home page):
- Make HTML structure as shown above
- Replace the images inside img/portfolio/column_you_are_using folder.
- You can also make another folder that will contain full size images (that will be displayed in a lightbox).
- When you replaced your images go to this HTML structure and replace the paths to your images
- For image that will be displayed change the path inside a tag with class "portfolio-image"
- For image that will be displayed in a lightbox change the path inside "href" tag (inside div with class "mask").
Don't forget to assign data-id to every list item - portfolio item and a data-type which defines the category one portfolio item belongs too.
The logic of using other versions of portfolio is the same. You only had to change
the class that defines the column you are using. If you want to change the styling of portfolio
items you can do that in the css file style.css beginning at the line 1848.
Portfolio Single
In this section we will explain how to customize Portfolio sinle page.
As you can see in the preview, the portfolio single page has a different look and structure.
We have a slider (Nivo Slider) on the left and some description on the right side. Here is it's HTML structure.
<article class="portfolio-slider-wrap grid_7">
<div id="slider1" class="nivoSlider portfolio-slider">
<img src="img/portfolio/single/portfolio1.jpg" alt="slider"/>
<img src="img/portfolio/single/portfolio2.jpg" alt="slider"/>
<img src="img/portfolio/single/portfolio3.jpg" alt="slider"/>
</div>
<!-- slider images shadow -->
<div class="portfolio-slider-shadow"></div>
</article>
<article class="grid_5 portfolio-info">
<h4>Overview</h4>
<p>
Consectetur adipiscing elit aeneane lorem lipsum,
condimentum ultrices consequ atvehicula mauris lipsum
adipiscing lipsum aenean orci lorem. onsequatv.
</p>
<p>
Aatvehicula mauris lipsum adipiscing lipsum aenean orci
lorem onsequatv.
</p>
<h4>Project details</h4>
<ul>
<li>Date: 12/08/2012</li>
<li>Client: Creattica</li>
<li>Author: streetx222</li>
</ul>
<div class="btn">
<a href="#">Visit site</a>
</div>
</article>
The images in the portfolio slider are placed in a img/portfolio/single folder, so
first do the replacement. You should make your images the same size as on the preview, so you won't need
to adjust the slider width and height in css. once you have replaced the images, just change the path to them
inside this "img" tags.
For this slider, we used NivoSlider, so do not forget do include it's .js and .css files in the head of your document.
Also you will need to call the slider plugin at the bottom of the body. just see portfolio-single.html for reference.
You can change the description of the portfolio inside this div with class "portfolio-details". Also you can
change the text of the button and a link to which it is pointing.
At the bottom of the page there is a carousel with portfolio items. It's usage s the same as for other carousels already explained. here is the HTML structure you should use.
<article class="grid_12 jcarousellite portfolio-carousel clearfix">
<!-- divider with title start -->
<section class="divider-with-title carousel clearfix">
<div class="title">
<h4>Other Projects</h4>
</div>
<ul class="carousel-nav">
<li>
<a class="carousel-nav-1 prev" href="#"></a>
</li>
<li>
<a class="carousel-nav-1 next" href="#"></a>
</li>
</ul>
</section><!-- divider with title end -->
<ul id="carousel-1" class="carousel-li carousel-4-items">
<li>
<figure class="portfolio">
<div class="img-hover">
<a class="portfolio-image" href="portfolio4.html">
<img src="img/portfolio/4col/portfolio1.jpg" alt="portfolio" width="220"/>
</a>
<div class="mask">
<a class="thumb info"
title=""
href="img/portfolio/4col/portfolio1.jpg"
data-gal="prettyPhoto[pp_gallery]">
</a>
</div>
</div>
<figcaption>
<div class="caption-title">
<p class="title">
Simply Amazing
</p>
<p class="subtitle">
Photography
</p>
</div>
</figcaption>
</figure>
</li>
<li>
<figure class="portfolio">
<div class="img-hover">
<a class="portfolio-image" href="portfolio4.html">
<img src="img/portfolio/4col/portfolio2.jpg" alt="portfolio" width="220"/>
</a>
<div class="mask">
<a class="thumb info"
title=""
href="img/portfolio/4col/portfolio2.jpg"
data-gal="prettyPhoto[pp_gallery]">
</a>
</div>
</div>
<figcaption>
<div class="caption-title">
<p class="title">
Work by streetx222
</p>
<p class="subtitle">
Graphic design
</p>
</div>
</figcaption>
</figure>
</li>
...
Editing the items in the carousel is the same as for portfolio items on
other portfolio pages, because the HTML structure is the same. This carousel is styled
to show 4 items. So if you want to style it differently you'll need to make some changes in the css file.
The styling for portfolio single is placed in style.css file beginning from line 2066.
Blog Pages Customization
In this section we will explain how to customize Blog page.
Blog posts are placed in an unordered list inside grid_8 with class
"conetent-sidebar-right". This means that this is a blog page
that has right sidebar. If you'd like to use blog with left sidebar
simply use grid_8 with class "conetent-sidebar-left".
There are few options for blog post types you can use:
- Blog post with image
- Blog post with gallery
- Blog post with vimeo or youtube video
- Blog post with quote
Blog post with image
So, we'll start with customizing blog post that has image. here is it's HTML structure.
<li class="blog-post clearfix">
<section class="post-title-container">
<h3>This is post with image</h3>
<a class="post-author" href="#">
by Eduard Bros
</a>
</section>
<div class="post-info-container">
<img src="img/blog/blog3.jpg" alt="blog" />
<div class="post-meta">
<ul>
<li class="meta-date">
<a href="#">June 6th, 2012</a>
</li>
<li class="meta-tags">
<a href="#">Responsive</a>
</li>
<li class="meta-views">
<a href="#">106 views</a>
</li>
<li class="meta-comments">
<a href="blog-single.html">3 comments</a>
</li>
</ul>
</div>
<div class="blog-post-shadow"></div>
</div>
<article class="post-body">
<div class="post-category">
<a href="#" class="category-image"></a>
</div>
<p>
Lid est laborum dolos rumes fustsirs sit untras.
Et harums ...
</p>
<div class="btn">
<a href="blog-single.html">Read more</a>
</div>
</article>
</li>
All images used in blog pages are placed in an "blog" folder inside img folder.
So when changing images, first do replacement there.
So let's see what we have here. First we have section with class
"post-title-container". This is the place where you change the title
of your blog post, and the author.
After that we have a div with class "post-info-container". In this div is placed the image
and post meta. When you already changed the actual image, you need to change the path to it inside the "img" tag.
As you can see after the image there is an "ul" that contains post meta data. You can change
the data inside those list items. Images used for post meta are placed in the same "blog" folder, so if you want to change them, that is the
place to do that.
After the post info section we have post body section. In this section you'll find blog category and blog text.
To change the icon for category go to the style.css file on the line 2375. inside the "p" tags you can change post description (post text).
You can see there is also a button that is linking the post single page. You can edit it's text inside "a" tag.
After every blog post there is a divider, so don't forget to add it :).
post with gallery
The HTML structure of the post meta section and body section is the same. The difference is that in post info container
we don't have image, but slider. So here it is.
<div class="post-info-container with-slider">
<div id="slider-1" class="nivoSlider blog-slider">
<img src="img/blog/blog1.jpg" alt="blog" />
<img src="img/blog/blog4.jpg" alt="blog" />
<img src="img/blog/blog3.jpg" alt="blog" />
</div>
<div class="post-meta">
<ul>
<li class="meta-date">
<a href="#">June 6th, 2012</a>
</li>
<li class="meta-tags">
<a href="#">Responsive</a>
</li>
<li class="meta-views">
<a href="#">106 views</a>
</li>
<li class="meta-comments">
<a href="blog-single.html">3 comments</a>
</li>
</ul>
</div>
<div class="blog-post-shadow"></div>
</div>
For the slider on blog page, Nivo Slider plugin is used, so you need to
include it's .css and .js file in the head of the document. Also you need to call the plugin
at the bottom of the body.
Note that this post info container has class "with-slider", so when using a blog post that has gallery
don't forget to add this class. So how to customize this? it's quite simple. You just need to replace images in "blog" folder with your own, and then adjust the path
to them inside the "img" tags.
post with vimeo or youtube video
When using a blog post that has a video you will have to follow some simple steps. The HTML structure of post meta and description is the same.
Again, the difference is that inside post-info-container there will be an iframe of a video instead of an image. here is the sample of a code.
<div class="post-info-container">
<iframe src="http://player.vimeo.com/video/29798521?byline=0&
portrait=0&badge=0&"></iframe>
<div class="post-meta">
<ul>
<li class="meta-date">
<a href="#">June 6th, 2012</a>
</li>
<li class="meta-tags">
<a href="#">Responsive</a>
</li>
<li class="meta-views">
<a href="#">106 views</a>
</li>
<li class="meta-comments">
<a href="blog-single.html">3 comments</a>
</li>
</ul>
</div>
<div class="blog-post-shadow"></div>
</div>
So, how to get an video in iframe? Go to viemo or youtube,
find a video you want to use. There will be button share on it. Click that and copy the code
that is refering to the link of the video.
Now place that code at inside of this iframe you see in your html file.
blog post with quote
here is the HTML structure of a post with quote. Again the only difference is in post-info-container.
<div class="post-info-container">
<blockquote class="blog-quote">
<span class="quote-mark">"</span>
Lid est laborum dolos rumes fustsirs sit untras.
Et harums ser quidem sit rerums facilis est
dolores uni nemis Lid est laborum dolos rumes
fustsirs sit untras. Et harums ser quidem sit
rerums facilis est dolores uni nemis . Lid est
laborum dolos rumes fustsirs sit untras. Et
harums ser quidem sit rerums facilis est dolores
uni nemis Lid est laborum dolos rumes fustsirs
sit untras. Et harums ser quidem sit rerums
facilis est dolores uni nemis.
</blockquote>
<div class="post-meta">
<ul>
<li class="meta-date">
<a href="#">June 6th, 2012</a>
</li>
<li class="meta-tags">
<a href="#">Responsive</a>
</li>
<li class="meta-views">
<a href="#">106 views</a>
</li>
<li class="meta-comments">
<a href="blog-single.html">3 comments</a>
</li>
</ul>
</div>
<div class="blog-post-shadow"></div>
</div>
To replace the quote simply edit the text inside "blockquote" tag.
Blog post with audio
For displaying audio in blog post, we used a plugin named jplayer. You can
find all of it's files in "js" folder. We advise you to use the ame HTML structure that is presented below.
<div class="post-info-container">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-playlist">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-previous"
tabindex="1">previous</a></li>
<li><a href="javascript:;" class="jp-play"
tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause"
tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-next"
tabindex="1">next</a></li>
<li><a href="javascript:;" class="jp-stop"
tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute"
tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute"
tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max"
tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-time-holder">
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
</div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-shuffle"
tabindex="1" title="shuffle">shuffle</a></li>
<li><a href="javascript:;" class="jp-shuffle-off"
tabindex="1" title="shuffle off">shuffle off</a></li>
<li><a href="javascript:;" class="jp-repeat"
tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off"
tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser
to a recent version or update your <a
href="http://get.adobe.com/flashplayer/" target="_blank">
Flash plugin</a>.
</div>
</div>
</div><!-- .jp-audio -->
So here is what to do. First copy the above structure in your HTML file.
When you have done this you can add some text, same as on teh other blog post types. then
you need to include the call for the plugin in the end of the page body. there is the place
you will add your audio files too. note that you must reference m4a and ogg format for crossbrowser compatibility.
here is the code example of how to do that.
$("#jquery_jplayer_1").jPlayer({
ready: function (event) {
$(this).jPlayer("setMedia", {
m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a",
oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
});
},
swfPath: "js/jplayer/",
supplied: "m4a, oga",
wmode: "window"
});
single blog post page
So here is the final blog post page and that is blog post single. It's HTML structure regarding the post info container and post body is the same
as on the blog posts page. After the post body section there is a divider. You can see example on your blog-single.html file.
next, what we have on this page is comments section and form for sending a comment. When user sends a comment it will be send
to your email and you will have to manually insert the comment on your page. So let's see the HTML structure of the comments section.
<article class="post-comments">
<h3>4 Comments on this awesome blog post</h3>
<ul class="comments-li">
<li>
<article class="comment">
<div class="avatar">
<div class="author-img">
<img src="img/blog/author1.jpg" width="87" alt="author" />
</div>
</div>
<div class="comment-meta">
<a href="#" class="author">Mark </a>
March, 2012 at 09:01 am | <a href="#"> Reply</a>
</div>
<div class="comment-body">
<p>
Lorem ipsum dolor...
</p>
</div>
</article>
<!-- second level comment -->
<ul class="child">
<li>
<article class="comment">
<div class="avatar">
<div class="author-img">
<img src="img/blog/author3.jpg" width="87" alt="author" />
</div>
</div>
<div class="comment-meta">
<a href="#" class="author">John</a>
March, 2012 at 09:01 am | <a href="#">Reply</a>
</div>
<div class="comment-body">
<p>
Lorem ipsum ...
</p>
</div>
</article>
<ul class="child">
<li>
<article class="comment">
<div class="avatar">
<div class="author-img">
<img src="img/blog/author2.jpg" width="87" alt="author" />
</div>
</div>
<div class="comment-meta">
<a href="#" class="author">Maya</a>
March, 2012 at 09:01 am | <a href="#">Reply</a>
</div>
<div class="comment-body">
<p>
Lorem ipsum ...
</p>
</div>
</article>
</li>
</ul>
</li>
</ul>
</li><!-- post comments list item end -->
<li>
<article class="comment">
<div class="avatar">
<div class="author-img">
<img src="img/blog/author1.jpg" width="87" alt="author" />
</div>
</div>
<div class="comment-meta">
<a href="#" class="author">Mark </a>
March, 2012 at 09:01 am | <a href="#"> Reply</a>
</div>
<div class="comment-body">
<p>
Lorem ipsum ...
</p>
</div>
</article>
</li>
</ul>
</article> <article class="post-comments">
<h3>4 Comments on this awesome blog post</h3>
<ul class="comments-li">
<li>
<article class="comment">
<div class="avatar">
<div class="author-img">
<img src="img/blog/author1.jpg" width="87" alt="author" />
</div>
</div>
<div class="comment-meta">
<a href="#" class="author">Mark </a>
March, 2012 at 09:01 am | <a href="#"> Reply</a>
</div>
<div class="comment-body">
<p>
Lorem ipsum dolor...
</p>
</div>
</article>
<!-- second level comment -->
<ul class="child">
<li>
<article class="comment">
<div class="avatar">
<div class="author-img">
<img src="img/blog/author3.jpg" width="87" alt="author" />
</div>
</div>
<div class="comment-meta">
<a href="#" class="author">John</a>
March, 2012 at 09:01 am | <a href="#">Reply</a>
</div>
<div class="comment-body">
<p>
Lorem ipsum ...
</p>
</div>
</article>
<ul class="child">
<li>
<article class="comment">
<div class="avatar">
<div class="author-img">
<img src="img/blog/author2.jpg" width="87" alt="author" />
</div>
</div>
<div class="comment-meta">
<a href="#" class="author">Maya</a>
March, 2012 at 09:01 am | <a href="#">Reply</a>
</div>
<div class="comment-body">
<p>
Lorem ipsum ...
</p>
</div>
</article>
</li>
</ul>
</li>
</ul>
</li><!-- post comments list item end -->
<li>
<article class="comment">
<div class="avatar">
<div class="author-img">
<img src="img/blog/author1.jpg" width="87" alt="author" />
</div>
</div>
<div class="comment-meta">
<a href="#" class="author">Mark </a>
March, 2012 at 09:01 am | <a href="#"> Reply</a>
</div>
<div class="comment-body">
<p>
Lorem ipsum ...
</p>
</div>
</article>
</li>
</ul>
</article>
As you can see in the code above all comments are wrapped inside
an article with class post-comments. Then, all comments are wrapped inside an unordered list, and every comment presents one list item.
Every comment has a div with class "comment-meta", a div with class "avatar" and a div with class "comment-body".
To change the avatar of the comment author first replace an image inside your img/blog/ folder, and then edit the path to it inside
"img" tag in div with class 2avatar". Author name and the date can be edited in di with class "comment-meta". You can simply edit this text.
To edit comment text, simply edit the text inside "p" tags inside of a div with class "comment-body". As you can see there can be more levels of comments.
If you want to add a "child" comment, simply make an unordered list inside and add a class "child" to it. then, make an list item and paste the comment structure.
You can see this example on the code above.
If you'd like to change the styling of a comment go to style.css file to line 2453.
After the comments section there is a form for sending a reply. You can see it's structure here.
<section id="respond">
<h4>Leave a comment</h4>
<form>
<input type="text" class="text" placeholder="Your First Name..."/>
<input type="text" class="text" placeholder="Your Last Name..."/>
<input type="email" name="email" class="text email" placeholder="Your Email..."/>
<textarea rows="15" class="textarea" placeholder="Your message..."></textarea>
<input id="comment-reply" type="submit" value="Send Message">
</form>
</section>
As already stated, when user leaves a comment you will receive an email message on the mail you have entered in the contct.php file.
You can edit the styling of contact form in style.css file beginning at line 2554.
Photo Stream Widgets and Twitter Feed
In this section we will explain how to use photo Sterams plugins.
Photo Stream Widgets can be used on any page without limit.
Widgets are made in desire to connect static website with
some dynamic content so your users will always have
new content on page. There are seven different Photo
Stream widgets and one RSS Feed Widget. These are:
-
Flickr
- Pinterest
- Dribble
- Instagram
- DeviantArt
- Picasa
- Youtube
- News feed
How to use it? The easiest way is just to copy the desired
script for initialization and put it on page you want.
After that you need to change the "id" or "class" where
you want your widget to appear.
here is the code for all available widgets.
/* ================ PINTEREST FEED ================ */
$('.pinterest-feed').socialstream({
socialnetwork: 'pinterest',
limit: 15,
username: 'your_username_here'
})
/* ================ DEVIANT ART FEED ================ */
$('.deviant-feed').socialstream({
socialnetwork: 'deviantart',
limit: 15,
username: 'your_username_here'
})
/* ================ PICASA FEED ================ */
$('.picasa-feed').socialstream({
socialnetwork: 'picasa',
limit: 15,
username: 'your_username_here'
})
/* ================ FLICKR FEED ================ */
$('.flickr-feed').socialstream({
socialnetwork: 'flickr',
limit: 15,
username: 'your_username_here'
})
/* ================ DRIBBBLE FEED ================ */
$('.dribbble-feed').socialstream({
socialnetwork: 'dribbble',
limit: 15,
username: 'your_username_here'
})
/* ================ YOUTUBE FEED ================ */
$('.youtube-feed').socialstream({
socialnetwork: 'youtube',
limit: 15,
username: 'your_username_here'
})
/* ================ NEWSFEED ================ */
$('.newsfeed').socialstream({
socialnetwork: 'newsfeed',
limit: 15,
username: ' http://feeds.feedburner.com/webdesignerdepot?format=xml'
})
Twitter widget is already explained. important to note is when you use more than one twitter on one page the second one should have
class "tweets-list-container-2". Twitter Feed includes
using Tweetscroll jQuery plugin.
Using it is very simple and can be found in "include.js".
Code below shows how to initialize Tweetscroll plugin
with desired options.
/* ================ TWEETS SCROLL ================ */
$('.tweets-list-container').tweetscroll({
username: 'envatowebdesign',
time: true,
limit: 11,
replies: true,
position: 'append',
date_format: 'style2',
animation: 'slide_up',
visible_tweets: 2
});
There are eight parameter in this plugin which can be
changed by your needs.
- username - your username or list of usernames
- time - include time when tweet was published
- limit - how many tweets you want to show
- replies - set this to true if you want to show "Replay" link
- position - how you want to show tweets, append or prepend
- animation - how you want to animate your tweets. There are four different options: [slide_up, slide_down, fade, false]. False means that tweets won't scroll
- visible_tweets - how many tweets you want to be visible in one time
API Usage
APIs used in pocket theme are:
- Google Maps
- Twitter
- Flickr
- Instagram
- Dribbble
- Youtube
All these APIs are used as a part of TweetScroll and SocialStream plugins and we don't recommend changing any of the code in these plugins.
