fix: spice up banner section

sugar3-io · Mar 29, 2022 · 4516fa4 · 4516fa4
1 parent 11879f9
commit 4516fa4
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 1 deletion.
diff --git a/blog-theme/customized_theme.xml b/blog-theme/customized_theme.xml
@@ -727,6 +727,25 @@
         margin-right: 0.5em;
       }
 
+      body.list-view #blog-banner-2 {
+        margin-top: 3em;
+        margin-bottom: 1em;
+      }
+      
+      body.article-view #blog-banner-2 {
+        display: none;
+      }
+
+      body.list-view #blog-banner-2 [id$="_ninja-slider"] {
+        width: 35%;
+        max-width: 250px;
+      }
+
+      body.list-view #blog-banner-2 [id$="_ninja-slider"] .caption {
+        background-color: rgba(0, 0, 0, 0.5);
+        color: #ffffff;
+      }
+
 
       body .column-left-outer, body .column-right-outer {
         box-sizing: border-box;
@@ -1924,6 +1943,11 @@
         }
 
 
+        body.list-view #blog-banner-2 [id$="_ninja-slider"] {
+          width: 250px;
+        }
+
+
         body.article-view #Blog1 .post-header .title-item {
           font-size: 1.75em;
           /* text-overflow: ellipsis; */
@@ -6054,7 +6078,7 @@
           <b:section class='tabs' id='crosscol-overflow' name='Cross-Column 2' showaddelement='no'>
             <b:widget id='HTML3' locked='false' mobile='yes' title='Banner Message' type='HTML' version='1'>
               <b:widget-settings>
-                <b:widget-setting name='content'><![CDATA[<div id="blog-banner-1"><div class="banner-header">A+ <i class="font-icon fa-fw fab fa-blogger"></i><span style="display: none;">B</span>logger Template<span class="banner-info button-item is-control"><i class="font-icon fa-fw fas fa-info-circle" onclick="tooltip.pop(this, '##links-mobile', {overlay:true, relativeTo:'screen', position:41, cssClass:'banner-item blog-links panel-container head-item'}); return false;"></i></span></div><a class="banner-body" href="https://gelati.sugar3.io"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEgbZl4p3mvzmefyYGN1SOkcVzgUOBz2NbVPOG-J6U41sEgRLOLu-ZnC4DX__qjea6GbxUWRsscU4w9UTo4lfzHY8tXb_O5mMD-dRc_yegEryBVpTlkZ4rQKZ9iBy05X48GB9VYsWqYrOisiFIuAAXv83k5nQp9FyTz9Rtfn-fRYNKAucs5_UCv6K_dGew=s48"/>Multiple Themes</a></div>]]></b:widget-setting>
+                <b:widget-setting name='content'><![CDATA[<div id="blog-banner-1"><div class="banner-header">A+ <i class="font-icon fa-fw fab fa-blogger"></i><span style="display: none;">B</span>logger Template<span class="banner-info button-item is-control"><i class="font-icon fa-fw fas fa-info-circle" onclick="tooltip.pop(this, '##links-mobile', {overlay:true, relativeTo:'screen', position:41, cssClass:'banner-item blog-links panel-container head-item'}); return false;"></i></span></div><a class="banner-body" href="https://gelati.sugar3.io"><img src="https://blogger.googleusercontent.com/img/a/AVvXsEgbZl4p3mvzmefyYGN1SOkcVzgUOBz2NbVPOG-J6U41sEgRLOLu-ZnC4DX__qjea6GbxUWRsscU4w9UTo4lfzHY8tXb_O5mMD-dRc_yegEryBVpTlkZ4rQKZ9iBy05X48GB9VYsWqYrOisiFIuAAXv83k5nQp9FyTz9Rtfn-fRYNKAucs5_UCv6K_dGew=s48"/>Multiple Themes</a></div><div id="blog-banner-2"><div id="blogbanner2_ninja-slider"><div><div class="slider-inner"><ul><li><a href="https://news.glitch.at"><img class="ns-img" src="https://blogger.googleusercontent.com/img/a/AVvXsEjjJw7YxT13-97opCIa-mNYmN4J6rCekgYmRBi9s8h-QVMixHva3FuLz-v1oE3vKp7LSK3WuJdRqfnGCXUAd57i8N9apO9ZGHgUgtr48bNBHCjdvQw8R15edJpdS5WQ_BDSpQ195N_D3awH2nmrQLnGpDSmo1K6ApBhkJhfRr9cPor0kfzDiNlsGDUIAA=s400" style="cursor: pointer;" /></a><div class="caption"><span class="font-icon fa-fw fab fa-blogger"></span> Customized Demo</div></li></ul><!-- <div class="fs-icon" title="Expand/Close"></div> --></div></div></div><script type="text/javascript">var nsOpt_blogbanner2 = JSON.parse(JSON.stringify(nsOptions));nsOpt_blogbanner2.sliderId = "blogbanner2_ninja-slider";nsOpt_blogbanner2.aspectRatio = "1:1";nsOpt_blogbanner2.before = null;var nsObj_blogbanner2 = new NinjaSlider(nsOpt_blogbanner2);window.addEventListener("DOMContentLoaded", function (e) {nsObj_blogbanner2.init(0);});</script></div>]]></b:widget-setting>
               </b:widget-settings>
               <b:includable id='main'>
                 <b:class name='banner-item'/>

diff --git a/blog-theme/theme+adsense.xml b/blog-theme/theme+adsense.xml
@@ -721,6 +721,25 @@
         margin-right: 0.5em;
       }
 
+      body.list-view #blog-banner-2 {
+        margin-top: 3em;
+        margin-bottom: 1em;
+      }
+      
+      body.article-view #blog-banner-2 {
+        display: none;
+      }
+
+      body.list-view #blog-banner-2 [id$="_ninja-slider"] {
+        width: 35%;
+        max-width: 250px;
+      }
+
+      body.list-view #blog-banner-2 [id$="_ninja-slider"] .caption {
+        background-color: rgba(0, 0, 0, 0.5);
+        color: #ffffff;
+      }
+
 
       body .column-left-outer, body .column-right-outer {
         box-sizing: border-box;
@@ -1917,6 +1936,11 @@
         }
 
 
+        body.list-view #blog-banner-2 [id$="_ninja-slider"] {
+          width: 250px;
+        }
+
+
         body.article-view #Blog1 .post-header .title-item {
           font-size: 1.75em;
           /* text-overflow: ellipsis; */

diff --git a/blog-theme/theme.xml b/blog-theme/theme.xml
@@ -721,6 +721,25 @@
         margin-right: 0.5em;
       }
 
+      body.list-view #blog-banner-2 {
+        margin-top: 3em;
+        margin-bottom: 1em;
+      }
+      
+      body.article-view #blog-banner-2 {
+        display: none;
+      }
+
+      body.list-view #blog-banner-2 [id$="_ninja-slider"] {
+        width: 35%;
+        max-width: 250px;
+      }
+
+      body.list-view #blog-banner-2 [id$="_ninja-slider"] .caption {
+        background-color: rgba(0, 0, 0, 0.5);
+        color: #ffffff;
+      }
+
 
       body .column-left-outer, body .column-right-outer {
         box-sizing: border-box;
@@ -1917,6 +1936,11 @@
         }
 
 
+        body.list-view #blog-banner-2 [id$="_ninja-slider"] {
+          width: 250px;
+        }
+
+
         body.article-view #Blog1 .post-header .title-item {
           font-size: 1.75em;
           /* text-overflow: ellipsis; */