444 comments found.
Hi,
i’m using the html version of the midtone theme. Now i want to use the fullcalender plugin, without changing the app.js file. I want to use a custom.js file and do something like:
$(“owncalendar”),FullCalender() ...
How can is use this plugin in my js file?
Hi,
Thank you for reaching out to us,
Unfortunately, you will need to make a little modification to be able to use the plugin outside `app.js`. Please open this file ”/src/js/bootstrap.js” and add these lines.https://i.imgur.com/HGnMQSs.png
import { Calendar } from "@fullcalendar/core";
import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";
window.Calendar = Calendar;
window.interactionPlugin = interactionPlugin;
window.Draggable = Draggable;
window.dayGridPlugin = dayGridPlugin;
window.timeGridPlugin = timeGridPlugin;
window.listPlugin = listPlugin;
Run `yarn run watch` to compile the assets. This will make the fullcalendar plugin globally accessible and you can use the plugin without changing the `app.js`.
Hi,
i’m using the html version of the midtone theme. Now i want to use the fullcalender plugin, without changing the app.js file. I want to use a custom.js file and do something like:
$(”#owncalendar”),FullCalender() ...
How can is use this plugin in my js file?
Hi,
Thank you for reaching out to us,
Unfortunately, you will need to make a little modification to be able to use the plugin outside `app.js`. Please open this file ”/src/js/bootstrap.js” and add these lines.https://i.imgur.com/HGnMQSs.png
import { Calendar } from "@fullcalendar/core";
import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";
window.Calendar = Calendar;
window.interactionPlugin = interactionPlugin;
window.Draggable = Draggable;
window.dayGridPlugin = dayGridPlugin;
window.timeGridPlugin = timeGridPlugin;
window.listPlugin = listPlugin;
Run `yarn run watch` to compile the assets. This will make the fullcalendar plugin globally accessible and you can use the plugin without changing the `app.js`.
I have trouble using data table, upload file, js cannot run due to conflict with app.js. the template is not pure html css and js, I cannot customize it into my project. My project is netcore.
Hi,
Thank you for reaching out to us,
Sorry, but I’m not sure I fully understand your question, can you explain in more detail about pure html css and js?
when integrating the template into the project, all jquery fails to run. all scripts in app.js, I don’t know how to make it compatible with other skins. if split js components into individual files is fine for me. jquery is in conflict, can’t run my other scripts.
Please open this file ”/src/js/bootstrap.js” and replace with the following code.
// Load plugins
import helper from "./helper";
import * as Popper from "@popperjs/core";
// import dom from "@left4code/tw-starter/dist/js/dom";
import jQuery from "jquery";
// Set plugins globally
window.helper = helper;
window.Popper = Popper;
// window.$ = dom;
window.$ = window.jQuery = jQuery;
Run `yarn add jquery` to install jquery and recompile the JS assets with `yarn run watch`.
How to laravel 9 integrate??
Hi,
Thank you for reaching out to us,
Unfortunately, integrating to Laravel 9 are outside the scope of what we able to support for this item. If you would like to work with Laravel 9, you can consider buying the Laravel version of Midone, and follow the configuration we have provided there.
Hi, how do I implement the laravel jetstream?
Hi,
Thank you for reaching out to us,
Unfortunately, integrating to Jetstream are outside the scope of what we able to support. If you would like to work with someone more closely to help you to integrate the template with Jetstream, you could consider working with a freelancer or one of the Envato Studio providers.
Hi,
I have implemented the template on CODEIGNITER framework PHP.
I’m not able to use custom script which are relevant to specific pages only. Here is an example where the tabulator is not working with the below code. Please advise.
<!- BEGIN: JS Assets->
< script src=" /assets/dist/js/app.js"></ script >
<!- END: JS Assets->
< script >
(function () {
console.log("test");
var tableData = [
{id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
{id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
]var table = new Tabulator("#allcompanies", {
data:tableData, //set initial table data
columns:[
{title:"Name", field:"name"},
{title:"Age", field:"age"},
{title:"Gender", field:"gender"},
{title:"Height", field:"height"},
{title:"Favourite Color", field:"col"},
{title:"Date Of Birth", field:"dob"},
{title:"Cheese Preference", field:"cheese"},
],
});
</ script >});Hi,
Thank you for reaching out to us,
Everything inside `app.js` will be scoped including variables, functions and plugins. Since you are placing your JS code outside of `app.js`, you need to attach the plugin as a global object.
Please add this line to ”/src/js/bootstrap.js”.
// Load plugins
import helper from "./helper";
import * as Popper from "@popperjs/core";
import dom from "@left4code/tw-starter/dist/js/dom";
// Add this line
import Tabulator from "tabulator-tables";
// Set plugins globally
window.helper = helper;
window.Popper = Popper;
window.$ = dom;
// And add this line
window.Tabulator = Tabulator;
Run `yarn run watch` to recompile the JS assets.
Hello, thank you for a wonderful template.
I bought HTML version because I wanted to integrate it with a server-side web framework. After downloading I realized buying the Vue version would provide a clear separation of components, thus making integration much easier (as I could separate components in the same way).
Is it possible to “upgrade” to Vue version? I’m ofc willing to pay a difference for it.
Best, Jakub
Hi,
Thank you for reaching out,
Yes we can help you with that, please make a purchase for the vue version and you can submit a refund request for the HTML version at the following link.
https://themeforest.net/refund_requests/new
We will process it immediately.
Hey,
The Enigma React starter template has a bug. When you refresh the page the menu disappears a little until it’s entirely gone.
Steps to reproduce
In chrome or Edge
Navigate to http://localhost:3000/top-menu/page-1
Then refresh the page and you’ll see the Page 1 and Page 2 menu items slide up a little.
Hi,
Thank you for reporting the issue,
We have released an update for this, please replace this file ”/src/assets/css/components/_top-nav.css”.
Let me know if you still need further help.
Awesome thank you just tested and it’s fixed #shipit
Your’e welcome.. 
I have difficulties on integrating tabulator to my laravel 8 project, i imported tabulator.js bellow app.js and then it seems working however my filters are not working, maybe for better understanding of better from stackoverflow https://stackoverflow.com/questions/72571735/tabulator-are-not-working-on-midone-template
Hi,
Thank you for reaching out,
You can’t always check `table.setFilter()` or `table.download()` directly in the console. Everything imported in `app.js` will be bundled and scoped in an internal object so you need to make it global to access the object from the console.
For example, you can add this line after the tabulator initialization.
let table = new Tabulator("#tabulator", {
...
});
// Add this line
window.table = table;
Now, you should be able to access the object from the console. You may also need to check if the `onClick` event is working correctly.
Hello,
do I need to purchase Tailwind https://tailwindui.com/pricing also with Midone tempalte or it’s complete html+css+js template ready for use?
Hi,
Thank you for reaching out to us,
In short, the answer is no you don’t need to purchase TailwindUI license. We have built-in components ready to use.
hi, i just bought this template and i have difficulties on how to integrate this template with laravel
Hi there,
Thank you for reaching out to us..
It’s really simple since we used the same assets bundler `Laravel Mix`. However, you may need a little tweak to make it works. Please follow the following steps.
1. Copy the config files to your root project directory. postcss.config.js tailwind.config.js webpack.mix.js
2. Open package.json and adjust the dependencies to your project dependencies.
3. Copy the assets from `/src` to `/resources`.
You can load the assets with Laravel `mix()` directives.
<link rel="stylesheet" href="{{ mix('dist/css/app.css') }}" />
<script src="{{ mix('dist/js/app.js') }}"></script>
I notice I already had webpack.mix.js and packange.json, should i over write? or merge my files with yours?
So i did copy config files to my root folder, merged my webpack.mix.js and package.json with yours, then run npm run dev. But i got this error
webpack-cli { errno: -2, code: ‘ENOENT’, syscall: ‘lstat’, path: ’/Applications/XAMPP/xamppfiles/htdocs/WORK/new_project/src/json’ } npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! enigma@1.0.4 development: `mix` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the enigma@1.0.4 development script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! /Users/martinchristopher/.npm/_logs/2022-06-09T07_52_46_274Z-debug.log npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! enigma@1.0.4 dev: `npm run development` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the enigma@1.0.4 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in: npm ERR! /Users/martinchristopher/.npm/_logs/2022-06-09T07_52_46_310Z-debug.log
what did i do wrong?
I recommend to merge the config and dependencies, but if you’ve never used it before you can just replace it.
About the error, can you try compiling the HTML version? And what is your Node and NPM version?
sorry but i don’t know how to compile the error for html version, my node v14.17.5 and npm v6.14.14
It seems you need to update your Node & NPM version.
You can run `npm run install` to install the dependencies and `npm run watch` to start the compiler.
ok, i’ve updated my node to v16.15.1 and npm to v8.12.1. then i tried to run ‘npm run install’ it said missing script install, i tried to run ‘npm run watch’ it said ``` > concurrently “postcss ./src/css/app.css -o ./dist/css/_app.css—watch” “mix watch”
sh: concurrently: command not found ``` and when i tried to run ‘npm run dev’ it said ``` [Error: ENOENT: no such file or directory, lstat ’/Applications/XAMPP/xamppfiles/htdocs/WORK/new_project/src/json’] { errno: -2, code: ‘ENOENT’, syscall: ‘lstat’, path: ’/Applications/XAMPP/xamppfiles/htdocs/WORK/new_project/src/json’ } ```
Have you installed dependencies with ‘npm install’?
Sorry, it was my fault, the command should be `npm install`.
ok, i’ve run ‘npm install’ then tried npm run watch i got this error ’’‘Input Error: You must pass a valid list of files to parse’’’ and anything on copyDirective…. are error, ’’’.copyDirectory(“src/json”, “dist/json”) .copyDirectory(“src/fonts”, “dist/fonts”) .copyDirectory(“src/images”, “dist/images”)’’’ i got this message ’’‘[Error: ENOENT: no such file or directory, lstat ’/Applications/XAMPP/xamppfiles/htdocs/WORK/new_project/src/json’]’’’ i keep getting this error no such file json
You need to adjust the `copyDirectory` configuration according to your project directory structure.
For example:https://i.imgur.com/i1ImQqs.png
ok, i’ve successfully compile everything using ‘npm run dev’ then ‘npm run watch’ however i’m still unable to type ‘tailwind’ on console, it said ‘tailwind is undefined’ however, on html template i’ve downloaded when i type ‘tailwind’ on console it recognize it. I need it to trigger show modal using jQuery
Have you loaded the compiled javascript file? You may need to check if the javascript file is properly loaded.
<script src="{{ mix('dist/js/app.js') }}"></script>
turns out i need to restart it then it worked, thanks for step by step integration
Glad to help..
Hello,
I’ve trouble using the i tag with data-lucide attribute. The icon is not rendered in my page. I already included app.css and app.js from Compiled folder.
For now I can make the icon shown by using the svg tag from the rendered page that I copied from Chrome Developer Tools
Hi,
Thank you for reaching out to us,
Is there an error in the chrome console?
There is no error in the chrome or at least I don’t see one. There is no error 404 also when loading the assets, so I assumed all assets are loaded. I forget to mention that when I open the side-menu-light-icon.html from the Compiled folder the icon is rendered just fine, but when I try to copied the necessary files to my own projects, the icon doesn’t get rendered.
Can you send a very simple example to reproduce the issue? An online demo with just a blank page would be very helpful.
Hello!
Would it be possible to create any installation documentation for Rails with Esbuild?.
I think you’ll find that there is a large community of Rails developers who are migrating to Tailwind that would love to use this template. However, the installation process right now is very very difficult as it seems like this template was originally designed for PHP projects.
Hi alexcohenis,
Sorry for the late reply,
The package we are using `Laravel Mix` is actually a wrapper of webpack. We can use it standalone without being associated with Laravel or any other PHP framework.
However, we seem to be able to add a setup with `esbuild` to the documentation.
Hi, Just bought the HTML package. i want to add multiple ,js custom files and i don’t want to compile anything…. is there a simple way? cause right now, i get this error when i add a custon .js :
Cannot set property children of #<Document> which has only a getter
what i try to do :
@section Scripts {
<script src="/js/login.js"></script>
<script src="/Theme/dist/js/app.js"></script>
}Hi there,
Thank you for reaching out to us,
You don’t need to compile anything, except you want to use the plugin imported inside `app.js`.
Can you send a very minimal steps to reproduce this issue?
Hi, is this HTML version the same as it is included in Lavarel+HTML version of this template? We bought that one but it can not be used as a normal HTML template (html+css+js). Thanks
Hi Jimmi08,
Sorry for the late reply,
Yes, this is the same version as the HTML version contained in the Laravel version. Is there anything we can help with integration?
How do I hide the Side Menu options, according to permissions?
Hi vcazacu,
Thank you for reaching out,
You can follow the following steps.
1. Attach user role to view composer, open `App\Http\View\Composers\MenuComposer.php`. https://i.imgur.com/ia2Hzdq.png
2. Update menu layout. Example for `side-menu` layout `/resources/views/layout/side-menu.blade.php`. https://i.imgur.com/wIpbVEp.png
3. Final step, add the `roles` property to every menu item `App\Main\SideMenu.php`. https://i.imgur.com/VHOHPA0.png
You can also store the entire menu and its roles in the database for further development.
Hi! I Recently buy this template, i want to use it in a Angular Project like any HTML template but i can’t, could u help me pls? thanks!
Hi,
Thank you for reaching out to us,
Integrating with frontend frameworks like angular, vue, or react will be quite time consuming, and this is not included in the support.
However we will answer every question on the integration process. If you are new to Tailwind you may want to take a look at the following documentation. https://tailwindcss.com/docs/guides/angularPlease include more detailed questions so we can help with the issue you are experiencing.
Hi! I Recently buy this template, i want to use it in a Angular Project like any HTML template but i can’t, could u help me pls?, It would be nice if you could make a video explaining the installation for all the people who have the same question, thanks.
Hi,
Thank you for reaching out to us,
Integrating with frontend frameworks like angular, vue, or react will be quite time consuming, and this is not included in the support.
However we will answer every question on the integration process. If you are new to Tailwind you may want to take a look at the following documentation. https://tailwindcss.com/docs/guides/angularPlease include more detailed questions so we can help with the issue you are experiencing.
Postcss error and project wont build. Ive tried upgrading the packages and installing and running the packages in their original state as supplied from you and in all cases I get this error:
TypeError: Cannot set property ‘parent’ of undefined at Proxy.removeChild (node_modules/postcss/lib/container.js:219:38) at Rule.remove (node_modules/postcss/lib/node.js:78:19) at processApply node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:427:31) at node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:16:9 at node_modules/tailwindcss/lib/processTailwindFeatures.js:47:50 at plugins (node_modules/tailwindcss/lib/index.js:33:58) at LazyResult.runOnRoot (node_modules/postcss/lib/lazy-result.js:339:16) at LazyResult.runAsync (node_modules/postcss/lib/lazy-result.js:393:26) at async Promise.all (index 0)
I really need this fixing ASAP for my project or I’ll need to use another theme which I don’t wont to, as it seems great! Thanks Dave
Hi dbateson78,
Thank you for reaching out to us,
Sorry, it looks like you are using a different account from your purchase account.
Can you please use your purchase account?
Best regards, Left4code Team
Hello, whenever I use a dismissible alert in Safari, I get this error TypeError: undefined is not an object (evaluating ‘e.path.every’). It’s working with Chrome but not in Safari
Hi wariored,
Thank you for reaching out,
Please renew your support license to report issues and get item support.
