Index: /documented-examples/trunk/style-e/etc/collectionConfig.xml
===================================================================
--- /documented-examples/trunk/style-e/etc/collectionConfig.xml	(revision 36370)
+++ /documented-examples/trunk/style-e/etc/collectionConfig.xml	(revision 36371)
@@ -19,6 +19,9 @@
     </xsl:variable>
     <!--
-    <link href="{$httpCollection}/style/custom-style.css" rel="stylesheet" type="text/css"/>
+    <link href="{$httpCollection}/style/custom-style.css" rel="stylesheet" type="text/css"/>    
 	-->
+<link rel="stylesheet" href="{$httpCollection}/style/gs3-style-default-extra.css" type="text/css" 
+   title="GS3 Style" id="custom-style" charset="UTF-8"/>
+	
 <script src="{$httpCollection}/script/custom-script.js" type="text/javascript">
 </script>
@@ -26,4 +29,26 @@
   </xsl:template>
 
+
+	<xsl:template name="create-banner">  
+	<div class="choose_style">
+		Choose a style:
+		<a href="#" onclick="replaceStyle('gs3-style-default-extra');return false;">Default Greenstone</a>,
+		<a href="#" onclick="replaceStyle('gs3-style-blue');return false;">Blue</a>,
+		<a href="#" onclick="replaceStyle('gs3-style-olive-purple');return false;">OlivePurple</a>,		
+		<a href="#" onclick="replaceStyle('');return false;">None</a>
+		</div>
+		
+    <div id="gs_banner" class="ui-widget-header ui-corner-bottom">	    
+      <div id="titlesearchcontainer">
+	  
+	<xsl:call-template name="page-title-area"/>	
+	<xsl:call-template name="quick-search-area"/>
+	<div style="clear:both;"><xsl:text> </xsl:text></div>	
+      </div>
+      <xsl:call-template name="browsing-tabs"/>
+		
+	
+    </div>
+  </xsl:template>
 </format>
 	<search type="mgpp">
Index: /documented-examples/trunk/style-e/script/custom-script.js
===================================================================
--- /documented-examples/trunk/style-e/script/custom-script.js	(revision 36370)
+++ /documented-examples/trunk/style-e/script/custom-script.js	(revision 36371)
@@ -1,5 +1,32 @@
+function replaceStyle(stylesheet) {
+	//alert("In custom-sript.js::ReplaceStyle()");
+	var body = document.getElementsByTagName('body')[0];
+	var linkEl = document.getElementById("custom-style");
+	var href = linkEl.getAttribute("href");
+	var lastSlashIndex = href.lastIndexOf("/");
+	var hrefPrefix = href.substring(0, lastSlashIndex);
+
+	href = hrefPrefix + "/" + stylesheet + ".css";
+	linkEl.setAttribute("href", href);
+
+	
+	// https://techstacker.com/how-to-remove-all-css-from-site-with-javascript/
+	if(stylesheet == "") { /* gs3-style-red */
+		document
+		.querySelectorAll('style,link[rel="stylesheet"]')
+		.forEach(item => item.remove())
+		
+		// https://code-boxx.com/dynamically-load-replace-css/
+		//document.head.appendChild(linkEl);
+	}	
+  
+	//reloadCss(); // https://stackoverflow.com/questions/2024486/is-there-an-easy-way-to-reload-css-without-reloading-the-page
+}
+
+
 // This function copied from extra.dm of style-e DEC collection
 // It changes the current stylesheet to the named one of parameter
 function SetStyle(stylename) {
+	//alert("In custom-sript.js::SetStyle()");
   var body = document.getElementsByTagName('body')[0];
   body.style.backgroundImage = "";
@@ -15,2 +42,3 @@
   }
 }
