Themes - Menu Item

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
Post Reply
User avatar
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Themes - Menu Item

Post by ronwill » 2017-12-18 04:04

Is it possible to have (like on the Northwind demo site) a top menu item that will allow users to select their theme choice?
If so how to do it?

It's possible and available on PHP Generator for MySQL (one of the reasons I used this for a recent project) and is a very popular feature that would certainly (IMO) enhance the attraction of AppGini!
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

peebee
AppGini Super Hero
AppGini Super Hero
Posts: 352
Joined: 2013-03-21 04:37

Re: Themes - Menu Item

Post by peebee » 2017-12-18 06:12

I'm sure Ahmad wouldn't mind if you reverse engineer what he has already done on his Northwind demo.

Whilst not actually tested, I'm pretty sure a "view page source" reveals all the code required: view-source:https://bigprof.com/demo/index.php

Code: Select all

<span class="pull-right">
			Demo theme is set to <b id="demo-theme-name">Bootstrap</b><br>
			<button type="button" class="btn btn-warning btn-lg vspacer-md" id="demo-options"><i class="glyphicon glyphicon-cog"></i> Change theme</button>
		</span>
	</div>
	
	<script>
		$j(function(){
			/* get configured theme */
			var theme = cookie('theme');
			
			if(theme && theme.match(/.*?\.css$/)){
				/* remove default theme */
				$j('link[rel=stylesheet][href*="initializr/css/"]').remove();
				$j('link[rel=stylesheet][href="dynamic.css.php"]').remove();

				/* apply configured theme */
				$j('head').append('<link rel="stylesheet" href="resources/initializr/css/' + theme + '">');
				if(theme == 'bootstrap.css' && !$j('html').hasClass('lt-ie9')){
					$j('head').append('<link rel="stylesheet" href="resources/initializr/css/bootstrap-theme.css">');
				}
				$j('head').append('<link rel="stylesheet" href="dynamic.css.php">');
				
				/* update displayed theme name */
				$j('#demo-theme-name').html(ucfirst(theme.replace(/\.css$/, '')));
			}			
			
			$j('#demo-options').click(function(){
				modal_window({
					message: 'Theme <select id="demo-theme">' +
							'<option value="bootstrap.css">Bootstrap</option>' +
							'<option value="cerulean.css">Cerulean</option>' +
							'<option value="cosmo.css">Cosmo</option>' +
							'<option value="cyborg.css">Cyborg</option>' +
							'<option value="darkly.css">Darkly</option>' +
							'<option value="flatly.css">Flatly</option>' +
							'<option value="journal.css">Journal</option>' +
							'<option value="paper.css">Paper</option>' +
							'<option value="readable.css">Readable</option>' +
							'<option value="sandstone.css">Sandstone</option>' +
							'<option value="simplex.css">Simplex</option>' +
							'<option value="slate.css">Slate</option>' +
							'<option value="spacelab.css">Spacelab</option>' +
							'<option value="superhero.css">Superhero</option>' +
							'<option value="united.css">United</option>' +
							'<option value="yeti.css">Yeti</option>' +
						'</select>' +
						'<div class="vspacer-lg alert alert-info">Please note that, depending on your connection speed, some themes might take a few seconds to be fully load.</div>',
					title: 'Change the theme of the demo',
					footer: [{
						label: 'Apply',
						bs_class: 'success',
						click: function(){
							cookie('theme', $j('#demo-theme').val());
							location.reload();
						}
					}]
				});
				
				$j("select[id='demo-theme']").val(theme);
			});
		});
	</script>
Ahmad has added his code to the footer. I'm sure you could add it to the header or a drop menu somewhere if you want to. You would also need to add all of the necessary theme css files to the /resources/initializr/css/ folder.

The Bootswatch themes used in AppGini are available from here: https://bootswatch.com/

There's also a jquery plugin (a few years old but should still work) that pulls the same themes from Bootswatch here: https://www.josephguadagno.net/2014/11/ ... ry-plugin/

Demo: http://introtobootstrap.azurewebsites.net/

Hope that helps.

User avatar
ronwill
Veteran Member
Posts: 228
Joined: 2015-08-08 10:12
Location: Cheltenham UK +Weatherford USA

Re: Themes - Menu Item

Post by ronwill » 2017-12-18 07:48

Thanks for quick response,
I've got it working in the footer, seems it must appear on each page complete with script, if placed only on a single page, will only change theme on that page.
I would really like it as a drop down menu top right by sign-in. I'm not sure how to set it up to do that I've been playing with links nav menu but not getting anywhere at all!
The way it's done on your attached link is perfect, just what I'm looking for, problem is I'm not sure how to achieve it|!
Any help greatly appreciated
Cheers, Ron
Ron - Gloucestershire, UK: AppGini Pro V 23.15 Rev 1484 - LOVING IT!
Plugins: Mass Update + Search Page Maker + Summary Reports + Calendar + Messages
Bizzworxx: AppGiniHelper + Inline Detail View
Alejandro Landini: To-Do List + MPI + TV Field Editor
Other: Udemy Course

Post Reply