444 comments found.
Good item, I would like to have a discussion on developing a Admin template. please write me on jakjim@gmail.com for further discussion
Thank you.. 
Hi,
Just found out that this template has laravel version. Is it possible to send me the webpack.mix.js that used in the laravel version?
Hi,
Sure, you can have it here.
mix.js('resources/js/app.js', 'public/dist/js')
.sass('resources/sass/app.scss', 'public/dist/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
})
.autoload({
'jquery': ['$', 'window.jQuery', 'jQuery']
})
.copyDirectory('resources/json', 'public/dist/json')
.copyDirectory('resources/fonts', 'public/dist/fonts')
.copyDirectory('resources/images', 'public/dist/images')
.copyDirectory('node_modules/slick-carousel/slick/ajax-loader.gif', 'public/dist/css')
.copyDirectory('node_modules/summernote/dist/font/summernote.woff', 'public/dist/fonts/summernote')
.browserSync({
proxy: 'midone.test',
files: ['resources/**/*.*']
});
Thank you
You’re very welcome..
Hi, how would I apply a date picker to a field which didn’t exist at page load? I am dynamically creating a form, and want to be able to reapply the date picker to all fields with the date picker class.
Many thanks
Luke
Hi Luke,
You can re-call the plugin after creating dynamic components by calling ”$(”#el”).daterangepicker(options)”. Check this documentation for the daterangepicker options.
https://www.daterangepicker.com/hi, can you convert and release a wordpress version of this… its a very cool one.
Hi,
Thank you for your interest, but I am sorry We are not making templates for wordpress.. 
Hello, sorry I’m not an expert in javascript. Question how can I use files or seperate files from Source/scr/js because app.js in dist/js is so huge specially I will not use components on specifica page. For example I have a page which I only wan’t to use chart.js is that possible?
Can you give me sample code on that? thank you
Hi,
To modify the JS files you need to install the dependecies first by running “yarn install” and “yarn run watch” to re-compile the assets (Install Yarn first if you never install it).
You can choose the plugin you want to use by remove or add it in ”/src/js/app.js”.
Hello,
So meaning for example I have recompiled the app.js using yarn all dependencies are usable on all pages where i include app.js. For example I don’t want to use chart.js in login profile page, it will still load since it is compiled in app.js?
Yes, all the plugins are imported by default for demo purpose. You need to customize it depends on your needs.
Thank you. Just noticed that css is 3mb. Is there a way to reduce file size besides from magnifying the file. Are all the codes inside necessary in the theme?
Not really but almost all the codes are used by default. Like the JS files you can also check the ”/src/sass/app.scss” to adjust the plugins or base components you want to use and re-compile the assets.
Hello, sorry to bother again, just finished the instructions in installation.html and saw folders called ‘node_modules’. What’s the name of the folder used in the template.
Hi,
Sorry, I don’t get it. Did you mean list of directories used by the template inside “node_modules”?
sorry about my question, what I mean is what are base js and css used in the template without the 3rd pary component like chart.js etc.etc. For example I just wanna run the basic template, top bar, mobile menu side bar etc. So I have an idea which to retain and which to remove
I got it, 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.
Cool. Thank you very much sir for your fast response.
You’re welcome..
Wow after removing components and 3rd parties, CSS is still at 3.2 MB from 3.6
Yes, the Tailwind itself took more thank 3 mb after compiling. It’s normal since every css properties are compiled into a single utility class.
You check this Tailwind documentation to reduce the core file size by removing unused css, hope it helps.
https://tailwindcss.com/docs/controlling-file-size/How can I change the sidebar arrow in icewind? https://elegantred.hermonnetwork.com/midone-red.jpg kindly check encircled in green
Hi jeckx2,
Thank you for your patient,
You can change it at the following sass file ”/src/sass/components/_side-nav.scss”.
And replace the following color codes. https://prnt.sc/11mbbbtHope this helps.
Best regards, Left4code Team
coooooooooooooooooooool! got it, thanks a million man
You’re very welcome..
Best regards, Left4code Team
Sorry to bother you again, how can i make modal visible with jquery. I tried this code and its not working $(’#madal-name’).modal(‘show’);
Hi jeckx2,
You can use the following codes to show/hide/toggle modal.
// Show modal
cash('#programmatically-show-modal').on('click', function() {
cash('#programmatically-modal').modal('show')
})
// Hide modal
cash('#programmatically-hide-modal').on('click', function() {
cash('#programmatically-modal').modal('hide')
})
// Toggle modal
cash('#programmatically-toggle-modal').on('click', function() {
cash('#programmatically-modal').modal('toggle')
})
Hope this helps.
Best regards, Left4code Team
In mobile view: Is it possible to make menu bar from left ? instead of top drop down ?
Hi,
No, We have no option for that so it will only appear from top.
Can you make left sidebar, will give charges for that. Please let me know. Thank you
Hi,
I am sorry we are currently working on the item main updates so we can’t handle any custom request.
I am trying to host my website, however it takes some seconds to load the css and js, I tried to minify those files, is there any other way to optimize the loading speed of these static files you gave us?
Hi,
Have you tried “yarn run production”?
I have never heard of that command, any guide on using it ?
You need to use the code from “Source” directory to doing this.
- First, install yarn from here: https://classic.yarnpkg.com/en/docs/install/#mac-stable - Then run “yarn install” to install the template dependencies. - And last “yarn run production” to minify all the assets.
You can check more about Laravel Mix (Compiling Assets tools we used) at link below.
https://laravel.com/docs/7.x/mix#running-mixHi please how can i get the sidebar to close after another link has been clicked, using it on an SPA thanks.
Hi,
With jQuery you can use this code:
$('.side-nav').find('a').removeClass('side-menu--open')
$('.side-nav').find('ul').removeClass('side-menu__sub-open')
$('.side-nav').find('ul').removeAttr('style')
oh thanks
You’re very welcome..
Hello, I was waiting for my monthly payment to make the purchase, when I went to see now the amount increased from $ 16 to $ 20, it is possible to make it for $ 16, because the cost of dola in Brazil is very high, apart from the paypal fee + $ 2 : /
Hi,
I am very sorry, it was a discount price and only applies to the first 300 sales. However, you still can take a look at this item.
https://themeforest.net/item/letz-laravel-admin-dashboard-starter-kit/26531442It’s Midone Laravel template with HTML template included, so basically it is the same thing. The discount will end until the end of June.
:’(
Sorry that’s all we can give, maybe you can see other discount items on themeforest..
Hi, i try to recompile and i get this error when running npm run dev, npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! MidOne@1.1.1 dev: `npm run development` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the MidOne@1.1.1 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
i try to remove node_modules, package lock file, yarn lock and install again, but this still happen, can you help me?
thanks
Hi,
Please update the “webpack.mix.js” with this code and try to recompile the assets.
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
const tailwindcss = require('tailwindcss')
mix.js('src/js/app.js', 'dist/js')
.sass('src/sass/app.scss', 'dist/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind.config.js') ],
})
.autoload({
'jquery': ['$', 'window.jQuery', 'jQuery']
})
.copyDirectory('src/json', 'dist/json')
.copyDirectory('src/fonts', 'dist/fonts')
.copyDirectory('src/images', 'dist/images')
.copyDirectory('node_modules/slick-carousel/slick/ajax-loader.gif', 'dist/css')
.copyDirectory('node_modules/summernote/dist/font/summernote.woff', 'dist/fonts/summernote')
.browserSync({
proxy: 'midone.test',
files: ['src/**/*.*']
});
i see, thanks dude
You’re very welcome..
Let me know if it doesn’t work.
Hi do you have a sample implementing the styles of scss and postcss in react?
Hi,
I am sorry I never use react before. But every SASS files is imported in ”/resources/sass/app.scss”. You can check this TailwindCSS documentation to work with any Build Tools you are using with.
https://tailwindcss.com/docs/installation#build-tool-examplesHow can I make the data-table to show the latest item on the list? because it always starts with the first item but I want to start with the last one
Hi,
The datatable used in the template is initated with default configuration, you can check it at ‘resources/js/datatable.js’.
You can add this config to make the rows ordered by it’s original DOM source.
$('#example').dataTable({
"order": []
});
Please check this link for more info, https://datatables.net/reference/option/order.
Don’t forget to run “yarn run watch” after making changes to the js files.
Hi, Request for a feature in future update if possible. Is it possible ti show loading icon till the page completely loads.
Hi,
I will try to consider it. Thank you..
Hi, Thank you one more question pls, feather icons are not working for dynamically adding elements, when i search about it , its showing if i call “feather.replace()” this will work. But i am confused where to add this in “app.js”, can u help me pls, thanks in advance..
Hi,
You need to call this function “feather.replace()” everytime after adding new elements. It’s used to replace the icon HTML tag with the icon SVG elements.
Thanks, but is the feather js is global ? i can use in another js?
Hi,
Sorry for late respond, please update this file “src/js/feather.js” with the following code to make it global.
import feather from 'feather-icons'
(function() {
"use strict";
// Feather Icons
feather.replace({
'stroke-width': 1.5
})
window.feather = feather
})()
And don’t forget to recompile the assets.
Hi.
I need to be able to dismis the alerts, however, this doesn;t work, even on the demo page.
Hi,
Which demo page you mean?
You can refer to this page http://midone.test/page/side-menu/modal. You can follow this section:
- “Programmatically Show/Hide Modal” https://prnt.sc/sxelgg
- “Modal With Close Button” https://prnt.sc/sxeln3
Its the side-menu-alert.html page. Icon & Dismiss Alerts section. Its not dismissing when clicking the x or outside the alert.
I’am very sorry, there is still no JS code for the alert.
So it’s just the layout without close functionalities. I will add this one to the next update.
I am not able to get the dashboard to run locally after install Yarn, then running yarn watch and yarn run dev
https://paste.ofcode.org/JAsiAn6ubhK3DpBeZNtuc6Hi,
May I know your email? I will send you the template with installed dependencies.
Sent..
My website stop being mobile adaptive, any help on that ?
Can I see it online?
Hello, I need help with customizing the data of the charts without losing the style, any guide for doing that?
Hi,
Sure, which chart did you want to customize?
Hello and good day. Love the work you have done so far, on your template, really awesome, well that’s why i purchased it. So i need to use your template in my react app and i need assistance. Do i import the dependencies into my package.json and build from there, if so then how do i start working on the html files part, after running the install command. If not then please how do i integrate your template into my react application?. Thanks a Bunch
Hi siscorule
Honestly I never use react before, but I often use vuejs. I think the basic is same this template use some jquery plugins. You need to initiate those plugins after the components mounted.
You can check used plugins in /resources/js/.
Thanks a lot, i think i understand now. So i install the plugins dependencies, then import the js files in the resource folder, practically in main.js of vue, and that should do it right?.
Yes, something like that..
Thanks, i have gotten it to work. You awesome
You’re very welcome..
I need right-to-left support
Hi,
I am very sorry right-to-left is currently not available..
Just a quick one, is there any landing page one can use with this dashboard template ?
Kindly recommend any external landing page that doesn’t involve a lot of work before it fits with this one
Hi,
We don’t have any landing page shiped with this version, can you give an example of the landing page content you expect?
Maybe I can add it in the next version.
That’ll be awesome! Something just simple like an horizontal menu bar and some basic landing page components that’ll help give an intro
Something like https://bootstrapmade.com/demo/Bikin/ but way simpler
Nice one, I will add it in the next version..
