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.
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
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?
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.
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.
Since in the file header.html it is scoped to the demo env build.
<!-- build:include:demo header/configurator.html --><!-- /build -->
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.
Without a seed template, it is impossible to use your template in the live project.
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?
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.
Currently the configurator is not applying the theme on footer.
The footer has nothing to change! ;)
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'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.
This might be a better explaination.
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.
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
|Bootstrap:||Compatible with 4.x|
|Topic:||Internet & Web|
|Labels:||blog, blue, colors, cusomizable, design, elegant, green, landing pages, material, responsive|
|Released:||1 year ago|
|Updated:||2 months ago|
Need an admin template?
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.
Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer.
- 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: