Seosight

SEO, Digital Marketing Agency HTML Template

created: 08/03/2016
latest update: 12/22/2016
by: Crumina
crumina.net/
email: info@crumina.net

Welcome To Seosight - SEO, Digital Marketing Agency HTML Template

This document covers the installation and use of this theme and often reveals answers to common problems and issues - read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, feel free to pose them in the dedicated support section.

After unzipping the download pack, you'll find a template folder with all the files.

You can view this template in any browser. You can also view or edit the template without an internet connection.

In order to install template on your server open your FTP Client (like Filezilla) or use you cpanel directly, and upload the content of the Template on your server root.

Once you are ready, go to www.yourdomainname.com/index.html

Bootstrap

This Template has a Responsive layout and is based on the Bootstrap Grid. For more information about this visit Bootstrap.

The default Bootstrap grid system utilizes 12 columns, making for a 1170px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.

Basic Grid HTML

For a simple two column layout, create a .container and add the appropriate number of .col-md* columns.

Given this example, we have .col-md-4 and .col-md-8, making for 12 total columns and a complete row

<div class="container">  
    <div class="col-md-4">...</div>  
    <div class="col-md-8">...</div>  
</div>

Nesting Columns

To nest your content with the default grid, add a new .container and set of .col-md* columns within an existing .col-md* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

<div class="container">  
    <div class="row">
        <div class="col-md-9">  
            Level 1 column  
            <div class="row">  
                <div class="col-md-8">Level 2 column</div>  
                <div class="col-md-4">Level 2 column</div>  
            </div>  
        </div>  
        <div class="col-md-3">  
            Level 1 column  
        </div>  
    </div>
</div>

CSS files, that load in <head> section of page in current template are following:

    <link rel="stylesheet" type="text/css" href="css/fonts.css">
    <link rel="stylesheet" type="text/css" href="css/crumina-fonts.css">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/grid.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">

<link rel="stylesheet" type="text/css" href="css/jquery.mCustomScrollbar.min.css"> <link rel="stylesheet" type="text/css" href="css/swiper.min.css"> <link rel="stylesheet" type="text/css" href="css/primary-menu.css"> <link rel="stylesheet" type="text/css" href="css/magnific-popup.css">

fonts.css, crumina-fonts.css - icon fonts used in the theme
normalize.css - proper reset styles for browsers
grid.css - Bootstrap grid
base.css - basic stylesheet
blocks.css - styles for for blocks
layouts.css - styles for layouts
modules.css - styles for modules
widgets-styles.css - styles for widgets
jquery.mCustomScrollbar.min.css - styles for scrollbar of aside panel
swiper.min.css - core styles for theme slider
primary-menu.css - main menu with dropdowns and megamenus styles
magnific-popup.css - styles for lightbox plugin.

Javascript files, that load right before closing <body> tag of page in current template are following:

<!-- JS Script -->
<script src="js/jquery-3.3.jquery.mousewheel.js"></script>
<script src="js/crum-mega-menu.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<script src="js/theme-plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/velocity.js"></script>
<script src="js/ScrollMagic.min.js"></script>
<script src="js/animation.velocity.js"></script>
<!-- ...end JS Script -->

jquery-3.3.jquery.mousewheel.js - latest version of jQuery library connected
crum-mega-menu.js - mobile menu and megamenu generation
swiper.jquery.min.js - main slider library used in template - Homepage and API
theme-plugins.js - JS pluginsand utilities used in the theme. You can find full version of this plugin in 'Uncompressed' folder of the theme package
main.js - main custom javascript file of template
velocity.js, ScrollMagic.min.js, animation.velocity.js - plugins for row backgrounds animation.

There are used SVG icons instead of the IMG icons in the theme. The most often used of them are arrow-left, arrow-right and to-top icons. They are included inline in the source of each HTML page at the bottom before include JS files section.

<svg style="display:none;">
    <symbol id="arrow-left" viewBox="122.9 388.2 184.3 85">
        ...
    </symbol>
    <symbol id="arrow-right" viewBox="122.9 388.2 184.3 85">
        ...
    </symbol>
    <symbol id="to-top" viewBox="0 0 32 32">
        ...
    </symbol>
</svg>

For creating Seosight we used Gulp.

You can find Gulp files with modules and tasks in the root of the project in gulpfile.js file.

In the root of the project you can also find package.json file, where all plugins and their versions are listed.

The compiled HTML website is located in 'HTML' folder.

All .scss files are located in saas/../ folder.

In "saas/base" folder you will find basic, global files with styles for the entire project, namely:

global.scss - includes styles for main template conponents such as "body", "a", "p", "table", "ol", "ul", "form", "input" etc;
helper.scss - includes all additional classes and their styles used for building pages of the project;
table-of-content.scss - includes table of content for "saas" folder;
typography.scss - includes typography styles of the project;
variables.scss - lists all global variables and their styles, such as main colors of the template, size variables and font families.

In "saas/blocks/..", "saas/layouts/..", "saas/modules..", "saas/widgets.." you will find styles for all blocks, layouts and widgets available in the project.

For your convenience all styles files are divided blockwise. There you can edit styles and responsive settings for the particular block.

The detailed structure of those files is provided in saas/base/_table-of-content.scss file.

In the root of the saas/.. folder you will find:

fonts.scss - style file of the font icons Font Awesome 4.5.0;
grid.scss - includes styles for the modular grid of the project;
normalize.scss - customizable CSS file, that makes browsers display all elements more consistently in accordance to the modern standards;

The following materials were used in the template.

Google Fonts

Before you start editing the template be sure to install the font.

Varela Round

Graphics

All flat filled outline illustration are included in the HTML files. Stock photos are not included in psd files. The following provides links

There were also used materials and images of the great designers:

When someone submits his email via Newsletter form, it is automatically recorded in the email.csv file.

This file can be used to import all submitted emails into any mailing system like Mailchimp, Mailjet etc.

import.php file - ensures functionality of email.csv file. It is a mandatory file and it must be added together with email.csv file in the root of your html folder.

If you would like to change thanking messages of the newsletter form, you must edit js/form-actions.js file on line 18.

In order to setup email submission via the contact form, you must edit send_mail.php file and enter your email address on line 3.

In order to chnage thanking message, you must edit js/form-actions.js file on line 44.

In version 1.3. we added sticky header function, that makes page scroll more convenient. Sticky header is available in 4 animation variants - Slide, Swing, Flip, Bounce. You can choose the one you like most.

In ..js/main.js file find the following code:

$header.headroom(

    {

        "offset": 210,

        "tolerance": 5,

        "classes": {

            "initial": "animated",

            "pinned": "swingInX",

            "unpinned": "swingOutX"

        }

    }

);

In order to change animation style you need to use the strings below instead of the default ones:

for Slide:

 "pinned": "slideDown",

 "unpinned": "slideUp"

for Swing:

"pinned": "swingInX",

"unpinned": "swingOutX"

for Flip:

"pinned": "flipInX",

"unpinned": "flipOutX"

for Bounce:

"pinned": "bounceInDown",

"unpinned": "bounceOutUp"

If you haven't updated to version 1.3., but want to use sticky header function, you have to add id="site-header" in the page layout, namely into

<header class="header">...</header>

in order to get

<header class="header" id="site-header">...</header>

Also you have to update the following files:

..base.css - basic stylesheet

..blocks.css - styles for for blocks

..layouts.css - styles for layouts

..modules.css - styles for modules

..widgets-styles.css,

..js/theme-plugins.js,

..js/main.js .

More detailed documentation on sticky header you will find by following the links below:

http://wicky.nillia.ms/headroom.js/

https://github.com/WickyNilliams/headroom.js

In order to deactivate sticky header option, it is enough to remove id="site-header" from the page layout, namely from

<header class="header" id="site-header">...</header>

in order layout gets this look -

<header class="header">...</header>

In version 1.3 there was added sticky footer option. In order to activate it, you need to add class "js-fixed-footer" + id="site-footer" into

<footer class="footer">...</footer>

in order to get this look:

...
<footer class="footer js-fixed-footer" id="site-footer">...</footer>
...

If you haven't updated to version 1.3, but want to use sticky footer option, you need to do the following:

1) Add class "js-fixed-footer" + id="site-footer" into page layout, namely into

<footer class="footer">...</footer>

in order to get the next look:

...
<footer class="footer js-fixed-footer" id="site-footer">...</footer>
...

2) Wrap all page content AFTER

<div class="mCustomScrollbar" data-mcs-theme="dark">...</div>

and BEFORE

 <footer class="footer js-fixed-footer" id="site-footer">...</footer>

into

<div class="content-wrapper"></div>

in order to get the next layout structure:

....

<div class="mCustomScrollbar" data-mcs-theme="dark">...</>

<div class="content-wrapper">

 //...CONTENT...//

</div>

<footer class="footer js-fixed-footer" id="site-footer">...</footer>

...

3) Update the main style and js files: base.css, blocks.css, layouts.css, modules.css, widgets-styles.css
in css folder and ..js/main.js and enjoy the sticky footer function in your project :)

In version 1.3 there were made changes in the main slider of the template. For your convenience there were added addional classes for positionning content inside the slider, namely:

.slider-content-fullwidth - content occupies full slider width;

.slider-content-half-width - content occupies half of the slider width.

One of the main features of the version 1.3. is integration of the RTL version into the Seosight template.

In order to activate RTL version you need to find and uncomment the following code in the layout:

...

<!--Styles for RTL-->


<!--<link rel="stylesheet" type="text/css" href="css/rtl.css">-->

...


До вида: 

...

<!--Styles for RTL-->


<link rel="stylesheet" type="text/css" href="css/rtl.css">

...

If you haven't updated to version 1.3., but want to use RTL version, you need to do the following:

download ..css/rtl.css file,
upload it in your project into ..css/* folder
and load it in page layout UNDER THE MAIN STYLE FILES :

...The Style Files...

...

<!--Styles for RTL-->


<link rel="stylesheet" type="text/css" href="css/rtl.css">

...

Seosight

SEO, Digital Marketing Agency HTML Template

Welcome

Installing template

HTML Structure

Bootstrap

Basic Grid HTML

Nesting Columns

CSS Files

Javascript Files

SVG inline icons

Gulp javascript task runner

SASS, SCSS

Sources and Credits

Google Fonts

Graphics

There were also used materials and images of the great designers:

Newsletter form

Contact form

Sticky header

Sticky footer

Main slider

RTL styles