Outsourcing
  • Facebook
  • Twitter

Fishtank – Responsive HTML5 Template


Support Our Blog

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to start new ticket on this page. Thanks so much!

 

Scope of free support

 

We can help you with:

  1. Responding to questions or problems regarding the item and its features
  2. Fixing any discovered item’s bugs
  3. Providing updates to ensure compatibility with new software versions

HTML Structure


This theme is built upon bootstrap framework and is fully responsive. It adapts to window resolution and looks good on all devices including iPad and iPhone.
See for yourself (resize your browser).

If you would like to read more
about bootstrap framework click here :

Bootstrap Documentation

Grid System and Single row structure

The default Bootstrap grid system utilizes 12 columns. It’s responsive grid and adapts to viewport. Below 767px viewports, the columns become fluid and stack vertically. The fluid grid system uses percents instead of pixels for column widths. Each row always include 12 columns (for example col-md-8 + col-md-4 = col-md-12).
Bootstrap documentation: here

Basic grid HTML:

Page structure

Below you will find default page structure :


CSS Files and Structure


If you would like to edit the color, font, or style of any elements, you would do the following:

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.

I.E.

So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.

Colors

The theme includes a css file wich you can use to edit the colors.
You just need to add the corresponding CSS file to the head of the page like this:

Main Menu structure

Just change brand name, upload your logo to images/content/ folder and you’re ready to go!

In order to create mega menus read the documentation here:

Yamm 3 Documentation

Icons

We’ve included 360+ font icons.

Awesome Icons – http://fontawesome.io/icons/

HTML markup:

CSS Files & Structure

We’ve included 2 files.
bootstrap.css contains Bootstrap 3 Library.
style.css file contains general styles.

1. Snap.js
2. Top Container with Shadows
3. Flexslider
4. Owl Carousel
5. Section Headers
6. Image Overlay
7. Tabs
8. Products
9. Promo Section
10. Numbered Rows
11. Collections
12. Flip Containers
13. Team Members Boxes
14. Testimonials
15. Logo Slider
16. Lists
17. Tags
18. Popover
19. Footer
20. Icon Boxes
21. Media Boxes
22. Vertical Image Section
23. Slide In Sections
24. Portfolio Gallery Buttons
25. Photo Gallery
26. 404 Text
27. Blog
28. Counter Blocks
29. Graph Boxes
30. Progress Icons
31. Google Maps
32. One Pager
33. Twitter
34. Animations
35. Magnific Popup

Utilities

Utility classes are low-level structural and positional traits. Utilities can be applied directly to any element, multiple utilities can be used tohether and utilities can be used alongsie component classes.

Utilities are intended for frequently used CSS properties and patterns, like: floats, containing floats, vertical alignemnt, text tryncation. Relying on utilities can help to reduce repetition and provide consistend implementations.

  • Fishtank uses utilities for the following categories:
  • Typography
  • Display Types
  • Paddings
  • Margins
  • Line height
  • Borders
  • Colors
  • Transform
  • Section elements

Features



Media Sections


Fishtank supports media sections with Parallax, KenBurns effect and videos.

Parallax Section

We are using stellar.js for the parallax effect. Check their documentation to check which attributes you can use in each parallax section.
http://markdalgleish.com/projects/stellar.js/docs/

Our custom data-attributes for the parallax section are:

  • data-height: Define the minimun height for the sections
  • data-type: Type of Media Section (parallax/kenburns/video)
  • data-image: Background image for the section.
  • data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. This will help you with the bandwidth, you’re welcome! 🙂

Ken Burns Sections

KenBurns section supports one or more images that you should add inside .media-section-image-container

Our custom data-attributes for the kenburns section are:

  • data-height: Define the minimun height for the sections
  • data-type: Type of Media Section (parallax/kenburns/video)
  • data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. Kenburns it too much for ipads, iphones and so on, so we allow you to fallback to a normal image section. This way your browser won’t crash 🙂

Video Sections

We recommend you to use html5 video instead of vimeo, since in some specific browsers the sound won’t be muted.

Our custom data-attributes for the video section are:

  • data-height: Define the minimun height for the sections
  • data-type: Type of Media Section (parallax/kenburns/video)
  • data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. Phones don’t autoplay video, so we just replace it for an image

Boxes


Fishtank comes with several types of boxes:

Icon Boxes

  • Icon Left:
    Icon box left

    Icon box left

    HTML markup:

  • Icon Right:
    Icon box right

    Icon box right

    HTML markup:

Media Boxes

  • Video (with Magnific Popup):
    Video Box

    Video Box

    HTML markup:

  • Image (with Magnific Popup):
    Image Box

    Image Box

    HTML markup:

  • Text:
    Text Box

    Text Box

    HTML markup:

Counter Boxes

    Counter Box

    Counter Box

    HTML markup:

Count Down Boxes

    Countdown Box

    Countdown Box

    HTML markup:

Numbered Boxes

    Numbered box

    Numbered box

    HTML markup:


Portfolio


Filters

Portfolio filters

Portfolio filters

HTML markup

