How do I enable the Theme Configurator?
I also want to allow the registered user to change the appearance of the site
run it as gulp demo
Hi there, I'm hoping you can help. I'm struggling with the navbar from the theme in my anuglar2 app. I'm using the stylesheet:


And the HTML markup from


For some reason, my navbar is coming out with white text on a dark grey background, instead of the light background as it should. It definitely has the class 'ms-navbar-primary' on the 'nav' element, and I've copied and pasted the markup (from blog-sidebar2.html).

I can't for the life of me work out why it's not coming out the right colour or menu hover color. Also the chevron doesn't rotate on mouse over.

Can you give me any pointers as to what I might be missing?

It probably misses some class or is overwriting it with another file.

Without seeing all of your code I could not know where the error is.

I've run into another couple of issues on Firefox V52 on Windows and Linux. You can see the issues through the preview of material style on this site. I've shown the issues with screen shots.

The Checkbox feedback effect is offset a few pixels down.

The Select Box feedback checkmark on a selected item in the drop down is offset a few pixels down

When using the select box at the bottom of the page where it can't show all the items to select, the vertical scroll bar that's supposed to appear does not, therefore only allowing the user to select a subset of available options. This also happens on iOS.


Thanks for letting me know. In the next few hours I will upload the update fixing the errors.


Thanks for getting an update out so quickly! The offset issues are fixed but the select box verticle scroll bar problem still occurs. When the select box is at the bottom of the page sometimes the verticle scroll in the selection box doesn't appear giving the user the impression that there are less items to select from than there actually are. See my previous screen shots to see this problem.

Also, unfortunately with the update the select and multi select on iOS are greyed out and can't be used. They are greyed out on all iOS browsers. Safari, Firefox and chrome.


I will review it in depth and update as soon as possible.

Thank you.
Hello adrigm,

I wanted to give you a suggestion. I wanted the theme to have a mask in textinput (date, phone, currency and custom mask).

thanks !!!

I'll work on it.

Attempting to use GULP to generate some templates.
After the installing the dependencies, and running one of the examples below, I get the error where it looks like ./gulp/config is missing.
Is the intention that ./gulp/config is a provided file, or a user created file?

E:\...\material-style-1.3.1\material-style-gulp>gulp dist --color=red
throw err;

Error: Cannot find module './gulp/config'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (E:\...\material-style-1.3.1\material-style-gulp\gulpfile.js:23:21)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)

Download the latest update. The file for some reason was lost in the previous update.

It is already solved.

That works great now.
Follow up question:
Your theme configurator gives the option for "Boxed Mode"
I don't see a gulp config flag for that.
Is that just missing? or is it expected to be rolled in by hand by the developer?
Hi.. Could you please add a social page.. to show the feed on card having.. message, pic, video, comments etc.. That will really help..

If you can give me more details of what you want, I can do it.

Thank you.
My project required Activity Page where I have to show Social feed.. Also is it possible to show chat feature with list of people..
billsliu PURCHASED
I bought your template. There are two well documented web material design implementation.
1. material-design-lite https://getmdl.io
2. materialize https://github.com/dogfalo/materialize
It looks like you do not use these two material design implementation. but how do you implement material design? Is there some documentation about your implementation?

It is very hard to use your material design and customize it, I have your template it is really fantastic, but I could not decide to use your template in our project without any documentation about your material design.

I just want to get a template like the bootstrap, it has detailed documentation, I know nothing about gulp and scss, I only know html, css, javascript, golang. I just want to use your template in our golang project.

In the UI Elements section, the component code includes the code base for how to implement it.

To use the pages only adapt the content. Everything is built as individual blocks so it is very easy to compose your own pages.
How do I enable the Theme Configurator? on my local-
You can generate a version with the configurator using gulp
gulp demo

Since in the file header.html it is scoped to the demo env build.

<!-- build:include:demo header/configurator.html --><!-- /build -->
It's as simple as that.
Would you be willing to create a new gulp target that generates a basic shell output, without any of the demo and email images. none of the demo/release media. maybe only process one SAMPLE "home" html file
Something like a target called "basic_shell"
I want to use this template, and I would like to be able to apply updates as you publish them. So ideally I can extend your basic_shell target, so that is processes my own site's html that I can drop into a "site" directory.
billsliu PURCHASED
Could you provide a seed template which only contain basic stuff like material theme no third party plugin.

