Converted bootstrap3 admin images to .webp for a size reduction of approx. 1M.

e107_core/templates/admin_template.php

@@ -193,7 +193,7 @@ $ADMIN_TEMPLATE['header'] =  '
 				<span class="icon-bar"></span>
 			</button>
 			<a class="brand navbar-brand" href="'.e_ADMIN_ABS.'admin.php" title="'.LAN_RETURN_TO_FRONT_PANEL.'">
-				<img class="admin-logo" src="'.e_THEME_ABS.'bootstrap3/images/e107_adminlogo.png" alt="e107"/>
+				<img class="admin-logo" src="'.e_THEME_ABS.'bootstrap3/images/logo.webp" alt="e107"  />
 			</a>
 		</div>
 		<div class="navbar-collapse collapse">

e107_handlers/theme_handler.php

@@ -2300,6 +2300,7 @@ class themeHandler
 				{
 					$thumbPath = e_THEME.$theme['path'] ."/".$val['thumbnail'];
 					$previewPath = $thumbPath;
+					$class = 'admin-theme-preview';
 					break;
 				}
 			

e107_themes/bootstrap3/admin_style.css

@@ -598,7 +598,7 @@ span.e-search i								{ margin-right:-20px; margin-left:5px; margin-top:-7px; z
 
 
 i.s-message-icon {
-    background: url(images/adminicons_32.png) no-repeat top left;
+    background: url(images/adminicons_32.webp) no-repeat top left;
  	display: inline-block;
 	width:32px;
 	height:32px;
@@ -806,7 +806,7 @@ th label.checkbox { min-height:inherit; } /* Bootstrap Fix but doesn't work */
 
 
 i.S16, li.plupload_done a {
-    background: url(images/adminicons_16.png) no-repeat top left;
+    background: url(images/adminicons_16.webp) no-repeat top left;
  	display:inline-block;
  	width:17px;
  	height:16px;
@@ -903,14 +903,14 @@ li.plupload_done a {
 
 
 i.S32 {
-    background: url(images/adminicons_32.png) no-repeat top left;
+    background: url(images/adminicons_32.webp) no-repeat top left;
  	display: inline-block;
  	width:32px;
  	height:32px;
 }
 
 i.S24  {
-  background: url(images/adminicons_32.png) no-repeat top left;
+  background: url(images/adminicons_32.webp) no-repeat top left;
  	display: inline-block;
  	background-size: 1522px;
  	width:24px;
@@ -1083,7 +1083,7 @@ i.e-warning-32{ background-position: -777px -37px; width: 32px; height: 32px; }
 i.e-welcome-32{ background-position: -814px -37px; width: 32px; height: 32px; } 
 
 i.browsers {
-    background: url(images/browsers.png) no-repeat top left;
+    background: url(images/browsers.webp) no-repeat top left;
  	display:inline-block;
     margin-right: .3em;
 	line-height: 14px;
@@ -1157,7 +1157,7 @@ ul.col-selection label.active:before        { font-family:'Font Awesome 5 Free';
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
 }
 
-.navbar-brand   { padding: 10px 15px; }
+.navbar-brand   { padding: 10px 11px; }
 
 ul.recent-comments {padding: 0px;
 margin: 0;
@@ -1418,7 +1418,7 @@ a.plupload_disabled:hover {background: transparent; border-color:inherit }
 
 li.plupload_delete a {
 	
-	 background: url(images/adminicons_16.png) no-repeat top left;
+	 background: url(images/adminicons_16.webp) no-repeat top left;
  	display:inline-block;
  	height:16px;
  	*margin-right: .3em;

e107_themes/bootstrap3/css/modern-light.css

@@ -1620,7 +1620,7 @@
 ul.col-selection > li a {  border-bottom: 1px solid rgba(0,0,0,0.3); }
 ul.col-selection { background-color: #FCFDFF; }
 .selectize-control.multi .selectize-input > div {    background: rgba(0,0,0,0.1); }
-
+.e-chart svg text { fill: rgba(0,0,0,0.75); }  /* Google charts */
 
         @media only screen and (min-width : 768px) {
             .is-table-row {

e107_themes/bootstrap3/theme.xml

@@ -16,7 +16,7 @@
 		<word>clean</word>
 	</keywords>
 	<screenshots>
-		<image>preview_frontend.png</image>
+		<image>preview_frontend.webp</image>
 	</screenshots>
 	<libraries>
 		<library name="bootstrap" version="3" scope="all"/>
@@ -25,14 +25,14 @@
 	</libraries>
 	<stylesheets>
 		<css file="style.css" name="Default"/>
-		<css file="css/modern-light.css" name="Modern Light" description="A high-contrast light skin" thumbnail='images/admin_modern-light.png' scope='admin' exclude='bootstrap'/>
+		<css file="css/modern-light.css" name="Modern Light" description="A high-contrast light skin" thumbnail='images/admin_modern-light.webp' scope='admin' exclude='bootstrap'/>
-        <css file="css/modern-dark.css" name="Modern Dark" description="A high-contrast dark skin" thumbnail='images/admin_modern-dark.png' scope='admin' exclude='bootstrap'/>
+        <css file="css/modern-dark.css" name="Modern Dark" description="A high-contrast dark skin" thumbnail='images/admin_modern-dark.webp' scope='admin' exclude='bootstrap'/>
-        <css file="css/bootstrap-dark.min.css" name="Legacy Dark Admin" description="A dark admin area skin" thumbnail='images/admin_bootstrap-dark.jpg' scope='admin' exclude='bootstrap'/>
+        <css file="css/bootstrap-dark.min.css" name="Legacy Dark Admin" description="A dark admin area skin" thumbnail='images/admin_bootstrap-dark.webp' scope='admin' exclude='bootstrap'/>
-        <css file="css/kadmin.css" name="K-Admin Inspired" scope='admin' description="A light admin area skin" thumbnail='images/admin_kadmin.jpg' url='http://themifycloud.com/demos/templates/KAdmin/KAdmin-Dark/dashboard.html' />
+        <css file="css/kadmin.css" name="K-Admin Inspired" scope='admin' description="A light admin area skin" thumbnail='images/admin_kadmin.webp' url='http://themifycloud.com/demos/templates/KAdmin/KAdmin-Dark/dashboard.html' />
-		<css file="css/corporate.css" name="Corporate" scope='admin' thumbnail='images/admin_corporate.jpg' exclude='bootstrap' />
+		<css file="css/corporate.css" name="Corporate" scope='admin' thumbnail='images/admin_corporate.webp' exclude='bootstrap' />
-		<css file="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" name="Flatly" thumbnail='images/admin_flatly.png' scope='admin' exclude='bootstrap' />
+		<css file="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" name="Flatly" thumbnail='images/admin_flatly.webp' scope='admin' exclude='bootstrap' />
-        <css file="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/sandstone/bootstrap.min.css" name="Sandstone" thumbnail='images/admin_sandstone.png' scope='admin' exclude='bootstrap'/>
+        <css file="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/sandstone/bootstrap.min.css" name="Sandstone" thumbnail='images/admin_sandstone.webp' scope='admin' exclude='bootstrap'/>
-        <css file="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/superhero/bootstrap.min.css" name="Superhero" thumbnail='images/admin_superhero.jpg' scope='admin' exclude='bootstrap'/>
+        <css file="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/superhero/bootstrap.min.css" name="Superhero" thumbnail='images/admin_superhero.webp' scope='admin' exclude='bootstrap'/>
         <css file="*" name="*"/>
 	</stylesheets>
 	<layouts>