Structure

  • 4 Columns:
    portfolio-3-cols

    Portfolio 4 columns

    Portfolio 4 columns

    HTML markup

  • 3 Columns:
    Portfolio 3 Columns

    Portfolio 3 Columns

    HTML markup

  • 2 Columns:
    Portfolio 2 Columns

    Portfolio 2 Columns

    HTML markup

  • Single Column:
    Portfolio Single Column

    Portfolio Single Column

    HTML markup

    …

Magnific Popup


Static state

Static state

Hover state

Hover state

HTML markup


Person Box


Team Member Box

Person Box

Person Box

HTML markup


Charts


Progress Bars

This theme has 2 types of layout and all you have to do is change one class. Also, everything is done via data attribute.

Stripped progress bar
  • aria-valuenow: Percentage this bar should have
  • aria-valuemax: Max value
  • aria-valuemin: Min value

Javascript


All javascripts are placed in folder /js. In main.js file we implement all functions calls.
This theme uses following Javascript files:

  • Bootstrap v 3 framework (powerful front-end framework for faster and easier web development)
  • jQuery v1.10.2 (A fast javascript library that Foodtruckifies how to traverse HTML documents, handle events, perform animations.)
  • jQuery FlexSlider v2.2.0
  • GMAP3 Plugin for JQuery v. 5.1.1
  • jQuery.appear
  • jQuery Stellar
  • jQuery tweet
  • Modernizr 2.0.6
  • PageScroller
  • final-countdown.js
  • snap.js
  • device.js 0.1.58
  • chart.js

Google Map (GMAP3 Plugin)

This is google map with custom marker, you can define couple parameters:

  • data-location – address to show
  • data-height – map height (if undefined height will be 220px)
  • data-offset – by how many map should be repositioned from marker center point (default -30)

It uses gmap3 plugin.
Documentation: here
HTML Markup:

All javascript code can be found in js/main.js file.

jquery.appear

This plugin call function when element appear in viewport. This is used in custom animation, progress bars, counter timer.
Documentation: https://github.com/bas2k/jquery.appear/

Charts.js

This plugin is used to make graphics.
Documentation: http://www.chartjs.org/


Flexslider


Main Slider with inset container (with Progress Bar):

HTML markup

Full Screen Slider (with Progress Bar):

HTML markup

Arrow Types:

HTML markup

ct-flexslider–arrowType1 – default one
ct-flexslider–arrowType2
ct-flexslider–arrowType3

Controls Type:

HTML markup

ct-flexslider–controls1 – default
ct-flexslider–controls2
ct-flexslider–controls3

Flexslider

Content / Images Slider.
Each parameter can be defined as data attribute :

  • data-namespace
  • data-selector
  • data-animation
  • data-easing
  • data-direction
  • data-reverse
  • data-animationloop
  • data-smoothheight
  • data-startat
  • data-slideshow
  • data-slideshowspeed
  • data-animationspeed
  • data-initdelay
  • data-randomize
  • data-thumbcaptions
  • data-pauseonaction
  • data-pauseonhover
  • data-pauseinvisible
  • data-usecss
  • data-touch
  • data-video
  • data-controlnav
  • data-directionnav
  • data-prevtext
  • data-nexttext
  • data-keyboard
  • data-multiplekeyboard
  • data-mousewheel
  • data-pauseplay
  • data-pausetext
  • data-playtext
  • data-itemwidth
  • data-itemmargin
  • data-minitems
  • data-maxitems
  • data-move
  • data-allowoneslide
  • data-controlscontainer
  • data-manualcontrols
  • data-sync
  • data-asnavfor

Read the documentation here:

Flexslider Documentation

And js initialization (js/main.js file), there you can change slider parameters:


Owl Carousel


Fishtank comes with Owl Carousel component – plugin documentation available here

How to use it

To enable plugin on your page include the following HTML code to your page:

Set up your HTML

You don’t need any special markup. All you need is to wrap your divs(owl works with any type element) inside the container element

. Class “owl-carousel” is mandatory to apply proper styles that come from owl.carousel.css file.

Now call the Owl initializer function and your carousel is ready.

Customizing

  • Options

    All of the options below are available to customize Owl Carousel

  • Callbacks

  • Defaults

    Carousel default settings

  • Custom Events

    Owl Carousel handles a few basic events. Mainly use them for custom navigation.

  • Owl Data methods

    To use Owl Carousel $.data use delegate function.


Contact Form


Template comes with ready to use:

  • Contact Form
  • Newsletter Form

All needed files are in /form directory.
Remember to includeon page.
To configure form just edit form/config.php and change e-mails to your own :

That’s it!

Contact Form

HTML Markup:


Twitter Feed


This is live twitter feed. This plugin will grab your latest tweets and display them on page.
Configuration: – just edit twitter/config.php file :

Where can I get these keys, tokens, etc?

Twitter API requires authentication to display tweets from your account.
To twiiter feed work you need to create the ‘application’
and generate 4 special keys for your twitter account via https://dev.twitter.com/apps:
– Consumer key (key)
– Consumer secret (secret)
– Access token (token)
– Access token secret (token_secret)
Video tutorial : “How to create Twitter App”
http://vimeo.com/60891535


Sources & Credits


The following sources and files have been used to build up this theme


Elite Author
We are elite
CreateIT

Check our blog

Who we are

Hi, we are createIT. We create IT. Web applications and websites to be precise.

And we are REALLY good at it.

Get to know us at www.createIT.pl
Thanks for buying!