Vinz Documentation

Created: 15.05.2014
By: artlessthemes
eMail: support@artlessthemes.com

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to write us an email or contact us via our themeforest user page.

Support via eMail Go to Themeforest

HTML Structure

Basic Structure

<!-- START NAVIGATION -->
<nav id="navigation-container">
    <ul id="main-navigation">
        {{ ... }}
    </ul>
    {{ ... }}
</nav><!-- END NAVIGATION -->

<!-- START PAGE HEADER -->
<div id="page-header">
    {{ ... }}
</div><!-- END PAGE HEADER -->

<!-- START PAGEWRAPPER -->
<div id="pagewrapper">
    <section>
        {{ ... }}
    </section>

    <!-- START FOOTER -->
    <footer id="page-footer">
        {{ ... }}
    </footer><!-- END FOOTER -->
</div><!-- END PAGEWRAPPER -->

12 Column Grid

This is a full responsive 12 Column Grid.
If you want a margin between the columns, add the class "gutters" to the "row" <div> like this:
<div class="row gutters"></div>
If you want no margin, remove the class "gutters".

<!-- START SECTION -->
<section id="section-id">
    <!-- START CONTAINER -->
    <div class="row gutters">
        <div class="col span_6">
            {{ 6/12 COLUMN PAGE CONTENT }}
        </div>
        <div class="col span_6">
            {{ 6/12 COLUMN PAGE CONTENT }}
        </div>
    </div><!-- END CONTAINER -->
</section><!-- END SECTION -->

Stylesheets

Files

All CSS are located in the "css" folder of the template. Each CSS File is well commented and easy to use and customize to your own needs. Here's the list of the CSS files:

1. reset.css - Reset default css browser settings
2. responsive.gs.12col.css - 12 Column Grid settings
3. owl.carousel.css - Owl Carousel settings
4. theme.css - Specific theme settings
5. shortcodes.css - Shortcode settings
6. responsive.css - Responsive @media settings
7. color.css - Color settings
8. custom.css - Do your custom css changes here to simplify updates
9. ie-theme.css - Settings only for IE lower then version 9

theme.css includes:

/*
1. DOCUMENT SETUP
2. PAGE PRELOADER
3. WRAPPER
4. PAGE HEADER
    4.1 CONTAINER
    4.2 LOGO
    4.3 OPEN NAVIGATION BUTTON
5. NAVIGATION
    5.1 NAVIGATION LIST
    5.2 NAVIGATION CONTAINER
    5.3 BOTTOM CONTAINER
6. SCROLL DOWN BUTTON
7. SECTION HEADLINE
8. PORTFOLIO
    8.1 GRID
    8.2 LAYER
    8.3 LOAD MORE
    8.4 PROJECT DETAILS
    8.5 PORTFOLIO CONTROLS
9. TEAM
    9.1 LAYER
10. BLOG
    10.1 GRID
    10.2 LAYER
    10.3 LOAD MORE
    10.4 BLOG DETAILS
    10.5 BLOG CONTROLS
11. CONTACT
12. FOOTER
13. CSS ANIMATIONS
    13.1 JUMP
    13.2 ROTATE
*/

shortcodes.css includes:

/*
1. TYPOGRAPHY
    1.1 HEADLINES
    1.2 LINKS
    1.3 PARAGRAPH
2. ALIGN AND SPACES
    2.1 ALIGN
    2.2 SPACES
3. BUTTONS
4. FORM
5. ICONS
    5.1 ICONS
    5.2 CIRCLE ICONS
    5.3 FLOAT ICONS
6. SKILLS
7. ACCORDION AND TOGGLE
8. TABS
    8.1 TAB NAVI
    8.2 TAB NAVI HORIZONTAL
    8.3 TAB CONTENT
9. ALERT BOX
10. COMMENT CAROUSEL
11. CLIENT CAROUSEL
12. COUNTER
13. GOOGLE MAP
14. TIMELINE
    14.1 WRAPPER / GRID
    14.2 INNER
    14.3
    14.4
*/

Javascript

Files

All JavaScript / jQuery plugins are located in the "scripts" folder of the template. You do not need to edit these items.

1. jquery.1.9.1.min.js - jQuery
2. modernizr.custom.97074.js - Modernizr 2.6.2
3. scripts/jquery.easing.1.3.js - jQuery Easing v1.3
4. scripts/SmoothScroll.js - Smooth Scroll
5. scripts/respond.min.js - Respond.js v1.1.0
6. scripts/owl.carousel.js - Owl Carousel
7. scripts/jquery.fittext.js - jQuery FitText
8. scripts/jquery.fitvids.js - jQuery FitVids
9. scripts/waypoints.js - Waypoints
10. scripts/jquery.googlemap.js - Google Map (Only in contact.html)

Theme Javascript

There are three theme specific javascript files. The first contains the script for the navigation, header, portfolio-preview, blog-preview and shortcodes. You do not need to edit these file. The second file contains the ajax part of the contact form. If you want to change settings, add a Carousel, a parallax background or something else, you must edit the "theme.settings.js" file.

1. theme.script.js - Theme Javascript
2. theme.mail.js - Javascript / Ajax for the contact form
3. theme.settings.js - Do all jQuery settings here

theme.settings.js includes:

/*
1. COMMENT CAROUSEL
2. CLIENT CAROUSEL
3. GOOGLE MAP
*/

Section Headlines

You can use a letter as a design element under your section headlines. Just replace the "content: 'X';" with your letter.

Html

<!-- SECTION HEADLINE -->
<header class="section-headline about">
    <div class="row">
        <h1 class="underline">
            {{ YOUR HEADLINE }}
        </h1>
        <h4>
            {{ YOUR SUBHEADLINE }}
        </h4>

        <!-- START SCROLL DOWN -->
        <div class="scroll-down-container">
            <a class="scroll-down"></a>
        </div><!-- END SCROLL DOWN -->
    </div>
</header><!-- SECTION HEADLINE -->

CSS - theme.css

.section-headline {
    color: #fff;
}

Shortcodes

Buttons

Html

<a class="button small">Small Button</a>
<a class="button">Normal Button</a>
<a class="button big">Big Button</a>

<a class="button border small">Small Button</a>
<a class="button border">Normal Button</a>
<a class="button border big">Big Button</a>

CSS - shortcodes.css

.button {
    background: #70a8da;
    color: #fff;
    border-bottom: 2px solid #4e89be;
}

.button:hover {
    background: #7fb4e3;
}

Icons

For more Icons check fontawesome.io/ and replace the class "fa-twitter" with your new icon class.

Html

<div class="icon small"><i class="fa fa-facebook"></i></div>
<div class="icon"><i class="fa fa-twitter"></i></div>
<div class="icon big"><i class="fa fa-linkedin"></i></div>

CSS - shortcodes.css

.icon {
    font-size: 2.2em;
}

Icon Circles

Html

<a class="circle-icon small">
    <i class="fa fa-bullhorn"></i>
</a>

<a class="circle-icon">
    <i class="fa fa-bullhorn"></i>
</a>

<a class="circle-icon big">
    <i class="fa fa-bullhorn"></i>
</a>

<a class="circle-icon border small">
    <i class="fa fa-bullhorn"></i>
</a>

<a class="circle-icon border">
    <i class="fa fa-bullhorn"></i>
</a>

<a class="circle-icon border big">
    <i class="fa fa-bullhorn"></i>
</a>

CSS - shortcodes.css

.icon-circle {
    color: #fff;
    background: #70a8da;
}

a.circle-icon:hover {
    background: #7fb4e3;
}

Icon Block

Html

<div class="icon">
    <i class="fa fa-coffee"></i>
</div>
<h5>
    {{ YOUR TITLE }}
</h5>
<p>
  	{{ YOUR CONTENT }}
</p>

Float Icon

Html

<div class="float-icon">
    <div class="icon">
        <i class="fa fa-tablet"></i>
    </div>
    <h5>
        {{ YOUR TITLE }}
    </h5>
    <p>
        {{ YOUR CONTENT }}
    </p>
</div>

Accordion and Toggle

Html

<div class="accordion">
    <a class="title">
        {{ YOUR TITLE }}
        <i class="fa fa-plus"></i>
        <i class="fa fa-minus"></i>
    </a>
    <div class="content">
        <p>
            {{ YOUR CONTENT }}
        </p>
    </div>
</div>

<div class="toggle margin-top">
    <a class="title">
        {{ YOUR TITLE }}
        <i class="fa fa-plus"></i>
        <i class="fa fa-minus"></i>
    </a>
    <div class="content">
        <p>
            {{ YOUR CONTENT }}
        </p>
    </div>
</div>

CSS - shortcodes.css

.accordion .title, .toggle .title {
    background: #fff;
    color: #3d3d3d;
}

