Some very useful Tips how to work better with the Theme, please read!

Within the download you'll find the following directories and files.

HTML
│
├─  CSS
│  │
│  ├──  font-awesome
│  │
│  └──  font
│  │ 
│  └──  themecss
│
├─  header
│
├─  ico
│
├─  image
│  │
│  ├─  demo
│  │
│  └─  theme
│
├─  js
│  │
│  ├─  bootstrap
│  │
│  └─  countdown
│  │
│  ├─  datetimepicker
│  │
│  ├─  dcjqaccordion
│  │
│  ├─  jquery-ui
│  │
│  ├─  lightslider
│  │
│  └─  owl-carousel
│  │
│  └─  themejs
│  │
│  └─  unveil
│
├─  SASS
│
├─  php
│
├─  index.html
│
└─  other-files.html

The template is based on Bootstrap 3 Framework - http://getbootstrap.com

<div class="row">
  <div class="col-md-12">
        Level 1 column
        <div class="row">
            <div class="col-md-6">Level 2</div>
            <div class="col-md-6">Level 2</div>
        </div>
    </div>
</div>

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. If you need more information about the Main Grid, please visit this site: http://getbootstrap.com/css/#grid

The organization of the CSS is one of our priorities. These are the CSS file we're using in the template.

Content of the Folder css

Please note: all of these files below are required and always needed.

 bootstrap
   This is the Main CSS File from Bootstrap3

 font-awesome
   This is the css file that will take care of the PortKey icons buil with Fontawesome.

 themecss
   Here you'll find the CSS Files for Megamenu css, Listing tabs css and Lib css
   
 theme.css
   This is the Main CSS File for the PortKey Theme with all necessary Styles and Overrides. For Colors of the Theme use "theme-blue.css" or "theme-red.css".

Content of the Folder themecss

Please note: all of these files below are optional and not needed if you decide to drop one of these Features.

 so_megamenu.css
   CSS File for the Module Megamenu

 so-categories.css
   CSS File for the Module Categories 

 so-listing-tabs.css
   CSS File for the Module Listing Tabs 

 lib.css
   Here you'll find the CSS Files for jGrowl css and Magnific Popup css

   

These are the SASS file we're using in the template.

Content of the Folder SASS

Please note: all of these files below are required and always needed.

 variables
   Override Boostrap variables BEFORE calling _boostrap.scss
   
 Bourbon
   A Lightweight Sass Tool Set - http://bourbon.io/

 directional
   Here you'll find the SASS Files for bootstrap_breakpoints SASS, Directional SASS and rem SASS
   1.Bootstrap breakpoints - Variables for responsive design
   2.Directional - Makes supporting both left-to-right (LTR) and right-to-left (RTL) easy
   3.Rem - The ultimate PX/REM mixin

 homepage
   Here you'll find the SASS Files for Header SASS, Home Page SASS. 
Use separately for each Home page layout.

 theme
   Here you'll find the CSS Files for _productlist.scss, _productdetail.sass, _module.scss ... It is a file that is common to layouts
   
   
 theme.scss
   This is the Main SASS File for Home page 1 with all necessary Styles and Overrides. 

 home2.scss
   This is the Main SASS File for Home page 2 with all necessary Styles and Overrides. 

 home3.scss
   This is the Main SASS File for Home page 3 with all necessary Styles and Overrides. 

 home4.scss
   This is the Main SASS File for Home page 4 with all necessary Styles and Overrides.
   

jQuery - is a Javascript library that greatly reduces the amount of code that you must write. For more information, please visit jQuery.com.

The initialization of the elements, libs and features is made by the file application.js, in the JS folder.

Content of the Folder js

Please note: one of these files below (bootstrap or bootstrap.min.js) are required and always needed.

 Bootstrap
   This is the Main jQuery File from Bootstrap3

 Countdown
   Here you'll find the jQuery Files for the Countdown plugin

 owl-carousel
   Here you'll find the jQuery Files for the Owl Carousel plugin

 Datetimepicker
   Here you'll find the jQuery Files for the Datetimepicker plugin

 Dcjqaccordion
   Here you'll find the jQuery Files for the Dcjqaccordion plugin

 Jquery-ui
   Here you'll find the jQuery Files for the jquery-ui plugin

 Lightslider
   Here you'll find the jQuery Files for the Lightslider plugin

 Unveil
   Here you'll find the jQuery Files for the unveil plugin
   
 themejs
   Here you'll find the jQuery Files for Megamenu, Toppanel, Lib ...
   

Content of the Folder themejs

Please note: most of these files below are optional and not needed if you decide to drop one of these Features.

 application.js
   VERY IMPORTANT: all jQuery Plugins are initialised within this File!

 so_megamenu.js
   jQuery File for the Megamenu

 toppanel.js
  jQuery File for Top Menu

 libs.js
  Here you'll find the jQuery Files for Cookie Plugin, elevateZoom, Magnific Popup ...
   
   

This Theme has various Style options for different Kinds of Layouts.

PortKey comes with 5 predefined color schemes. Default color scheme already included in theme.css. If you want to change scheme, then you should include one of CSS files from html/css/ into your markup:

<!-- styles Default = Orange -->
<link rel="stylesheet" href="css/theme.css">

<!-- make sure that color scheme file new alternative main styles file -->
<link rel="stylesheet" href="css/theme-blue.css">

Also you can create your own scheme. To do that you need to create a copy one of the color scheme files ( html/sass/variables/) and edit it by replacing color to another one.

If you are familiar with SASS:

Right Way:

You need to change theme color variable $linkColor: #F4A137 in html/sass/variables/_orange.scss(import in file theme.scss) and compile html/sass/theme.scss to html/css.

Fonts

To use another Font, please choose your new Font at the Google Font Site, include the given Style Tag inside the Head Section of the Theme.

In the default Theme we have used this Code for example:

<link href='https://fonts.googleapis.com/css?family=Libre+Franklin:400,500,600,700,800&display=swap' rel='stylesheet' type='text/css'>

The Main Layout of the Theme can easily be changed by adding or removing one CSS Class to the Body.

Use this for the Wide Version:

<body>
  <div id="wrapper" class="wrapper-full">
    ...
  </div>
</body>

Use this for the Boxed Version:

<body>
  <div id="wrapper" class="wrapper-boxed">
    ...
  </div>
</body>

You can define the Background for the Boxed Version by adding a class to the Body.

Available Classes for the Body are pattern-1 - pattern-45.

<body class="pattern-1">
  ...
</body>

The template has 8 headers. If you want to use any header you have to go, for example, to html\header\header2.html. See demo for example: Header style > Custom header 1

PortKey is using the default Bootstrap menu system with some changes for Mega Menu.

The menu is well commented and you can understand the structure quite easy. Check one of the demo pages to see the structure.

PortKey Icons and Font Awesome Icons can use the classes bellow. Please check the demo to see how you can combine them.

Size: .fa-2x, .fa-3x, .fa-4x, .fa-5x

Color: .color-default, .color-success, .color-info, .color-warning, .color-danger

PortKey Icons

We put together with the help of Fontastic a list of over 2130 icons and made a font for you to use in your design. The default structure of the icon can be seen bellow.

<i class="icon gfx-atom"></i>
					

View Icon Classes

Font Awesome Icons

For many Elements we use the great Font Awesome which gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS..

See all Icons or See some examples in Code

We use two Main Sliders in this Theme, the OWL Carousel.

OWL Carousel

Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.. The OWL Carousel must be initialised in the jQuery File application.js. Here is the default structure of the carousel:

<div class="class="owl-carousel" data-nav="no" data-dots="yes" data-margin="20" data-items_md="4" data-items_sm="3" data-items_xs="1" >
	<div class="class="carousel">
		<div class="class="carousel-item">Carousel Item Content</div>
		<div class="class="carousel-item">...</div>        
		<div class="class="carousel-item">Carousel Item Content</div>
	</div>
</div>
					

AS you can see the carousel has some option that can be added via data-*="". Here are the options:

• data-nav="no" - Options: yes or no - Show/Hide navigation arrows
• data-dots="yes" - Options: yes or no, Show/Hide dots navigation.
• data-margin="20" - Options: number, margin-right(px) on item.
• data-items_md="4", data-items_sm="3", data-items_xs="1" - The number of items you want to see on the screen:items_md >992px, 992px>items_sm >480px, 480px>items_xs>0

Please see the demo for examples of how you can customize your carousel and sliders.

The Lightbox which is integrated in the Theme runs with the Magnific Lightbox, a awesome jQuery Plugin to handle different Media Types. The Lightbox is initialised in the application.js. For more Informations please have a look at the Documentation:

Documentation

There are 12 effects , and you can choose one of them

To change your desired effect, find the code:

<div id="wrapper" class="wrapper-full banners-effect-7>
  ...
</div>

and then replace the number "7" with one of the number from 1 to 12. Demo 12 effects

We have added a lot of Sample Pages to give you some Inspiration how your Content maybe could look like. Please see the different HTML Pages.

We have used the following Recources and Scripts: