MatRoz

Material Design Agency and Business Template


Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

How to get help:


We will respond to buyers' questions via the contact form on our profile.

We run support 24/7. You can expect a response within 24 hours.

MatRoz is a Material Design Agency, Business, Technology, Hosting with WHMCS Template designed for All kinds of Business like Creative Agency, Tech Company, Hosting Company, etc. It's an HTML template based on Material Design Lite, Bootstrap 3.3.7. and WHMCS 7.5.1. Anyone can easily update/edit this template to follow our Well Sorted Documentation.

Main Features of "MatRoz":

Other Features of "MatRoz":

Our item included two types of Templates. One is the HTML Template to show your pricing/product/services and another one is the WHMCS Template for client area.

So, you have to use both templates for your website and need to link up manually all of your pricing/product/services with WHMCS (from HTML Template to WHMCS Template).

HTML TEMPLATE:

WHMCS TEMPLATE:

You'll get the step by step instruction in whmcs folder readme.txt file.

The "MatRoz" template is a responsive HTML template based on Bootstrap 3.3.7. The structure based on a flexible grid that lets you change HTML pages quickly and logically with a nestable system.

If you would like to edit the layout of any elements in whole template, you would do the following:

Open any '.html' or, '.css', so that is extremely easy to change any html markup and css attributes. Simply find the related and commented heading in the html or, css file and make your magic.

"MatRoz" using the following CSS files:

style.css 
The main css file

css/responsive-style.css 
The css file using responsive

css/button-color-1.css
css/button-color-2.css
css/button-color-3.css
css/button-color-4.css
css/button-color-5.css
The css button color scheme. You may choose the file as per your choice.

css/main-color-1.css
css/main-color-2.css
css/main-color-3.css
css/main-color-4.css
css/main-color-5.css
The css main color scheme. You may choose the file as per your choice.

css/font-awesome.min.css
The css file for font-awesome icons. To see all the available icons and instructions on how to use them click here

css/bootstrap.min.css
The main responsive grid stylesheets, from Bootstrap 3 framework. It is recommended to make any changes/additions to style.css and keep bootsrap.css and bootsrap-theme.css as it are. In this way, you can easily upgrade the grid framework when Bootstrap releases an update.

css/material.min.css
The css file for Material Design Icons, Fonts, Buttons and Froms.

css/owl.carousel.css
The css file for owl carousel.

css/magnific-popup.css
The css file for image, video and ajax content popup.

css/animate.min.css
The css file for animation effects.

js/main.js
The main script for the template

js/jquery-3.1.0.min.js
The jQuery Framework

js/bootstrap.min.js
The main js file that hook the supported scripts of Bootstrap 3 framework 

js/material.min.js
The main js file that using for material design buttons, menus and css effects.

js/animatescroll.min.js
The script that using for menu scrolling animation

js/jquery.validate.min.js
The script that using for form validation

js/jquery.waypoints.min.js
The script that using for scroll events

js/jquery.counterup.min.js
The script that using for counter

js/owl.carousel.min.js
The script that using for slider

https://platform.twitter.com/widgets.js
The script that using for twitter widget

js/jquery.tubular.1.0.js
The script that using for video background

js/jquery.retina.min.js
The script that using for retina displays

js/jquery.magnific-popup.min.js
The script that using for image, video and ajax content popups.

js/isotope-docs.min.js
The script that using for gallery section.

Photos:

Fonts Used:

Frameworks / Libraries:

Plugins Used:

08 August, 2018 - Version 2.9 (Changelog)

// # List of updates
// ------------------------------

*. WHMCS template updated to be compatible with latest "WHMCS Version 7.6.0"

24 April, 2018 - Version 2.8 (Changelog)

// # List of updates
// ------------------------------

*. WHMCS template updated to be compatible with latest "WHMCS Version 7.5.1"

04 April, 2018 - Version 2.7 (Changelog)

// # List of updates
// ------------------------------

[*] Fixed 404 Page Background Image Repeating Issue

[*] WHMCS template updated to be compatible with latest "WHMCS Version 7.5.0"

17 January, 2018 - Version 2.6 (Changelog)

// # List of updates
// ------------------------------

