444 comments found.
Hi,
We purchased your template two days ago.
Although we install app.js, when we write ajax and jquery codes, we see “ReferenceError: $ is not defined ” error.
Could you please help us?
Thanks,
Hi ucribrahim,
Thank you for your purchase.. 
As Midone v.2 above released, the template doesn’t use jquery as a required dependency and replaced with cash-dom library (a small jquery like library for dom manipulation). Please check it here.
https://kenwheeler.github.io/cash/However you can still use jquery by adding it manually.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
Thank you so much.
It’s solved.)
You’re welcome..
Permisi, mau tanya.
Apakah template ini sudah di pisah jadi komponen2 kecil yang siap digunakan ulang di halaman manapun? Lalu bagaimana kah cara saya mengakses komponen2 tersebut? Apakah saya harus meng-copy paste satu per-satu atau bisa di buat menjadi seperti komponen pada framework2 seperti React JS?
English translation:
Has this template been separated into small components ready reused on any page? Then how do I access these components? Do I have to copy and paste one by one of component code or can I make it into a component in framework2 like React JS?
(Kalau bisa pakai bahasa indonesia balas nya pakai bahasa indonesia aja bang. Sorry.)
Halo lamualfa,
Untuk component kita siapkan mirip dengan component pada boostrap (modal, dropdown, tab, button, dll). Untuk component seperti modal dan dropdown juga kita sudah siapkan fungsi programmatic js-nya untuk show, hide, toggle, dll.
Kalau di react untuk dipisah per-component jadi per-file itu bisa-bisa saja tergantung selera codingnya. Tapi ada banyak plugin di template ini yang tidak diperuntukan untuk react (chart, datepicker, custom select, dll) jadi harus di custom ulang kalau mau integrasi ke react. Untuk saat ini kita hanya punya yang versi vuejs bisa dicek disini.
https://themeforest.net/item/midone-vuejs-admin-dashboard-template/28123408Untuk versi vuejs ini plugin yang digunakan sudah disesuaikan menggunakan vue plugin. Seperti chartjs kita sesuaikan ke vue-chartjs, dan penyesuaian plugin-plugin lainnya.
Oh berarti untuk versi Vue udh siap pakai ya komponen nya? Contoh nya komponen kayak Sidebar, Navbar, Box, Table, dll?
Yap betul, untuk gaya penulisan per-component per-file bisa sesuai kebutuhan. Kalau ada kesulitan saat implementasi bisa kontak kami via email support..
Mantap. Ok, sip. Langsung otw beli versi VUE JS. Saya harus mendukung produk2 karya anak bangsa. Terimakasih bro.
Baik kak terima kasih!
Happy coding..
Sip, versi Vue sudah saya beli. Makasih banyak bro.
Hello,
in ur demo pages->wizard doesnt works well, i am clicking next but nothing is happening. Is there now js here?
Hi harispervaiz02,
Yes, We don’t provide any javascript implementation for wizard page because you may need validation for each form or some other conditioning for each wizard form.
Hi Left4Code,
We really like this theme and want to purchase it for our project. But currently, I noticed that design files don’t come along with the theme.
We would need to make some customizations to the UI for our product and it would really help to have the design files.
Would it be possible to send us the design files?
Hi pruthvi1994,
Thank you so much for your interest to our template..
Actually I really want to add a design file to the download file, but the designs currently available are still quite messy here and there (We are still focused on improving the product itself, fixing bugs and others).
But if you are interested on purchasing the template we can send you the current available design, we have 4 main pages in XD format.
Hello,
there is no forgot password page, please help
Hi harispervaiz02,
You can make it from login or register page, just adjust the required fields..
thanks
Does the theme contain a footer?
Hi MadamZavari,
What kind of footer did you mean?
Can you give me an example?
Hello,
When i initialized telerik into the project, there is a conflict between app.js and telerik js file. How can i handle this situation? I can’t use both of them together. For example, the code line below is undefined in console, however if i disable app.js file it’s working normally.
$(”#ddlCharge”).data(“kendoDropDownList”)
Thank you.
Hi ahmetonur90,
What version are you using?
Can you try to include jquery after app.js and before telerik.js?
Something like this:
<script src="app.js"></script>
<script src="jquery.min.js"></script>
<script src="telerik.js"></script>
Hi,
The version is 1.1.3
I tried what you described but this time app.js components are also gone as same as telerik’s. I think it’s not possible to use together. I just want to use the theme in simple form. Is there an app.js file for that purpose? For example I don’t want to use data tables, charts, widgets etc. If I just can handle the basic features it would be great.
Can I see your site online?
Yes you can remove those unused plugins by default, please check the following code, you can remove this code to work only with the basic features of the template.
App.js
// 3rd Parties
import bootstrap from './bootstrap'
import chart from './chart' // can be removed
import highlight from './highlight' // can be removed
import feather from './feather'
import slick from './slick' // can be removed
import tooltipster from './tooltipster'
import datatable from './datatable' // can be removed
import datepicker from './datepicker' // can be removed
import select2 from './select2' // can be removed
import dropzone from './dropzone' // can be removed
import summernote from './summernote' // can be removed
import validation from './validation' // can be removed
import imageZoom from './image-zoom' // can be removed
import svgLoader from './svg-loader'
import toast from './toast' // can be removed
// Components
import maps from './maps' // can be removed
import chat from './chat' // can be removed
import dropdown from './dropdown'
import modal from './modal'
import showModal from './show-modal'
import tab from './tab'
import accordion from './accordion'
import search from './search'
import copyCode from './copy-code' // can be removed
import showCode from './show-code' // can be removed
import sideMenu from './side-menu'
import mobileMenu from './mobile-menu'
import sideMenuTooltip from './side-menu-tooltip'
App.scss
// Fonts
@import 'fonts/roboto';
// Breakpoint
@import 'breakpoint';
// 3rd Parties
@import '~slick-carousel/slick/slick'; // can be removed
@import '~slick-carousel/slick/slick-theme'; // can be removed
@import '~highlight.js/scss/github'; // can be removed
@import '~tooltipster/dist/css/tooltipster.bundle.min';
@import '~tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min';
@import '~tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-borderless.min';
@import '~daterangepicker/daterangepicker'; // can be removed
@import '~select2/src/scss/core'; // can be removed
@import '~dropzone/dist/dropzone'; // can be removed
@import '~jquery-toast-plugin/src/jquery.toast'; // can be removed
// Animations
@import 'typing-dots';
@import 'zoom-in';
@import 'intro';
// Components
@import 'top-bar';
@import 'app';
@import 'login';
@import 'mini-chat-box'; // can be removed
@import 'mini-chat-list'; // can be removed
@import 'mini-chat'; // can be removed
@import 'table';
@import 'table-report'; // can be removed
@import 'report-timeline'; // can be removed
@import 'report-chart'; // can be removed
@import 'search';
@import 'input';
@import 'button';
@import 'notification';
@import 'image-fit';
@import 'box';
@import 'report-box'; // can be removed
@import 'global';
@import 'content';
@import 'top-nav';
@import 'side-nav';
@import 'breadcrumb';
@import 'tailwind';
@import 'top-bar-boxed';
@import 'mobile-menu';
@import 'pagination';
@import 'dropdown';
@import 'modal';
@import 'tab';
@import 'checkbox';
@import 'file'; // can be removed
@import 'inbox-filter'; // can be removed
@import 'inbox'; // can be removed
@import 'scrollbar';
@import 'chat'; // can be removed
@import 'boxed-tabs';
@import 'chat-dropdown'; // can be removed
@import 'wizard'; // can be removed
@import 'blog'; // can be removed
@import 'news'; // can be removed
@import 'pricing-tabs'; // can be removed
@import 'accordion';
@import 'error-page';
@import 'tooltip';
@import 'datatable-wrapper'; // can be removed
@import 'datepicker'; // can be removed
@import 'select2'; // can be removed
@import 'summernote'; // can be removed
@import 'slick'; // can be removed
@import 'jquery-validation'; // can be removed
@import 'slick'; // can be removed
@import 'search-result';
@import 'mini-report-chart'; // can be removed
@import 'notification-content';
@import 'report-maps'; // can be removed
@import 'pos-dropdown'; // can be removed
@import 'pos'; // can be removed
@import 'toast'; // can be removed
@import 'post'; // can be removed
Don’t forget to re-compile the assets after making changes.
Thank you for the reply. The site is not online, you need vpn access. It doesn’t matter anyway. I removed the @imports you said + bootstrap and it worked. I decided not use bootstrap components in the pages that telerik initilized. That’s my solutuion right now
Thank you, glad it works..
Is there support for validating components such as select2/datepicker (same as side-menu-light-validation.html)?
Hi giovanierthal,
I don’t think it can work with custom input like select2/datepicker, so you need to make custom js code to validate those input
Hi,
How can change datepicker format like mm/YY ?
And get value on event select2 onchange also?
Thanks,
Hi luckaka125,
You can find the datepicker initialization at ”/src/js/datepicker.js” and for select2 at ”/src/js/select2.js”.
To change the datepicker date format at “on(“apply.daterangepicker”)” callback. Please check the following code snippet.
https://www.daterangepicker.com/#file-drp-snippet-6-jsFor on change event with select2, please refer to this documentation:
https://select2.org/programmatic-control/eventsThank you always and again for the great project, ask me a question can I use only the dark mode as a default and disable the light mode? Would you help me? And the project has the primary color (BLUE) as I could define my own color.
Hi Kriacoes,
Of course, just add class=”dark” to HTML root tag.
Replace this
<html lang="en">
Into this
<html lang="en" class="dark">
I will add this into documentation later.
You can change the background color at “_global.scss” please replace the code into this:
html {
@apply bg-theme-1;
&.dark {
@apply bg-dark-2;
body {
@apply text-gray-300;
*, ::before, ::after {
@apply border-dark-3;
}
}
}
body {
-webkit-font-smoothing: antialiased;
@apply overflow-x-hidden py-3 px-8 font-roboto text-sm text-gray-800;
@media (max-width: $sm) {
@apply px-3;
}
}
}
Now you can change the blue color from tailwind.config.js
Perfect my friend thank you so much the dark class worked like a glove!
About the color change I’m using app.css and app.js, As far as I could understand it is compiled from everything inside so I don’t need to declare the other js and css files correct?
Yes, if you need to write another JS or CSS stuff I would recommend you to include it at those app.scss and app.js.
Thanks a lot again friend.
You’re very welcome..
Hi alysonhost,
Thank you..
Yes we have, you can show it by adding the “show” class directly to the modal class or by showing it programmatically via javascript.
great, I’m a very layman at this, have some example in the demo ?
Yes, you can check it at “Programmatically Show/Hide Modal” section
Sorry in advance, can you please send us your purchase code? Because I didn’t see the purchased label on your username.
You can send it at here: leftforcode@gmail.com
Then we will help you through there. Thank you..
I’m evaluating to see if I will have everything I need
Of course according to your needs, the features are available in the package.
We will help you after you make a purchase..
Hi, I want this template with two layout (ltr and rtl), i also want the table data to be exportable. if can you do that I will buy it . I ask you for a quick response> thanks
Hi haythamo,
I am verry sorry there’s no rtl version of this template.
map pins do not appear when files are uploaded to the server.but works on localhost.
Hi kaanyakar,
May I know your online server address?
According to the chrome console errors, I found that the “location.json” file is missing on your server.
https://prnt.sc/tvld00 Can you check it? The path should be here: http://kendineturuncu.com/dist/json/location.jsonHello,
I hope you’re doing well. I need a little help with script imports. I am aware that all libraries are imported in app.js. I would like to individually import the libraries (Datatables, Select2, etc) without breaking the whole theme. How can I achieve this? What is necessary in app.js?
Cheers
Hi IrvinTL,
Please check the following code, you can remove this code to work only with the basic features of the template.
App.js
// 3rd Parties
import bootstrap from './bootstrap'
import chart from './chart' // remove
import highlight from './highlight' // remove
import feather from './feather'
import slick from './slick' // remove
import tooltipster from './tooltipster'
import datatable from './datatable' // remove
import datepicker from './datepicker' // remove
import select2 from './select2' // remove
import dropzone from './dropzone' // remove
import summernote from './summernote' // remove
import validation from './validation' // remove
import imageZoom from './image-zoom' // remove
import svgLoader from './svg-loader'
import toast from './toast' // remove
// Components
import maps from './maps' // remove
import chat from './chat' // remove
import dropdown from './dropdown'
import modal from './modal'
import showModal from './show-modal'
import tab from './tab'
import accordion from './accordion'
import search from './search'
import copyCode from './copy-code' // remove
import showCode from './show-code' // remove
import sideMenu from './side-menu'
import mobileMenu from './mobile-menu'
import sideMenuTooltip from './side-menu-tooltip'
App.scss
// Fonts
@import 'fonts/roboto';
// Breakpoint
@import 'breakpoint';
// 3rd Parties
@import '~slick-carousel/slick/slick'; // remove
@import '~slick-carousel/slick/slick-theme'; // remove
@import '~highlight.js/scss/github'; // remove
@import '~tooltipster/dist/css/tooltipster.bundle.min';
@import '~tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min';
@import '~tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-borderless.min';
@import '~daterangepicker/daterangepicker'; // remove
@import '~select2/src/scss/core'; // remove
@import '~dropzone/dist/dropzone'; // remove
@import '~jquery-toast-plugin/src/jquery.toast'; // remove
// Animations
@import 'typing-dots';
@import 'zoom-in';
@import 'intro';
// Components
@import 'top-bar';
@import 'app';
@import 'login';
@import 'mini-chat-box'; // remove
@import 'mini-chat-list'; // remove
@import 'mini-chat'; // remove
@import 'table';
@import 'table-report'; // remove
@import 'report-timeline'; // remove
@import 'report-chart'; // remove
@import 'search';
@import 'input';
@import 'button';
@import 'notification';
@import 'image-fit';
@import 'box';
@import 'report-box'; // remove
@import 'global';
@import 'content';
@import 'top-nav';
@import 'side-nav';
@import 'breadcrumb';
@import 'tailwind';
@import 'top-bar-boxed';
@import 'mobile-menu';
@import 'pagination';
@import 'dropdown';
@import 'modal';
@import 'tab';
@import 'checkbox';
@import 'file'; // remove
@import 'inbox-filter'; // remove
@import 'inbox'; // remove
@import 'scrollbar';
@import 'chat'; // remove
@import 'boxed-tabs';
@import 'chat-dropdown'; // remove
@import 'wizard'; // remove
@import 'blog'; // remove
@import 'news'; // remove
@import 'pricing-tabs'; // remove
@import 'accordion';
@import 'error-page';
@import 'tooltip';
@import 'datatable-wrapper'; // remove
@import 'datepicker'; // remove
@import 'select2'; // remove
@import 'summernote'; // remove
@import 'slick'; // remove
@import 'jquery-validation'; // remove
@import 'slick'; // remove
@import 'search-result';
@import 'mini-report-chart'; // remove
@import 'notification-content';
@import 'report-maps'; // remove
@import 'pos-dropdown'; // remove
@import 'pos'; // remove
@import 'toast'; // remove
@import 'post'; // remove
Don’t forget to re-compile the assets after making changes.
I’m not sure to understand. Why should we re-compile? I am not used to working with a compiler. Can you please contact me at irvin@tinoco.ca
Hi IrvinTL,
I just sent you an email, please check it..
Thank you
Hello, nice theme again, please how can i change the colors of the theme, like where all blue should be like red or green and it’s respective colors or other colors. or is there a way i can re build the files or something
Hi Siscorule,
You can find it at “tailwind.config.js” (colors section), we used Tailwind config for managing all the theme colors.
You can find out more about how to customize it here:
https://tailwindcss.com/docs/customizing-colors/yes i have gone there and changed theme one to another color, but the background color still remains the same, after i have done npm run dev to rebuild the files?. Please what do i do from here, changing the colors did not work for me, i even removed all colors but still the blue background remains the same while others like the white background for the .content section changed
yes i have gone there and changed theme one to another color, but the background color still remains the same, after i have done npm run dev to rebuild the files?. Please what do i do from here, changing the colors did not work for me, i even removed all colors but still the blue background remains the same while others like the white background for the .content section changed
Ahh I see, there’s something missed in one of the theme core files. Please open up this file:
“resources/sass/app.scss”
Then change line 2 from
"background: #1C3FAA;"
Into
@apply bg-theme-1;
I will update it in the next release.
Thank you for reporting this!
The next update might take a little longer, because we will remove jQuery from the template dependencies and replace some jQuery plugins used by the template.
Hello i don’t have resources folder but src folder and this folder’s app.scss is just for importing other dependencies, there is however _app.scss but this one just has the following code
.app { background-repeat: no-repeat; background-attachment: fixed; @apply py-5; }
what do i do, please note i don’t really do scss.
so i tried placing it in the _app.scss and it worked thanks
Yes I mean “src” folder. It should be at _global.scss.
Your’e welcome..
Hello, thanks for your assistance so far. So i converted your work to vue and react wey before you released your vue version, after seeing what you did with the vue version, i saw somethings that am finding a bit difficult to do.
so i want to have the side-menu like you have it, for instance how do i trigger all sub-menu dropdown in the side menu to close except for the current active menu. i want to achieve that without using vue manipulation. thanks.
Hi siscorule,
I am sorry for late replay,
It’s simple actually, you can hide all those submenu by removing the active class. Then you can check matching route (in vue maybe with route name “this.$route.name”) with every submenu items and show it if the menu is currently active.
Please check class differences below. https://prnt.sc/u7tdk7 https://prnt.sc/u7tdpuif you use vue don’t forget to place the active menu function in the watch method so that every page changes can effect the active menu.
watch: {
$route() {
// Initiate active menu function here
this.activeMenu()
}
}
Hello, thanks for this nice theme. I’d like to add hover color change to buttons like in Bootstrap buttons (when you hover on them, the color slightly changes). Can you please add or show me how? Thanks!
Hi st34m,
Thank you!
You can simply use Tailwind hover variant class with background change, please check the code below:
<button class="bg-blue-500 hover:bg-red-500">Button</button>
You can find out more about available theme colors at tailwind.config.js (colors section) and built in Tailwind colors here:
https://tailwindcss.com/docs/customizing-colors/#appThanks!
You’re very welcome..
Hi!
I have to say, your theme is the best I have ever seen
But, unfortunately I have one problem, regarding jQuery and DataTables.
I’ve implemented a few addons for Datatables (Buttons for HTML export and PDF make – this are all official Datatables extensions). And when I add them, console gives me this error: Uncaught ReferenceError: jQuery is not defined
And if I manually include jQuery file, everything is ok (except that that now jUery is included 2 times – one time in app.js, and second time manually), and obviously, because of two includes, some jQuery plugins won’t work.
Do you please have some advice how Datatables plugins should work in your setup?
Thank you very much
Hi dp41646,
Thank you for using our theme!
How about to include the datatables library after app.js? Something like this:
<!-- BEGIN: JS Assets-->
<script src="/dist/js/app.js"></script>
// Datatable addons here
<!-- END: JS Assets-->
Maybe you can try to customise Datatables build from here:
https://datatables.net/download/index
I’ve selected Buttons, Flash and HTML5 export (with jszip and pdfmake), printview and responsive.
Thank you for your help!
Please try this build, I’ve select exactly like you have listed above:
<script src="dist/js/app.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/b-print-1.6.2/r-2.2.5/datatables.min.js"></script>
OMG, thank you! I completely forgot to include jQuery package in their download manager. Now is everything working ok. Thanks again!
You’re very welcome..
Man this theme is beautiful and well thought out!
Hi Evolutionsic,
Thank you! 
We put our creativity in every detail of this item, glad you like it..
How can I keep a modal open when clicking outside the modal area?
Hi Giovanierthal,
The option is currently not available but you can modify the modal core js file to quickly achieve this. Open this file ”/src/js/modal.js” and comment out this line:
// Line 89 - 91
$('body').on('click', function(event) {
hide(event.target)
})
Don’t forget to recompile the assets to apply changes.
