Ashade Template

Thank you for buying Ashade Photography by Shadow-Themes.
If you did not find answer on your question in this documentation please contact our support team and we will be glad to help you.

More information about Files and Folders


CSS

Contains all CSS file of theme styles and CSS files for JS plugins.

Fonts

Contains Line Awesome icon font, that is used by template.

Img

Contains image placeholders and you can store in your own images.

JS

Here you can find all JS-files, that are used by template.

Video

Contains videos.



about.html

Content page template.

contacts.html

Content page template.

gallery-adjusted-2columns.html

Image Gallery in Adjusted 2 Columns layout

gallery-adjusted-3columns.html

Image Gallery in Adjusted 3 Columns layout

gallery-adjusted-4columns.html

Image Gallery in Adjusted 4 Columns layout

gallery-bricks-1x2.html

Image Gallery in Bricks 1x2 layout

gallery-bricks-2x3.html

Image Gallery in Bricks 2x3 layout

gallery-grid-2columns.html

Image Gallery in Grid 2 Columns layout

gallery-grid-3columns.html

Image Gallery in Grid 3 Columns layout

gallery-grid-4columns.html

Image Gallery in Grid 4 Columns layout

gallery-justified.html

Image Gallery in Justified layout

gallery-masonry-2columns.html

Image Gallery in Masony 2 Columns layout

gallery-masonry-3columns.html

Image Gallery in Masony 3 Columns layout

gallery-masonry-4columns.html

Image Gallery in Masony 4 Columns layout

gallery-ribbon-large.html

Image Gallery in Ribbon layout with Large images

gallery-ribbon-medium.html

Image Gallery in Ribbon layout with images 50% height of window

gallery-ribbon-vertical.html

Image Gallery in Ribbon layout that scrolls vertically

gallery-slider-fade.html

Fullscreen Image Slider with Fade effect

gallery-slider-parallax.html

Fullscreen Image Slider with Parallax effect

gallery-slider-simple.html

Fullscreen Image Slider

home02.html

Home Template with background image gallery

home03.html

Home Template with static background image

index.html

Home Template with background video

maintenance.html

Maintenance Page with count down timer and contact information

services.html

Content page with Services element

testimonials.html

Content page with Tetimonials Grid and contact form

typography.html

Content page with example of using typography

works-adjusted-2columns.html

Works listing page in Adjusted 2 Columns layout

works-adjusted-3columns.html

Works listing page in Adjusted 3 Columns layout

works-adjusted-4columns.html

Works listing page in Adjusted 4 Columns layout

works-grid-2columns.html

Works listing page in Grid 2 Columns layout

works-grid-3columns.html

Works listing page in Grid 3 Columns layout

works-grid-4columns.html

Works listing page in Grid 4 Columns layout

works-masonry-2columns.html

Works listing page in Masonry 2 Columns layout

works-masonry-3columns.html

Works listing page in Masonry 3 Columns layout

works-masonry-4columns.html

Works listing page in Masonry 4 Columns layout

works-ribbon-large.html

Works listing page in Ribbon layout with Large images

works-ribbon-medium.html

Works listing page in Ribbon layout with images 50% height of window

works-ribbon-vertical.html

Works listing page in Ribbon layout that scrolls vertically

works-slider-fade.html

Fullscreen Works listing Slider with Fade effect

works-slider-parallax.html

Fullscreen Works listing Slider with Parallax effect

works-slider-simple.html

Fullscreen Works listing Slider

mail.php

File, that allows to send email via contact form

More about CSS Folder CSS and Styles


default-skin

Include skin styles for Photoswipe Lightbox

justifiedGallery.min.css

Styles for Justified Gallery Plugin

line-awesome.css

Styles for Line Awesome font icons

photoswipe.css

Major styles for Photoswipe Lightbox

responsive.css

Template styles file for responsive layouts

style.css

Main template styles file

tiny-slider.css

Tiny Slider styles, that are used on pages, where is Testimonials Carousel (about.html for example)




At the beginning of main style.css file it contains Table of Contents that will help you to navigate through css. Every section has comment label named with the same name as in Table of Contents.

How to make your own layout Work with Grid

Ashade Template include CSS classes to build grid. For example to create grid row with two columns just use that code:

<div class="ashade-row"> <div class="ashade-col col-6"> ... Your Column Content ... </div&rt; <div class="ashade-col col-6"> ... Your Column Content ... </div> </div>

For columns you can use this class names:
    .col-12 - 100% of row width;
    .col-9 - 75% of row width;
    .col-8 - 2/3 of row width;
    .col-6 - 50% of row width;
    .col-4 - 1/3 of row width;
    .col-3 - 25% of row width;
    .col-2 - 1/6 of row width

You can combinate columns as you want, but in result in one row must be 12 columns. For example you can add .col-4 three times, or two .col-3 and one .col-6, etc.

Also you can use for .ashade-row additional classes such as:
    .ashade-no-gap - Remove spacing between columns
    .ashade-small-gap - Reduce spacing between columns
    .ashade-row-middle - Align columns content vertically to center
    .ashade-row-fullheight - Stretch row to screen height

If you stretch your row you can add alignment to .ashade-col by using this classes:
    .ashade-col.align-top - To align items to top
    .ashade-col.align-middle - To align items to middle
    .ashade-col.align-bottom - To align items to bottom

In JS folder you will find next files Javascript


ashade-ribbon.js

Script, that must be included to your html, when you need Gallery or Works page in Ribbon layout

ashade-slider.js

Script, that must be included to your html, when you need Gallery or Works page in Slider layout

core.js

Main script file of template

gsap.min.js

GSAP Animation Plugin

jquery.justifiedGallery.min.js

Justified Gallery plugin

jquery.lazy.min.js

Lazy Image Loader plugin

jquery.min.js

jQuery Javascript library which is necessary for most other scripts to work

masonry.min.js

Plugin to make Masonry Grid layout

photoswipe.min.js

Main part of Lightbox Plugin.

photoswipe-ui-default.min.js

Additional part of Lightbox Plugin.

tiny-slider.js

Tiny Slider Plugin. It this template used for Testimonials Carousel.

How to receiving emails from your clients Contact Form Setup

To setup contact form and start to receiving emails from your clients you need to edit mail.php file. In this file in line #10 you can see string

$mail_to = "your@email.com";

Just replace your@email.com to your email address leaving quotes. That's all, now when your client fill contact form and press "Send Message" you will receive an email with his message and contact information.

Links to resources and special thanks Sources and Credits