*. WHMCS template updated to be compatible with latest "WHMCS Version 7.4.2"

22 November, 2017 - Version 2.5 (Changelog)

// # List of updates
// ------------------------------

*. WHMCS template updated to be compatible with latest "WHMCS Version 7.4.1"

11 October, 2017 - Version 2.4 (Changelog)

// # List of updates
// ------------------------------

*. WHMCS template updated to be compatible with latest "WHMCS Version 7.3.0"

30 May, 2017 - Version 2.3 (Changelog)

// # List of updates
// ------------------------------

*. WHMCS template updated to be compatible with latest "WHMCS Version 7.2"

18 January, 2017 - Version 2.2 (Changelog)

// # List of updates
// ------------------------------

*. PHPMailer security update

28 December, 2016 - Version 2.1 (Changelog)

// # List of updates
// ------------------------------

[*] PHPMailer security updated

19 December, 2016 - Version 2.0 (Changelog)

// # List of updates
// ------------------------------

[+] WHMCS template updated to be compatible with latest "WHMCS Version 7.1" (For more information on changes of file to file, please look at it on github)
[-] We stop offering an order form template with WHMCS for WHMCS 7.x, as you can use any standard WHMCS order form.

08 October, 2016 - Version 1.5 (Changelog)

// # List of updates
// ------------------------------

[+] WHMCS template and orderforms updated to be compatible with latest "WHMCS Version 7"

20 September, 2016 - Version 1.4

// # List of updates
// ------------------------------

[+] domain search form now redirects to whmcs domain search form (files affected: index.html, domains.html)
[+] login form now lets you login to whmcs from your html login page (files affected: login.html)
[+] added tawk live chat widget (files affected: main.js)
// # List of fixed
// ------------------------------

[*] fixed whmcs form placeholder text color
[*] fixed feedback area issue on IE11
[*] fixed pricing table area issue on IE11
[*] fixed blog area issue on IE11

HOW TO UPDATE THE "DOMAIN SEARCH FORM"?

1. Open 'index.html' file

2. Find the comment "<!-- Domain Search Area Start -->"

3. Compare the code with the new one below by you or, with this tool then replace necessary changes

<!-- Domain Search Area Start -->
<div id="domainSearch">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <form action="http://billing.ywhmcs.com/domainchecker.php?systpl=MatRozHostCV1" method="post">
                    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                        <input type="text" name="domain" class="mdl-textfield__input" />
                        <label class="mdl-textfield__label" for="subscribeFormInput">Enter Your Domain Name Here...</label>
                    </div>
                    <div class="mdl-textfield select-box">
                        <select name="ext">
                            <option selected>.com</option>
                            <option>.net</option>
                            <option>.org</option>
                        </select>
                    </div>
                    <button type="submit" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--accent">Search</button>
                </form>
            </div>
            <div class="col-md-6">
                <div class="domain-ext">
                    <div class="extension">
                        <span class="name">.com</span>
                        <span>$3.99/year</span>
                    </div>
                    <div class="extension">
                        <span class="name">.net</span>
                        <span>$3.99/year</span>
                    </div>
                    <div class="extension">
                        <span class="name">.org</span>
                        <span>$3.99/year</span>
                    </div>
                    <div class="extension">
                        <span class="name">.info</span>
                        <span>$3.99/year</span>
                    </div>
                    <div class="extension">
                        <span class="name">.us</span>
                        <span>$3.99/year</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Domain Search Area End -->

4. Follow the steps about 1, 2, 3 for 'domains.html' file

HOW TO UPDATE THE "LOGIN FORM"?

1. Open 'login.html' file

2. Find the comment "<!-- Registration Area Start -->"

3. Compare the code with the new one below by you or, with this tool then replace necessary changes

