Home › Forums › Porto – Responsive HTML5 Template › HTML5 template + Porto Admin
- This topic has 7 replies, 2 voices, and was last updated 11 months, 3 weeks ago by
Support. This post has been viewed 599 times
-
AuthorPosts
-
November 17, 2024 at 12:31 am #10045375
umbrellamanagement
ParticipantHello, I just bought the Porto Admin template too. I need to take some items (graphs) and integrate into my HTML5 Porto template pages. How can I do that?
Do I have to copy all folders to HTML5 Porto template? Are there any identical files (name) so I can have some problems if I copy over?
Thank you!
November 18, 2024 at 8:40 am #10045376Support
KeymasterHello, thanks for your purchase. Please make sure you understand how Porto Admin works, it works the same way as all templates under the HTML category on ThemeForest (same as Metronic, for example).
Regarding the integration with the Front-End, here are the complete instructions: http://www.okler.net/forums/topic/how-to-integrate-porto-admin-extension-on-porto/ – the integration adds more features from the admin into the front-end, as shown here:
https://www.okler.net/previews/porto/12.0.0/feature-admin-forms-basic.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-forms-advanced.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-forms-wizard.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-forms-code-editor.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-tables-advanced.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-tables-responsive.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-tables-editable.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-tables-ajax.html
https://www.okler.net/previews/porto/12.0.0/feature-admin-charts.htmlOkler Themes
November 18, 2024 at 10:27 pm #10045377umbrellamanagement
ParticipantThanks, but is not working 100%.
Should I copy paste all the Porto admin folder structure to the HTML5 Responsive Theme folder structure?
In this case I see a lot of files have the same names and I will lost everything?
November 18, 2024 at 10:33 pm #10045378Support
KeymasterAs explained in this topic: https://www.okler.net/forums/topic/how-to-integrate-porto-admin-extension-on-porto/
Create a folder called “/admin” and copy all files that you will use there.
Then refer in the HTML using that folder path:

November 19, 2024 at 12:58 am #10045379umbrellamanagement
ParticipantOk, I did that but is not working.
So, I have my HTML5 template in https://www.goodbet-tips.com/test/
I created the folder admin – https://www.goodbet-tips.com/test/admin.
I copied all Porto Admin template in this admin folder.I copied all codes mentioned previosuly in the stats_test.html file.
I put the stats_test.html file to admin directory: https://www.goodbet-tips.com/test/admin/stats_test.html
I also tried to leave the stats_test.html file where I have all the HTML5 template site: https://www.goodbet-tips.com/test/stats_test.htmlCan you please explain what am I doing wrong?
Thanks a lot!
November 19, 2024 at 1:17 am #10045381Support
KeymasterHi,
The integration between both templates front-end and admin is basically a possibility to use elements from the Admin in the Front-End, for example:
https://www.okler.net/previews/porto/12.0.0/feature-admin-charts.htmlSo, you can’t copy parts from the admin html code and use in the front-end, it will work only for the elements.
As you can see in the source of this page: https://www.okler.net/previews/porto/12.0.0/feature-admin-charts.html – these are the files you need to include:
CSS:
<!-- Admin Extension Specific Page Vendor CSS --> <link rel="stylesheet" href="admin/vendor/morris/morris.css" /> <link rel="stylesheet" href="admin/vendor/chartist/chartist.min.css" /> <!-- Admin Extension CSS --> <link rel="stylesheet" href="admin/css/theme-admin-extension.css"> <!-- Admin Extension Skin CSS --> <link rel="stylesheet" href="admin/css/skins/extension.css">
JS:
<!-- Admin Extension --> <script src="admin/js/theme.admin.extension.js"></script> <!-- Admin Extension Examples --> <script src="admin/vendor/jquery.easy-pie-chart/jquery.easypiechart.js"></script> <script src="admin/vendor/flot/jquery.flot.js"></script> <script src="admin/vendor/flot.tooltip/jquery.flot.tooltip.js"></script> <script src="admin/vendor/flot/jquery.flot.pie.js"></script> <script src="admin/vendor/flot/jquery.flot.categories.js"></script> <script src="admin/vendor/flot/jquery.flot.resize.js"></script> <script src="admin/vendor/jquery-sparkline/jquery.sparkline.js"></script> <script src="admin/vendor/raphael/raphael.js"></script> <script src="admin/vendor/morris/morris.js"></script> <script src="admin/vendor/gauge/gauge.js"></script> <script src="admin/vendor/snap.svg/snap.svg.js"></script> <script src="admin/vendor/liquid-meter/liquid.meter.js"></script> <script src="admin/vendor/chartist/chartist.js"></script> <!-- Admin Extension Examples --> <script src="admin/js/examples/examples.charts.js"></script>
Check the sources of the example files: view-source:https://www.okler.net/previews/porto/12.0.0/feature-admin-charts.html
Also, check console log (on Google Chrome: https://www.okler.net/forums/topic/how-to-find-a-javascript-error/ ) to see if all files were included and there’s no JS error.
November 19, 2024 at 8:24 am #10045382umbrellamanagement
ParticipantOK, thanks, but I still have problems.
https://www.goodbet-tips.com/test/stats_test.html
I just copied the same code for the same table, since I need to use the same table at least 2 times on the same page (with different numbers). The first table is visible, the second one (identical code) is missing.
Also, after I copy all the css and js code to this file, the countdouns are not working anymore (the countdouns below, for each year).
November 19, 2024 at 12:40 pm #10045383Support
Keymaster1) You need to have different ids if you want to repeat the same component.
So, check element with ID flotBars and flotBarsData.
You will need to use flotBars2 and flotBarsData2 (for example) and run a code like this in your custom js file:
Each chart must have it’s own JS. Check js/examples/examples.charts.js
(function($) { 'use strict'; /* Flot: Bars */ (function() { if( $('#flotBars2').get(0) ) { var plot = $.plot('#flotBars2', [flotBarsData2], { colors: ['#649b3a'], series: { bars: { show: true, barWidth: 0.8, align: 'center' } }, xaxis: { mode: 'categories', tickLength: 0 }, grid: { hoverable: true, clickable: true, borderColor: 'rgba(0,0,0,0.1)', borderWidth: 1, labelMargin: 15, backgroundColor: 'transparent' }, tooltip: true, tooltipOpts: { content: '%y', shifts: { x: -10, y: 20 }, defaultTheme: false } }); } })(); }).apply(this, [jQuery]);About other problems, you need to check the JS files that you are including (comparing with our EXAMPLES)
You will see that you don’t need to run theme.js from the admin:

CHECK CONSOLE LOG FOR ERRORS.
-
AuthorPosts
This topic is marked as "RESOLVED" and can not rceive new replies.