+
Index: /documented-examples/trunk/style-e/style/gs3-style-blue.css
===================================================================
--- /documented-examples/trunk/style-e/style/gs3-style-blue.css	(revision 36371)
+++ /documented-examples/trunk/style-e/style/gs3-style-blue.css	(revision 36371)
@@ -0,0 +1,110 @@
+/*
+https://www.w3schools.com/cssref/css_colors.asp
+https://www.w3schools.com/colors/colors_picker.asp
+*/
+:root {
+	--cc-btn-primary-bg: LightSteelBlue;	
+}
+
+/* This style sheet is used by the garish collection as an
+  example of modifying the appearance */
+
+/* notes about style sheets.
+
+   Colours - The most portable way to specify colours is to use the
+     #xxxxxx notation, which is in hex for red, green, and blue.  eg black
+     is #000000, red is #ff0000, blue is #0000ff and white is #ffffff.
+     This may seem confusing at first, but you can't count on colour names
+     being the same across all browsers and platforms. For example,
+     linux/x11 has hundreds of colours with names such as DarkOliveGreen
+     and PaleVioletRed. However, simple colour names should work with most
+     browsers...
+
+*/
+   
+
+/* set defaults for the HTML body */
+body {
+ /* set the face. The first one in the list found will be used, so
+    have reasonable fall-backs */
+ /* use a serif font windows uses "times new roman", "times" on mac/linux */
+  font-family: times new roman, times, serif; 
+}
+
+ /* you can set a background colour, but a lot of the images/buttons are
+    designed to blend into a white background. */
+/* Note, this didn't seem to work when placed into above body definition */
+body.bgimage {
+  background-color: LightSteelBlue;
+}
+
+.choose_style {
+	padding: 10px 20px;
+	background: #f5f3e5; /* same as page background */
+}
+
+.choose_style a {
+	color: black;
+}
+
+
+/* background for .ui-widget-content should match background-color for #container and #gs_content 
+Note that the full background property needs to be overridden on .ui-widget-content for this to take effect. */
+.ui-widget-content { 
+	border: none;
+	background: #f5f3e5;
+}
+
+/* paragraph text - this will override the settings above for text inside
+ <p>....</p> tags. */
+
+p {
+ color: Black;/* DarkSlateGrey */
+ font-weight: normal;
+}
+
+/* headings */
+h1, h2, h3, h4 {
+ /* use a sans-serif font - arial on windows, helvetica on mac/linux */
+ font-family: arial, helvetica, sans-serif;
+ color: SteelBlue; 
+}
+
+#titlearea h2, #titlearea h1, #titlearea h3, #titlearea h4 {
+	color: #edf2f7; /* LightCyan #edf2f7 lighter than LightSteelBlue */
+}
+
+#gs_banner {
+	background: SteelBlue;
+	color: white;
+}
+
+#topArea, #viewAndZoomOptions {
+	background: SteelBlue;
+	color: white;
+}
+
+.ui-state-default, .ui-widget-content .ui-state-default {
+	border: 1px solid SteelBlue;
+	background: SteelBlue;	
+}
+
+.ui-button, .ui-widget-header, .ui-widget-header .ui-state-default {
+	background: #a5bcd9; /* #a5bcd9 slightly darker than LightSteelBlue*/
+	color: White; /* #325d81 or #2b506e for darker than SteelBlue*/
+}
+
+/*
+#gs-nav .ui-state-default {
+	background: GoldenRod;
+	color: White;
+}
+*/
+
+.ui-button:hover, .ui-widget-header .ui-state-default:hover {
+	background: LightSkyBlue;	
+}
+
+.ui-state-active a, .ui-state-active a:link {
+	color: #396a93; /* #325d81 or #2b506e for darker than SteelBlue*/
+}
Index: /documented-examples/trunk/style-e/style/gs3-style-default-extra.css
===================================================================
--- /documented-examples/trunk/style-e/style/gs3-style-default-extra.css	(revision 36371)
+++ /documented-examples/trunk/style-e/style/gs3-style-default-extra.css	(revision 36371)
@@ -0,0 +1,10 @@
+.choose_style {	
+	padding: 10px 20px;
+	font-size: 0.8em;
+	background-color: #459e00;
+	color: white;
+}
+
+.choose_style a {
+	color: white;
+}
Index: /documented-examples/trunk/style-e/style/gs3-style-olive-purple.css
===================================================================
--- /documented-examples/trunk/style-e/style/gs3-style-olive-purple.css	(revision 36371)
+++ /documented-examples/trunk/style-e/style/gs3-style-olive-purple.css	(revision 36371)
@@ -0,0 +1,197 @@
+/*
+https://www.w3schools.com/cssref/css_colors.asp
+https://www.w3schools.com/colors/colors_picker.asp
+*/
+:root {
+	--cc-btn-primary-bg: Purple;	
+}
+
+/* This style sheet is used by the garish collection as an
+  example of modifying the appearance */
+
+/* notes about style sheets.
+
+   Colours - The most portable way to specify colours is to use the
+     #xxxxxx notation, which is in hex for red, green, and blue.  eg black
+     is #000000, red is #ff0000, blue is #0000ff and white is #ffffff.
+     This may seem confusing at first, but you can't count on colour names
+     being the same across all browsers and platforms. For example,
+     linux/x11 has hundreds of colours with names such as DarkOliveGreen
+     and PaleVioletRed. However, simple colour names should work with most
+     browsers...
+
+*/
+  
+html {	
+	background-color: Thistle;
+	color: Indigo;	
+}
+
+/* Set background colour for container, gs_content to same as background for .ui-widget-content. 
+Note that the full background property needs to be overridden on .ui-widget-content for this to take effect. */
+#container, #gs_content {
+	background-color: White;
+}
+.ui-widget-content { 
+	border: none;
+	background: White;
+}
+
+b, i, pre {
+	color: Indigo;
+}
+  
+/* set defaults for the HTML body */
+body {
+ /* set the face. The first one in the list found will be used, so
+    have reasonable fall-backs */
+ /* use a serif font windows uses "times new roman", "times" on mac/linux */
+  font-family: times new roman, times, serif;   
+  margin: auto;
+  width: 70%;
+}
+
+#container, #topArea {
+ max-width: 100%;	
+}
+
+#topArea {
+	margin: auto;
+	
+}
+
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active,
+.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
+	border: 1px solid Indigo;
+}
+
+
+.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { border-top-right-radius: 0px; }
+.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { border-top-left-radius: 0px; }
+.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-bottom-right-radius: 0px; }
+.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { border-bottom-left-radius: 0px; }
+
+
+ /* you can set a background colour, but a lot of the images/buttons are
+    designed to blend into a white background. */
+/* Note, this didn't seem to work when placed into above body definition */
+body.bgimage {
+  background-color: Purple;
+}
+
+
+#gs_banner {
+	background: YellowGreen;
+	color: white;
+	height: 160px;
+}
+
+.choose_style {	
+	font-weight: bold;
+	background: YellowGreen;
+	color: Purple;
+	padding: 10px 20px 0px 20px;	
+}
+
+.choose_style a {	
+	color: Indigo;
+	/*text-decoration: none;*/
+}
+.choose_style a:hover {
+	color: Gold;
+}
+
+
+#gs-nav {
+	position: relative;
+	top: -80px;
+	/*margin-bottom: -60px;*/	
+}
+
+#gs-nav li {
+	float: none;
+	display: block;
+	width: 10%;
+	border-bottom: 1px solid Indigo;
+}
+
+#titlearea {
+	float: right;
+}
+
+#titlearea h2 {
+	padding-right: 20px;
+}
+
+#quicksearcharea {
+	clear: both;
+	float: right;
+}
+
+#quicksearcharea form {
+	float: right;
+	
+}
+
+#quicksearcharea ul {
+	clear: both;
+}
+
+#gs-nav a, #quicksearcharea a {
+	color: Purple;
+}
+
+
+/* paragraph text - this will override the settings above for text inside
+ <p>....</p> tags. */
+
+p {
+ color: Black;/* DarkSlateGrey */
+ font-weight: normal;
+}
+
+/* headings */
+h1, h2, h3, h4 {
+ /* use a sans-serif font - arial on windows, helvetica on mac/linux */
+ font-family: arial, helvetica, sans-serif;
+ color: Indigo; 
+}
+
+#titlearea h2, #titlearea h1, #titlearea h3, #titlearea h4 {
+	color: Indigo; /* LightCyan #edf2f7 lighter than LightSteelBlue */
+}
+
+
+#topArea, #viewAndZoomOptions {
+	background: Purple;
+	color: Indigo;
+}
+
+.ui-state-default, .ui-widget-content .ui-state-default {
+	border: 1px solid Gold;
+	background: Gold;	
+}
+
+.ui-button, .ui-widget-header, .ui-widget-header .ui-state-default {
+	background: Gold; /* #a5bcd9 slightly darker than LightSteelBlue*/
+	color: Indigo; /* #325d81 or #2b506e for darker than SteelBlue*/
+}
+
+/*
+#gs-nav .ui-state-default {
+	background: GoldenRod;
+	color: White;
+}
+*/
+
+.ui-button:hover, .ui-widget-header .ui-state-default:hover {
+	background: Violet;	
+}
+
+#gs_footer {
+	background: Purple;
+}
+
+.ui-state-active a, .ui-state-active a:link {
+	color: Indigo; /* #325d81 or #2b506e for darker than SteelBlue*/
+}