Without a seed template, it is impossible to use your template in the live project.
Thank you @billsliu for stating the ask clearly.
This is what I am need as well.

Really HTML files do not change (new ones are added, but the previous ones are not modified). Only files found in assets change.

What would be the compilation of gulp you need?
A compilation that does not include any of the demo, or showcase images, and code.
I want to apply this theme to a site I manage, for which I will build my own pages, with my own content, my own images
I see no point in uploading all the demo images, etc.
If this is something you can provide, that would be great, if not, then its simply more work on my end.
The theme come with any angular 1.x compatible template? Thanks
No, for now. Sorry.
Currently the configurator is not applying the theme on footer.

The footer has nothing to change! ;)
There is Sitemap, Last Articles, MAterial Style Contact info.. The background doesn't change like the header .. Anyways.. will take care of it myself.. thanks..
its too amazing and i like it
but can you add rtl version to this ?
and can we have the latest plugins and bootstrap 3 on this theme ?!
its kind of necessary to me

do you have some example pages with the revolutions slider for the theme?

best regards
The template includes a few demos.

Here's more: https://revolution.themepunch.com/examples-jquery/
I was wondering how long until the dark theme is done?
Any ideas?

Right now I'm giving priority to the version with BS4. But soon we will have a dark version of the template.
awww :(
Hi! And when will the template be on bootstrap 4?

I'm working in it. The next major version will have the template in BS3 and BS4.

The entire theme is very well packaged. Could you please address few items..
1. The navigation selection needs a fix. On the click of any of the submenu's that item needs to be highlighted both on top navigation and side navigation.
2. Could you please add validation error on from using Jquery or bootstrap, right now it's HTML5 only.
I have a couple question I was wondering if anyone could answer for me. I wanted to hide the navbar menu on computer browser but show the button on a mobile phone. Is that possible? Also, I have broken my footer and can't figure out what I did. Probably missing a tag or something.
Just wanted to say I fixed the footer problem.
bochalito PURCHASED
I'm interested in buying this template. I have some questions first. Can I use it with Angular or Vue.js? When I buy the template I will get the code or something like CMS system ?
Thank you in advance.

There are two versions.

A version already compiled with HTML, CSS and JS files.

Another version of development. With HTML using processhtml, SCSS and Gulp.

You can adapt it to VUE, Angular, etc.
Hi, is there a way to get the look of Navbar as Primary Color when the Header also is Primary color when using light header? I really like that white line under it instead of the whole block a lighter color.

This might be a better explaination.

Primary color

Primay color

Now I want that navbar when using header as light.

I understand what you want to do. You have to change some lines in the SCSS.

In the navbar.scss file you should go to line 479 and add:

.ms-header-light + .ms-navbar-primary,

Then compile and go.
How do I do that? I have never used SCSS but I do have it installed

Write a comment

This is a great way to give the seller feedback and ask them questions about their item.

You must sign in to write a comment

Sign in or sign up to make a purchase


Licenses: Details »

Single application $22
  • HTML Template
Bootstrap: Compatible with 4.x
  • Responsive
  • Fluid
  • IE 10, 11
  • Latest Chrome
  • Latest Edge
  • Latest Firefox
  • Latest Safari
Uses Less:No
Uses Sass:Yes
Topic: Internet & Web
Labels: blog, blue, colors, cusomizable, design, elegant, green, landing pages, material, responsive
Released:1 year ago
Updated:2 months ago
Sold exclusively on WrapBootstrap


Signed up 5 years ago

Need an admin template?

About Bootstrap

Bootstrap is designed to help people of all skill levels – designer or developer, huge nerd or early beginner. Use it as a complete kit or use it to start something more complex.

Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only its features, but best practices and living, coded examples.

Built to support new HTML5 elements and syntax with progressively enhanced components.

Browser support

Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer.

Tested and supported in Chrome, Safari, Firefox, Internet Explorer, and Opera.
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Latest Edge
  • Internet Explorer 10/11
  • Latest Opera

Features & includes

Bootstrap provides an unparalleled array of features and reusable components that let you hit the ground running:

  • Responsive 12-column grid
  • 12 custom, modular jQuery plugins
  • CSS styles for forms, navigation & more
  • Dozens of reusable components
  • Components are scaled according to a range of resolutions and devices
  • Built with Sass (CSS included)
  • Complete styleguide documentation