HTML:
<!-- Registration Area Start -->
<div id="registration">
    <div class="container">
        <div class="row">
            <div class="col-md-4 col-md-offset-4 reg--login">
                <form action="http://billing.ywhmcs.com/dologin.php?systpl=MatRozHostCV1" method="post">
                    <div class="mdl-card mdl-shadow--2dp">
                        <div class="mdl-card__supporting-text">
                            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                <input class="mdl-textfield__input" type="text" name="username" id="loginEmail">
                                <label class="mdl-textfield__label" for="loginEmail">Email</label>
                            </div>
                            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                                <input class="mdl-textfield__input" type="password" name="password" id="loginPass">
                                <label class="mdl-textfield__label" for="loginPass">Password</label>
                            </div>
                            <div class="mdl-textfield">
                                <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="loginRemember">
                                    <input type="checkbox" name="rememberme" id="loginRemember" class="mdl-checkbox__input">
                                    Remember Me
                                </label>
                            </div>
                            <button type="submit" class="submit-btn mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--raised mdl-button--accent">Login</button>
                            <a href="http://billing.ywhmcs.com/pwreset.php?systpl=MatRozHostCV1" class="helper-link mdl-button mdl-js-button mdl-js-ripple-effect">Forgot Password?</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Registration Area End -->

HOW TO UPDATE/ADD "TAWK LIVE CHAT WIDGET"?

1. Open 'main.js' file

2. Find the comment "* COUNTER"

3. Insert the below code before the comment "* COUNTER"

JS:
/* ------------------------------------------------------------------------- *
 * LIVE CHAT WIDGET
 * ------------------------------------------------------------------------- */
var Tawk_API = Tawk_API || {},
    Tawk_LoadStart = new Date(),
    $tawk = document.createElement("script");

$tawk.async=true;
$tawk.src='https://embed.tawk.to/57dfd4b85dc7a25e92808cf6/default';
$tawk.charset='UTF-8';
$tawk.setAttribute('crossorigin','*');

$($tawk).appendTo('body');

HOW TO FIX "WHMCS FORM PLACEHOLDER TEXT COLOR"?

1. Open 'matrozhost-style.css' file

2. Find the comment "GENERAL STYLES"

3. Remove the below code:

CSS:
.form-control::-webkit-input-placeholder {
    color: #fff;
}
.form-control::-moz-placeholder {
    color: #fff;
}
.form-control::-ms-input-placeholder {
    color: #fff;
}

HOW TO FIX "FEEDBACK AREA ISSUE (IE11)"?

1. Open 'style.css' file

2. Find the class name ".feedback-item .mdl-card {"

3. Update the width property value to "initial":

CSS:
.feedback-item .mdl-card {
    width: initial;
    min-height: 0;
    overflow: visible;
}

HOW TO FIX "PRICING TABLE AREA ISSUE (IE11)"?

1. Open 'style.css' file

2. Find the class name ".pricing-table-item .mdl-card__title-text"

3. Remove the overflow property and add width: 100%; property

CSS:
.pricing-table-item .mdl-card__title-text {
    width: 100%;
}

HOW TO FIX "BLOG AREA ISSUE (IE11)"?

1. Open 'style.css' file

2. Find the class name ".post-item .mdl-card__title"

3. Add two new properties width and overflow

CSS:
.post-item .mdl-card__title {
    padding: 0;
    display: block;
    
    width: 100%;
    overflow: hidden;
    
}

2016 August 28 – Version 1.3

// # List of updated
// ------------------------------

[-] removed old twitter api
[+] added new twitter widget

HOW TO UPGRADE THE TWITTER WIDGET?

1. Please, find the comments and include below 'markup' in '.html' file:

<!-- Latest Tweets Widget Start -->
<div class="col-md-3 col-sm-4">
    <section class="latest-tweets-widget">
        <h2 class="footer-title">latest tweets</h2>
        <div id="tweets" data-twitter-id="697371631589711872"></div>
    </section>
</div>
<!-- Latest Tweets Widget End -->

becomes:

<!-- Latest Tweets Widget Start -->
<div class="twitter">
    <div id="footerTwitter" data-user-name="themelooks"></div>
</div>
<!-- Latest Tweets Widget End -->

and

<!-- ====Twitter Fetcher Plugin Script==== -->
<script src="js/twitterFetcher.min.js"></script>

becomes:

<!-- ====Twitter Widget==== -->
<script src="https://platform.twitter.com/widgets.js"></script>

2. Please, find the comments and include below 'CSS' in 'css/style.css' file:

/* 15-3 TWITTER WIDGET */
#footerTwitter {
    max-height: 185px;
    background-color: #fff;
    overflow: auto;
}

and

/*------------------------------------*\
    21. BLOG PAGE
\*------------------------------------*/
#sidebarTwitter {
    max-height: 270px;
    border: 1px solid #e9e9e9;
    overflow: auto;
}

3. Please, find the comments and include below 'javascript' in 'main.js' file:

/* ------------------------------------------------------------------------- *
 * TWITTER FEED
 * ------------------------------------------------------------------------- */
var tweetsContainer = $('#tweets');

if ( tweetsContainer.length ) {
    var config = {
        "id": tweetsContainer.data('twitter-id'),
        "domId": 'tweets',
        "maxTweets": tweetsContainer.data('posts'),
        "showTime": false,
        "showUser": false,
        "showInteraction": false
    };

    twitterFetcher.fetch(config);
}

var tweets2Container = $('#tweets2');

if ( tweets2Container.length ) {
    var config2 = {
        "id": tweets2Container.data('twitter-id'),
        "domId": 'tweets2',
        "maxTweets": tweets2Container.data('posts'),
        "showTime": false,
        "showUser": false,
        "showInteraction": false
    };

    twitterFetcher.fetch(config2);
}

becomes:
        
/* ------------------------------------------------------------------------- *
 * TWITTER WIDGET
 * ------------------------------------------------------------------------- */
var $footerTwitter = $('#footerTwitter');

if ( $footerTwitter.length ) {
    twttr.widgets.createTimeline({
        sourceType: "profile",
        screenName: $footerTwitter.data('user-name')
    }, document.getElementById('footerTwitter'));
}

var $sidebarTwitter = $('#sidebarTwitter');

if ( $sidebarTwitter.length ) {
    twttr.widgets.createTimeline({
        sourceType: "profile",
        screenName: $sidebarTwitter.data('user-name')
    }, document.getElementById('sidebarTwitter'));
}

2016 July 21 – Version 1.2

// # List of changes
// ------------------------------

[new]  added Material Design Hosting Template
[new]  added 5 Different WHMCS Template with 5 Different Colors

2016 May 26 – Version 1.1

// # List of changes
// ------------------------------

[new]  added support for high resolution
[new]  added support for retina displays

[fixed]  back to top button isssue fixed
[fixed]  responsive issue fixed

HOW TO FIX BACK TO TOP BUTTON ISSUE?

CSS:

/* 1-6 BACK TO TOP BUTTON */
#backToTop {
    position: fixed;
    bottom: 35px;
    right: 35px;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity .25s ease-in-out;
            transition: opacity .25s ease-in-out;
    z-index: 1;
}

HOW TO FIX RESPONSIVE ISSUES?

CSS:

@media screen and (max-width: 991px) {
    /* TOP NAV AREA */
    #topNavbar li a {
        padding-left: 6px;
        padding-right: 6px;
    }

    /* HEADER AREA */
    .header-img .header-img-slider {
        left: 46.3px;
    }
    
    /* CALL TO ACTION AREA */
    #callToAction {
        text-align: center;
    }
    #callToAction a {
        margin-top: 30px;
    }
    
    /* FEATUER AREA */
    .feature-item {
        margin-bottom: 70px;
    }
    .feature-item:last-child {
        margin-bottom: 0;
    }

    /* ABOUT ARAE */
    #about:before,
    #about:after {
        display: none;
    }
    .about-page-team:before {
        display: none;
    }
    .team-item {
        margin: 0;
    }
    .section-title.team-title {
        color: #222;
        margin-right: 0;
        text-align: center;
    }
    .section-title.team-title:before {
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    
    /* SUBSCRIBE FROM */
    #subscribeForm {
        margin-bottom: 20px;
    }
    
    /* APP FEATURES AREA */
    .app-features-img,
    .dev-img {
        text-align: center;
    }
    .app-features-img .section-title,
    .dev-img .section-title {
        float: none;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
        margin: 0 0 70px;
        text-align: center;
    }
    
    /* TEAM AREA */
    .about-description {
        margin-top: 50px;
    }
    
    /* FEEDBACK AREA */
    .feedback-item {
        margin-bottom: 20px;
    }
    #feedback {
        padding-bottom: 50PX;
    }
    
    /* PORTFOLIO AREA */
    .portfolio-item {
        width: 25%;
    }
    .portfolio-item.width-25 {
        width: 50%;
    }
    
    /* FACTS */
    .facts {
        margin-bottom: 50px;
    }
    
    /* BLOG AREA */
    .post-item {
        margin-bottom: 30px;
    }
    
    /* CONTACT AREA */
    .contact-address address {
        margin-bottom: 30px;
    }
    #contact {
        padding-bottom: 65px;
    }
    
    /* CONTACT PAGE */
    #contact.page {
        padding-bottom: 65px !important;
    }
    
    /* BLOG PAGE */
    .eq-height-left:before, .eq-height-right:before {
        display: none;
    }
    
    .categories-widget .nav-tabs > li {
        display: table-cell;
        width: 1%;
    }
    
    /* COLOR SWICTHER */
    #open-switcher,
    #close-switcher,
    #demo-colors {
        display: none;
    }
}
/* 1-4 EXTRA SMALL DEVICES, PHONES */
@media screen and (max-width: 480px) {
    /* Primary Area */
    .primary-social-menu-links {
        display: none;
    }
    ul.primary-menu-links > li > span.phone {
        display: none;
    }

    /* PORTFOLIO AREA */
    .portfolio-item {
        width: 50%;
    }
    .portfolio-item.width-25 {
        width: 100%;
    }
    
    /* TOP NAV AREA */
    #topNav .breadcrumb,
    #topNav .back-button {
        display: none;
    }
    
    /* TESTIMONIAL AREA */
    .feedback-wrapper .container {
        padding: 0;
    }
    .feedback-items {
        width:100vw;
    }
    
    /* GENERAL PAGE HEADER */
    .page-title h2 {
        margin-bottom: 40px;
    }
    
    #pageHeader .breadcrumb {
        display: block;
    }
    
    /* PRICING TABLE */
    .pct-img figcaption .pct-tag {
        bottom: 10px;
    }
}

Q. How To Change Theme Color Scheme?

For HTML Template:

Available Color Schemes:

For WHMCS Template:

How can I change the "Logo"?




How can I change "Slider Image and Text"?

Make sure first you put your 'slider images' in the '/img/header-slider-content' folder.

OR,


How can I change the "Slider Background Image"?

Make sure first you put your 'slider images' in the '/img/header-slider-bg' folder.

OR,


How can I change the "Slider Background Video Link"?




How can I change the "Slider Price Tags" (Hosting Version)?




How can I change "Progress Bar Value" (Team Skills Section)?




How can I change "Counter Value" (About Secion/Page)?




How can I change "Name, Image, and Social Links"?

Make sure first you put your 'images' in the '/img/team-members' folder.




How can I change the "Mailchimp Subscription Link"?

We added a speacial feature 'mailchimp interrogation support' on this theme and will be add it to our future themes also.




How can I change the "Video Popup"?




How can I change the "Portfolio Images"?

Make sure first you put your 'slider images' in the '/img/portfolio-img' folder.

OR,


How can I change "Pricing Table"?




How can I change "Feedback Text and Image"?




How can I change "Blog Images"?

Make sure first you put your 'slider images' in the '/img/blog-posts' folder.

OR,


How can I change the "Contact Address"?




How can I change the "Domain Search form action link" for my website to work with WHMCS?




How can I change the "Login Form action/forgot password/register link" for my website to work with WHMCS?




How can I change "Live Chat Widget"?




How can I change "Copyright Text"?




How can I change the "YouTube Video Link" (Blog Page)?




How can I change the "Vimeo Video Link" (Blog Page)?




How can I change the "Local Video Link" (Blog Page)?




How can I change the "Soundcloud Audio Link" (Blog Page)?




How can I change the "Local Audio Link" (Blog Page)?




How can I change the "Twitter User Name"? (Sidebar)




How can I change the "Twitter User Name"? (Footer)




How can I change the "Flicker ID"?




How can I change the "Goolge Map Position"?




How can I change the "Goolge Map Position" (Hosting Version)?




How can I remove the "Preloader"?




How can I add my "Email Address" (Sendmail.php)?