HTML5 template + Porto Admin

[umbrellamanagement]

Hello, 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!

---

[Support]

Hello, 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.html

Okler Themes

---

[umbrellamanagement]

Thanks, 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?

---

[Support]

As 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:

---

[umbrellamanagement]

Ok, 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.html

Can you please explain what am I doing wrong?
Thanks a lot!

---

[Support]

Hi,

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.html

So, 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.

---

[umbrellamanagement]

OK, 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).

---

[Support]

1) 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.

---

[Author]

Posts