Table of Contents

  1. Introduction
  2. Support and Suggestions
  3. Package Content
  4. HTML version
  5. Gulp version
  6. FAQ
  7. Plugins
  8. Extra content

Introduction

Welcome to the documentation of Material style template. In this guide you will find everything needed to install and configure all aspects of the template.

Support and Suggestions

We are preparing a support center for all users of Material Style template. Meanwhile you can send all your questions to the following email: adrigm@razonartificial.com

It is recommended to always look in the manual to see if your question is resolved in the documentation.

Package Content

Package content is:

HTML version

The assets folder contains all the necessary files separated into different folders: css, fonts, img and js. The other folders contains the same html elements in each of them, but processed for the twelve types of headers that offers Material Style.

Install template

  1. Upload the asset folder to your server.
  2. Choose a header type and upload the contents of the chosen folder to your server.
  3. Ready!

You should get something like this:

- www/
- assets/
- index.html
- blog-sidebar.html
- ...

Change color

You have two ways to do this:

Method 1 - Change head of html files

  1. Open an html file
  2. Find the following line: <link rel="stylesheet" href="assets/css/style.light-blue-500.min.css" />
  3. Change light-blue by any color in the color list.
  4. You can change the brightness of the color with the values: 300, 400, 500, 600, 700 and 800

Color list

'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'brown', 'grey', 'blue-grey'

Example:

<link rel="stylesheet" href="assets/css/style.red-700.min.css

Method 2 - Change stylesheet

If you do not want to change all html files, you can only change the stylesheet

  1. Go to assets/css folder.
  2. Choose your stylesheet
  3. Rename to style.light-blue-500.min.css

Gulp version (recommended)

The gulp version allows to generate a version of the custom template in a simple way.

Software

You need to install:

  1. Git - https://git-scm.com/
  2. Node - https://nodejs.org/

Once installed open the terminal and execute the following command.

npm install -g gulp-cli

Now follow the steps below to get a custom version.

  1. At the terminal, go to the material-style-gulp directory
  2. Run the following command: 
    npm install
  3. Use the gulp dist command to generate the project

Customize template

You can pass options to the gulp dist command. The generated version is located inside the dist folder

Change color

gulp dist --color=red

You can pass any color from the list of colors.

'red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green', 'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'brown', 'grey', 'blue-grey'

You can also change the brightness with:

gulp dist --color=red --shine=700

You can use the values: 300, 400, 500, 600, 700 and 800.

Change header

gulp dist --header=ms-header-white

You can use the values:

'ms-header-primary', 'ms-header-dark', 'ms-header-white'

Change navbar

gulp dist --navbar=ms-navbar-white

You can use the values:

'ms-navbar-primary', 'ms-navbar-dark', 'ms-navbar-white'

Navbar Mode

gulp dist --navbarMode=true

Combined options

You can combine all the options, for example:

gulp dist --color=indigo --shine=600 --header=ms-header-dark --navbar=ms-navbar-white

FAQ

How to get the fixed navbar?

  1. Search this line: 
    <div class="ms-site-container">
  2. Change for: 
    <div class="ms-site-container ms-nav-fixed">
  3. Find the navbar-static-top class and change it to navbar-fixed-top.

Plugins

List of plugins used in the template:

Extra Content

You can download more videos and audios included in Slider Revolution at the following link: