337 comments

sj0787 PURCHASED
Hello,

I am using this theme very well and it is very clean. Thanks for this great template.

As I am a beginner, I was wondering how I can apply "d3.js" to this template. I am using the "react" version.

Especially I would care about the zoom feature so I thought I should find a way to just directly implement d3.js instead of using sort of a "react-d3."

I tried googling but I didn't get a good result yet. Can I have advice about this, to implement d3 into the react version, or if other ways can be better, should I use another version like angular?

Thanks!
Hi, you can use react-d3 by installing it from npm and the import into the template.

Install with: npm install react-d3 --save
Then import in your component with: import { LineChart } from 'react-d3';

You can follow more examples for other different chart types from here: https://reactiva.github.io/react-d3-website/

Let us know if you have any question

Thanks
Regards
sj0787 PURCHASED
Hello,

I have another question:

If I am using a jade-express template already with working d3.js which is done, should I just migrate the jquery version into it?

I might prefer to use react and start over from there, but I would like to have your advice on it.

Thanks.
Hi, you should consider between jQuery and React depending on the current requirements of your project and you time available. jQuery is more classic and simple, and if you are new to react, it will take some extra time dealing with it, but when you get the job done, you will a have a template much more powerfull. Angular is also a good option, the difference with React is that Angular provides a bit more of features to simplify things like api request.

Regards
fouriedr PURCHASED
Hi, I would just like some more info regarding the Meteor project in this theme, what do you exactly mean with "Projects Included -> AngularJS
jQuery/HTML5
Visual Studio MVC6 ASP.Net Core
MeteorJS
ReactJS (demo) "
My main question is just how is it structured and how will I then import the MeteorJS project into my already existing Meteor project?
Should I rather create a Meteor project from scratch?

Regards,
Daryll Fourie
Hi Daryll, the meteor project was not designed to be incorporated into another template. Of course, you can take parts of the template and paste into your projects, but due the presence of a layout and other core components the template was mainly developed to be used as a base to build a meteor app. You don't have to start from scratch because it's a running meteor application.
The file structure is the following (meteor 1.4)
+---client
| +---main.js
| \---head.html
+---imports
| +---startup
| | \---client
| | +---index.js
| | +---routes.js
| | \---vendor.js
| +---ui
| | \---components
| | +---bootstrap
| | +---cards
| | +---charts
| | +---colors
| | +---common
| | +---core
| | +---dashboard
| | +---elements
| | +---floatbutton
| | +---forms
| | +---header
| | +---layouts
| | +---maps
| | +---pages
| | +---ripple
| | +---settings
| | +---sidebar
| | +---tables
| | +---translate
| | +---user
| | \---utils
| \---vendor
+---public
| +---fonts
| +---img
| \---server
\---server
+---main.js

Regards
sj0787 PURCHASED
Hello again!

Thanks for your fast responses, and I still have some more beginner-stage questions.

1. How can I use something like passport here? If I install 'express' here, would it conflict with any other modules?

2. Is this a front-end rather than the full stack, so I need to make another API back-end? I am using PostgreSql, and if you could help me with how to integrate these two, that will be very helpful!

Thanks.
Hi again,

1- Passport is an authentication middleware used on the serve, since this template is mainly focused on client side features you should not have any conflict while implementing it.
2- Yes, the only projects that includes some kind of backend integration are meteor and VS. Meteor has something similar to passport, named meteor.accounts, you can check it here: https://guide.meteor.com/accounts.html

For PostgreSql, this seems to be a popular package: https://github.com/brianc/node-postgres
And an example: http://mherman.org/blog/2016/03/13/designing-a-restful-api-with-node-and-postgres/#.WDb0S7LhCUk

Related to passport, you can check the following official examples to create a backend implementation (check their repo for more):
https://github.com/passport/express-4.x-local-example
https://github.com/passport/express-4.x-facebook-example

Regards
sj0787 PURCHASED
Another question!

If I implemented an authentication somewhere (with passport or others), then I would want them to only access to certain pages, not the whole. In this case, would you have some recommendations on how to redirect them or deal with this?

Thanks!
Hi, the implementation of an authentication mechanism depends mainly on the project you are using. For example, angularjs provides better tools for this than a classic jQuery.
If we have to choose, we will go for AngularJS. You can implement the authentication in each route, using "resolve" you can abort the access to a certain route if there is no user authenticated, or current user doesn't have permissions.
Those links will give an idea of what we say:
https://solidfoundationwebdev.com/blog/posts/require-authentication-for-certain-routes-with-ui-router-in-angularjs
http://stackoverflow.com/a/22540482/1754325

As said, we found angularjs better for this approach but it's not liimted to this framework only, You can do the same in React applying other methods.

Hope this helps
Regards
sj0787 PURCHASED
Thank you so much! After hearing from you, I think I should wait for the Angular 2 version. I also purchased Angle, but still this version looks slightly cleaner and neater. Would there be an estimated date for it?

Thanks for all of your help!
Hi, we are currently finishing the angular2 version of Angle. It took us a bit more than two months but now we know much more and we expect less time to migrate Centric. We don't have an ETA right now for ng2 version of Centric, but is possible that will be ready in January. We know this could be too much time if you need to start your project now but we prefer to let you know and to not delay your plans.
If possible we will provide something to start with, like a seed project.

Let us know if you have any question.

Thanks
Regards
sj0787 PURCHASED
Hello,

That will be perfect! I figured out some things with react (did authentication with "onEnter" for router), so I will be working on it, but eventually moved to Angular 2 as you release it. That will be great. I think people can understand better with examples, but if there can be explanations with seed projects, that will be really ideal.

This theme is great and unique. I have explored pretty much, but I ended up with yours and Angle (I didn't even know these two were from you, the same, at first). The only reason I prefer centric to Angle is its material-looking UIs. Having C3 or D3 examples will also be great while you have some extra time. I hope more people know this, and I look forward to more updates!

Thanks.
sj0787 PURCHASED
Oh, one quick question: If you click "flot" several times in the react project, it looks like the update settime is triggered additionally rather than renewed. The real-time graph blinks with multiple sets of data from different timeout events. I was just ignoring it since I won't be using real-time, but would you have a quick solution to this? Thank you!
Hi, thanks for the great feedback in your previous comment!

Regarding to the react issue, you're right, when router tries to enter a new route and changes the view, it uses the current route id to track the changes, since we are wrongly using Math.random() for the id, react is reloading the component.
In short, the solution to this is to use a unique id per route, like "this.props.location.pathname"
You can fix that easily by editing the file /react/app/components/Core/Core.jsx and change it to use the following code for the ReactCSSTransitionGroup content:

{/* Page content */}
{React.cloneElement(this.props.children, {
key: this.props.location.pathname
})}

Let us know if you have any question

Thanks
Regards
sj0787 PURCHASED
Works great! Thanks :)
davidhunt PURCHASED
Hi,

Quick question. Are you planning on creating a calendar page? This would be a valuable resource.

Many thanks,

David
Hi, it wasn't considered but we can do that for the next release.

Thanks for the advice
Regards
Hi

Can you please suggest the steps to run the app in production mode on live server. I am facing some dependency package issue.

Thanks
Hi, currently it's not possible because configuration for production doesn't start a server. Anyway, by combining the optimization for production with the setup for development is possible.
1- Copy the code from http://pastebin.com/VC2Gt8nv and paste into a new file named webpack.prodserver.js
2- Add the following line to the "script" section of package.json
"prodserver": "webpack-dev-server --config webpack.prodserver.js --inline --progress --port 3000 --open",
3- Run the command "npm run prodserver"

If everything goes fine it should open a development server but running the code with the optimizations for production.

Regards
Hi

Thank you for the response. Now I have one new query when I try initialize and set the values via state in Input box of Form, the input box will not enable after render. So can you please suggest the way to achieve this.

For eg:
=======
<input type="email" placeholder="mail@example.com" name="email" required="" className="form-control" ref="email" value={this.state.user.email}/>
=======

Thanks
Hi, please try using defaultValue instead of value, like this

<input type="email" placeholder="mail@example.com" name="email" required="" className="form-control" ref="email" defaultValue={this.state.user.email}/>

Regards
Hi

Have already tried but it not works as values are loaded via ajax request. The value is set but the input box is readonly.

Thanks
Hi, found this post: http://stackoverflow.com/a/28315332
It seems that if you use a {} in the value attribute, you have to provide an "onChange" callback to avoid make it read only

Regards
sj0787 PURCHASED
Hello,

I want to know the solution to the case:

if you click spinner and go to another page and come back again, they are not showing. It looks like similar things are happening between pages.

I look forward to your reply! Thanks.
sj0787 PURCHASED
I am using the React version!
sj0787 PURCHASED
When I see in mobile,

on the sidebar, when I click dashboard and click elements, the whole sidebar items disappear. When I refresh at that page, it appears back. Is it related to "#"? I'm trying to figure out how to solve it, but couldn't yet.

I will wait for your advice. Thanks!
sj0787 PURCHASED
If something that can stop javascripts that ran already by visiting other pages can be helpful too!

In flot, if I click flot and go to another page and come back, it looks like the real time graph still shows multiple data blinking. It looks like this is relevant too.

Thanks again!
Hi, thanks for report this, we have fixes for those issue reported.
We'll implement them in the following release, in the meantime, if you can send us a message via our profile page, it will be more simple to share with you the changes.

Only the issue with the sidebar on mobile we couldn't replicate. When clicking on dashboard, the route is loaded and the sidebar is closed automatically. We really appreciate if you have a bit more details about this issue.

Thanks.
Regards
How can I see the RTL version of this template?
Hi, we can provide you a demo, are you interested in a particular project? Currently angular and html5/jQuery versions are ready for RTL, but if it's another just let us know.

Regards
I would like to see an RTL demo for Centric

Thanks

Yoni
Hi, you can see the RTL version here: http://themicon.co/theme/centric/v1.4.2/html5jqueryrtl/app/dashboard.html
Instructions to convert to RTL are available in the documentation of the product. Other changes may done like icons, images, etc.

Regards
Hi,

Thanks for this template.. it's awesome! I am using the angular version of this template, I am building my website using my own architecture, and I introduced to my code your template and dependencies. So far, it is working great but I am having this small issue: I am creating a contact page similar to the one you have in the template, but after clicking in the right menu in one contact card (the one with the 3 dots - android style) and opening the bootstrap menu, i can't click any more in the search field at the top the page, it looks like after closing the dropdown the button doesn;t loose the focus anymore, so I can;t click or type in the input text. This issue disappear if I change the page and come back or if i change the pagination that I introduced for the contacts...

Any thoughts ?

Thanks in advance..
Ernesto
Never mind, just found this issue was happening with a newer version of angular-bootstrap library. Changed my bower.json file to use same version than the template and now it is working okay !!! Thanks
Thank you for the feedback! We'll keep this in mind

Regards
Hi, I am trying to create popup like you have in this admin. where I can see the example or what the component name?
Hi, could you point us the page where you see the popup? It's modals or seetalert?
Also, which project are you using? angular, jquery, etc?

Regards
Hello,

It seems to me that ReactJS theme is not properly using React. Most of the data is static (for eg records in Blog/Articles section). Instead it should consumed via an API and the data brought in through a JSON file. It helps for the developers who is started learning the ReactJS and want to integrate the theme with their backend API's.

Do you have a update for the theme so records/data will be loaded via API's(JSON data)?

Thanks
Hi, your approach is correct and there are some examples of using data from server, like in the Datatables and Flot chart components. Anyway, this template is mainly focused on client side features without backend implementations, that's why some pages doesn't have a real API request like you mentioned.
React is also a framework for views rendering, for API call you can use any framework out there or a simply a jQuery $.getJSON() to request data from backend. Consider using the hook function "componentDidMount" in order to perform operations once the markup is ready.

Regards
Hi there, the new angular2 version doesn't have the backdrop when you open right flyout, but it is available in the original template. Is that a mistake or it is not available for angular 2 version?
Hi, you're right and this mainly an issue with ng2-bootstrap and modals that is solved by removing the backdrop. Anyway, we have used in some case a quick fix that add manually the backdrop until the issue is fully solved. Please see here: http://themicon.co/theme/centric/v1.5/angular2/elements/bootstrapui
Also, the Modal in the "Boostrapui" (http://themicon.co/theme/centric/v1.5/angular2/elements/bootstrapui) is appear behind the backdrop
Thanks for let us know this. This issue is really weird, if you open directly that page the backdrop appears behind the modal but if you navigate first to Dashboard and then to the BootstrapUI page, the modals works fine. We'll check this in deep and let you know.

Thanks
Regards
I'm getting this error when trying to run the Meteor version of this theme:

modules-runtime.js?hash=e35fc9c…:146 Uncaught Error: Cannot find module '../../ui/components/app.scss'
at Function.require.resolve (modules-runtime.js?hash=e35fc9c…:146)
at Module.resolve (modules-runtime.js?hash=e35fc9c…:96)
at Module.Mp.import (modules.js?hash=6e37993…:305)
at meteorInstall.imports.startup.client.index.js (utils.js:70)
at fileEvaluate (modules-runtime.js?hash=e35fc9c…:198)
at Module.require (modules-runtime.js?hash=e35fc9c…:121)
at Module.Mp.import (modules.js?hash=6e37993…:314)
at meteorInstall.client.main.js (utils.js:70)
at fileEvaluate (modules-runtime.js?hash=e35fc9c…:198)
at require (modules-runtime.js?hash=e35fc9c…:121)

We're using the latest version of Meteor
This is from the Chrome console. The dashboard itself is just a blank page when loaded.
Also checked the file permissions and the app.scss location & everything should be as per normal so i'm not really sure whats causing the Meteor instance not being able to find the app.scss file.
Okay ignore my comments, turns out some of the dependencies weren't installed.
Thanks for let us know.
Regards
Hi,

Is it using angularjs-meteor?

or its entire UI & backed based on meteor?
Hi, meteor version it's no based on angular. It's based on meteor 1.4 and uses classic html5 and jQuery.

Let us know if you have any question
Regards
Hi, i am using these template that my friend bought for me to use for personal projects, and i noticed that it does not have a modal component yet. are you planing on creating it and will it be available soon? thanks.
Hi, which project are you using? Currently modals are used across the entire template. For example, right sidebar and header search uses modals internally.
For angular, you can see modals example here: http://themicon.co/theme/centric/v1.5/angularjs/#/app/ui/bootstrapui

Let us know if you have any question
Regards
hello thanks for the reply .. i am using the centric react version . i was actually looking for a modal like the bootstrap modals but can do full screen. i was looking for it but could not find it since its not currently listed as a component. now i know its just in the bootstrapui part .. will it be hard to turn the modals into full screen and make it so that it looks like the internal ones like you said? thanks
Hi, thanks for the details. To change modals you can use the one following classes applied to the modal markup:
.modal-right / .modal-top / .modal-left / .modal-bottom
And the markup example is like follow
<Modal bsSize="lg" className="modal modal-right fade"> ....

Then use the modals normally, those classes change the position and animation of modals.
You can find the modal styles in: app/components/Common/Modal.scss

Let us know if you have any question
Regards
Hi,

I'm about to choose an admin template from wrapbootstrap.com. This one looks really nice but It's hard to find some info (or maybe I just missed it)

Is the Meteor integration based on React or Blaze?
Is the Meteor version uses Material Design too?
Is there a doc included in the package for the components and their "interfaces" /what props the component accepts, examples..etc./?

Thank you for your answer in advance.

Best,
Andras
Hi,

1- Meteor version is based on Blaze
2- Yes, the the Meteor version has the same styles like you can see on the demo.
3- The documentation is more a guide for the project that includes information about structure and usage (imports, routes, etc) and relies mainly a previous knowledge of the meteor framework.

Please feel free to let us know if you need further details.
Regards
Hi,

Thanks for the quick answer. Blaze is a no-go. I'm developing in Meteor with React so it seems that either I look for another template or use the ReactJS version and integrate it into Meter myself.

As to your knowledge, does the ReactJS version uses any npm packages which can cause some trouble with Meteor?

Best,
Andras
Hi, we have a Reactjs project integrated with the Meteor framework. If you are interested, after purchase please send us a message via our profile page and we will send you the files by email.

Let us know if you have any question

Thanks
Regards
Hi I am trying to install angular 2 but it doesn't work.
I tried npm start.
Hi I was trying to use your template, but in my system I use MEAN, but you use your on system, I need to have systemjs.config.js to work, and its doesnt have.
Hi, you need to start installing GIt and npm dependencies . Then install angular-cli to manage the project.After those steps, you can run "ng serve" to preview the app. Please see in docs for more instructions.
This is template is currently not compatible with MEAN, we mean that there's not version for that framework. You can use the angular project but not the angular2 if you want to use in your MEAN app.

Regards
Hello,
Are there any PSD files for the project?
Hi, no sorry, there's not PSD for this project.

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

$16
1080Purchases

Licenses: Details »

Single application $16
Version:1.9.5
Type:
  • HTML Template
Bootstrap: Compatible with 3.3.x
Layouts:
  • Responsive
  • Fluid
  • Fixed-width
Browsers:
  • IE 9, 10, 11
  • Latest Chrome
  • Latest Edge
  • Latest Firefox
  • Latest Safari
Uses Less:Yes
Uses Sass:Yes
Categories:
Tags: angularjs, dark, html5, material, meteor, mvc, react, responsive admin template, rtl, svg
Item#:WB0901P31
Released:1 year ago
Updated:2 weeks ago
Sold exclusively on WrapBootstrap
themicon

themicon

Signed up 3 years ago

Need a front-end theme?

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 9/10/11
  • Latest Opera

Features & includes

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