.accordion .content, .toggle .content {
    background: #fff;
}

Tabs

Html

<ul class="tab-navi">
    <li><a data-content="conh01">First Tab</a></li>
    <li><a data-content="conh02">Second Tab</a></li>
</ul>
<div class="tab-content-container">
    <div id="conh01" class="tab-content">
        {{ YOUR CONTENT }}
    </div>
    <div id="conh02" class="tab-content">
        {{ YOUR CONTENT }}
    </div>
</div>

<ul class="tab-navi horizontal">
    <li><a data-content="conh01">First Tab</a></li>
    <li><a data-content="conh02">Second Tab</a></li>
</ul>
<div class="tab-content-container">
    <div id="conh01" class="tab-content">
        {{ YOUR CONTENT }}
    </div>
    <div id="conh02" class="tab-content">
        {{ YOUR CONTENT }}
    </div>
</div>

CSS - shortcodes.css

.tab-navi a {
    color: #595959;
    background: #fff;
}

.tab-navi a:hover {
    color: #70a8da;
}

.tab-navi a.active {
    background: #70a8da;
    color: #fff;
}

Alert Box

Html

<div class="alert-box error">
    <i class="fa fa-bolt"></i>
	{{ Error Message }}
    <a class="close">x</a>
</div>

<div class="alert-box warning">
    <i class="fa fa-warning"></i>
	{{ Warning Message }}
    <a class="close">x</a>
</div>

<div class="alert-box success">
    <i class="fa fa-check"></i>
	{{ Success Message }}
    <a class="close">x</a>
</div>

<div class="alert-box notice">
    <i class="fa fa-flag"></i>
	{{ Notice Message }}
    <a class="close">x</a>
</div>

CSS - shortcodes.css

.alert-box.error, .alert-box.error a {
    color: #a02119;
}
.alert-box.error {
    border-color: #eed5d5;
    background: #f4e2e2;
}

.alert-box.warning, .alert-box.warning a {
    color: #c79d0c;
}
.alert-box.warning {
    border-color: #f4f0d4;
    background: #fbf9e5;
}

.alert-box.success, .alert-box.success a {
    color: #3a7d3a;
}
.alert-box.success {
    border-color: #d6edcd;
    background: #e5f3e0;
}

Carousel

Html

<div class="owl-carousel carousel-name">
    <div class="item">
       {{ YOUR CONTENT }}
    </div>

    <div class="item">
       {{ YOUR CONTENT }}
    </div>
</div>

CSS - shortcodes.css

.carousel-name {
    /* YOUR STYLESHEET */
}

Javascript - theme.settings.js

For more options look here: http://owlgraphic.com/owlcarousel

$(".carousel-name").owlCarousel({
    /* DO SETTINGS HERE */
});

Portfolio

The AJAX Work Details load function not works offline in every Browser (only FireFox).

Add Portfolio Preview Item

Html

At first there is the preview grid <ul id="portfolio-grid"></ul> in the index.html file of your theme. To add a new portfolio preview item, copy the <li></li> with his content. Your normal preview thumbnail image must have a size of 460 x 420 px. If you want a long (double) preview image, add the class "double" to the <li></li> (<li class="double"></li>). The long (double) thumnail image must have a size of 920 x 420px.

<li>
    <a data-portfolio-link="link-to-portfolio-details.html" class="layer">
        <span class="plus">+</span>
        <div class="text">
            <h3 class="underline">
                {{ TITLE }}
            </h3>
            <span class="tag">
                <b>Client:</b> {{ CLIENT }}
            </span>
        </div>
    </a>
    <img src="path/to/thumnail.jpg" alt="" />
</li>

CSS - theme.css

#portfolio-grid .layer {
    background: rgba(112,168,218,0.9);
}

Portfolio Item Details

Html

Add a new html file to the "portfolio/" folder with the following code. Then replace the link of your portfolio preview item in the preview grid with your new filename: <a data-portfolio-link="your-new-file.html">...</a>.

<article>

    <!-- START BIG CAROUSEL -->
    <div class="owl-carousel portfolio-carousel">
        <div class="item" style="background-image: url('images/path/to/image.jpg');"></div>
        <div class="item" style="background-image: url('images/path/to/image.jpg');"></div>
        <div class="item" style="background-image: url('images/path/to/image.jpg');"></div>
    </div><!-- END BIG CAROUSEL -->

    <div class="row gutters">
        <div class="col span_4">
            <h2>{{ YOUR TITLE }}</h2>
            <span class="tag">
                <b>Client:</b> {{ YOUR CLIENT }}
            </span>
        </div>
        <div class="col span_8">
            <p>
              	{{ YOUR CONTENT }}
            </p>
            <a class="button">View Project</a>
        </div>
    </div>

    <!-- START SMALL CAROUSEL -->
    <div class="owl-carousel detail-carousel">
        <div class="item">
            <img src="images/path/to/image.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/path/to/image.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/path/to/image.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/path/to/image.jpg" alt="" />
        </div>
        <div class="item">
            <img src="images/path/to/image.jpg" alt="" />
        </div>
    </div><!-- END SMALL CAROUSEL -->

    <div class="row gutters">
        <div class="col span_6">
            <div class="float-icon">
                <div class="icon">
                    <i class="fa fa-heart"></i>
                </div>
                <h5>
                    {{ YOUR TITLE }}
                </h5>
                <p>
                    {{ YOUR CONTENT }}
                </p>
            </div>
        </div>
        <div class="col span_6">
            <div class="float-icon">
                <div class="icon">
                    <i class="fa fa-tablet"></i>
                </div>
                <h5>
                    {{ YOUR TITLE }}
                </h5>
                <p>
                    {{ YOUR CONTENT }}
                </p>
            </div>
        </div>
    </div>

</article>

CSS - theme.css

Add styles to the portfolio details by using the id "#portfolio-details".

#portfolio-details h2 {
    color: #ff0;
}

#portfolio-details a {
    color: #ff0;
}

A Video instead of the big slider

Just Replace:

<!-- START BIG CAROUSEL -->
<div class="owl-carousel portfolio-carousel">
    <div class="item" style="background-image: url('images/path/to/image.jpg');"></div>
    <div class="item" style="background-image: url('images/path/to/image.jpg');"></div>
    <div class="item" style="background-image: url('images/path/to/image.jpg');"></div>
</div><!-- END BIG CAROUSEL -->

with:

<!-- START VIDEO -->
<div class="video-container">
    <iframe src="//player.vimeo.com/video/22884674?title=0&byline=0&portrait=0&color=ffffff" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div><!-- END VIDEO -->

Load More Portfolio Items

Html

To add more items to the preview grid, by clicking the "load more" button at the end of the preview grid, you have to edit the file "load-more-01.html" in the "portfolio/" folder.
Add the <li>...</li> tags with your previews do you want to load. If you want to load more previews by clicking the button a second time, add/edit the file "load-more-02.html" in the "portfolio/" folder. You can add "load-more-00.html" files, up to 99.
The Button "Load More" not working if you open the index.html by double click and have a URL like file://../../index.html
Run it on your localhost or online server:
http://localhost/flato/index.html
http://yourdomain.com/flato/index.html.

<li>
    <a data-portfolio-link="link-to-portfolio-details.html" class="layer">
        <span class="plus">+</span>
        <div class="text">
            <h3 class="underline">
                {{ TITLE }}
            </h3>
            <span class="tag">
                <b>Client:</b> {{ CLIENT }}
            </span>
        </div>
    </a>
    <img src="path/to/thumnail.jpg" alt="" />
</li>

Blog

The AJAX Blog Details load function not works offline in every Browser.

Add Blog Post Item

Html

At first there is the preview grid <ul id="blog-grid></ul> in the blog.html file of your theme. To add a new blog post, copy the <li>...</li> with his content.

<li>
    <div class="image-container">
        <a data-blog-link="blog-link.html" class="layer">
            <span class="plus">+</span>
            <div class="button-container">
                <span class="button border">Read More</span>
            </div>
        </a>
        <img src="path/to/thumbnail.jpg" alt="" />
    </div>

    <div class="content">
        <div class="tags">
            <span class="tag">
                <i class="fa fa-tag"></i> {{ CATEGORY }}
            </span>
            <span class="tag">
                <i class="fa fa-clock-o"></i> {{ DATE }}
            </span>
        </div>
        <h3 class="underline">
            {{ TITLE }}
        </h3>
        <p>
            {{ CONTENT }}
        </p>
    </div>
</li>

CSS - theme.css

#blog-grid li {
    background: #fff;
}

Blog Post Details

Html

Add a new html file to the blog/ folder. Now replace the link of your blog post item in the preview grid with your new filename: <a data-blog-link="blog-details.html">...</a>.

	<article>

	    <!-- START BIG CAROUSEL -->
	    <div class="owl-carousel blog-carousel">
	        <div class="item" style="background-image: url('path/to/image.jpg');"></div>
	        <div class="item" style="background-image: url('path/to/image.jpg');"></div>
	        <div class="item" style="background-image: url('path/to/image.jpg');"></div>
	    </div><!-- END BIG CAROUSEL -->


	    <div class="row gutters">
	        <div class="col span_3">
	            <h2> {{ TITLE }} </h2>
	            <div class="tags">
	                <span class="tag">
	                    <i class="fa fa-tag"></i> {{ CATEGROY }}
	                </span>
	                <span class="tag">
	                    <i class="fa fa-clock-o"></i> {{ DATE }}
	                </span>
	                <span class="tag">
	                    <i class="fa fa-user"></i> {{ POSTED BY }}
	                </span>
	            </div>
	        </div>
	        <div class="col span_9">
	            {{ CONTENT }}
	        </div>
	    </div>

	</article>

CSS - theme.css

Add styles to the blog details by using the id "#blog-details".

#blog-details h2 {
    color: #ff0;
}

#blog-details a {
    color: #ff0;
}

Load More Blog Post Items

Html

To add more items to the blog grid, by clicking the "load more" button at the end of the preview grid, you have to edit the file "load-more-01.html" in the "blog/" folder.
Add the <li>...</li> tags with your blog posts do you want to load. If you want to load more previews by clicking the button a second time, add/edit the file "load-more-02.html" in the "blog/" folder. You can add "load-more-00.html" files, up to 99.
The Button "Load More" not working if you open the index.html by double click and have a URL like file://../../index.html
Run it on your localhost or online server:
http://localhost/swipe/index.html
http://yourdomain.com/swipe/index.html.

<li>
    <div class="image-container">
        <a data-blog-link="blog-link.html" class="layer">
            <span class="plus">+</span>
            <div class="button-container">
                <span class="button border">Read More</span>
            </div>
        </a>
        <img src="path/to/thumbnail.jpg" alt="" />
    </div>

    <div class="content">
        <div class="tags">
            <span class="tag">
                <i class="fa fa-tag"></i> {{ CATEGORY }}
            </span>
            <span class="tag">
                <i class="fa fa-clock-o"></i> {{ DATE }}
            </span>
        </div>
        <h3 class="underline">
            {{ TITLE }}
        </h3>
        <p>
            {{ CONTENT }}
        </p>
    </div>
</li>

Google Map

Html

You only need this HTML. Do all settings in "scripts/jquery.googlemap.js".

<div id="googlemap"></div>

CSS - shortcodes.css

#googlemap {
    width: 100%;
    height: 400px;
}

div.map-popup {
    position: relative;
    padding: 10px;
}

div.map-popup h2 {
    margin-bottom: 5px;
}

div.map-popup p {
    font-size: 1em;
}

PHP Contact Form

PHP - mail.php

To send emails via the contact form, go to the "php-mail" folder and just replace the value "$toAddresses" with your email adress in the "mail.php" file.

$toAddresses = array(
    'youremail@yourdomain.de',
);

Credits and Sources

Javascript and jQuery Plugins

1. jquery.1.9.1.min.js - jquery.org/license
2. modernizr.custom.97074.js - Modernizr 2.6.2 (Custom Build)
3. scripts/jquery.easing.1.3.js - http://gsgd.co.uk/sandbox/jquery/easing/
4. scripts/SmoothScroll.js - Balazs Galambosi and Michael Herf
5. scripts/respond.min.js - Scott Jehl, Paul Irish, Nicholas Zakas
6. scripts/owl.carousel.js - http://www.owlgraphic.com/owlcarousel/
7. scripts/jquery.fittext.js - http://daverupert.com
8. scripts/jquery.fitvids.js - http://css-tricks.com + Dave Rupert - http://daverupert.com
9. scripts/waypoints.js - Copyright (c) 2011-2014 Caleb Troughton

CSS Plugins

responsive.gs.12col.css - http://responsive.gs
owl.carousel.css - http://www.owlgraphic.com/owlcarousel/
Font Awesome 4.0.3 - by @davegandy - http://fontawesome.io

Images

http://unsplash.com
fotolia.com

As we said at the beginning, we are glad to help you, if you have any questions relating to this theme, we do our best to assist. artless

Support via eMail Go to Themeforest