updated footer to chnage bg-image, bg-color etc

Author: tfsojon

content/english/_index.md

@@ -151,4 +151,9 @@ blog:
 call_to_action:
   enable: false
 
+footer:
+  footer_light: false
+  # bg_color: "#1e384c"
+  # bg_image: "images/bg-banner-page.jpg"
+  # bg_image_overlay_color: "rgba(0,0,0,.65)"
 ---

content/english/optimizor.md

@@ -53,4 +53,9 @@ work_process:
     content_color: ""
 
 
+footer:
+  footer_light: false
+  bg_color: "#1e384c"
+  # bg_image: "images/bg-banner-page.jpg"
+  # bg_image_overlay_color: "rgba(0,0,0,.65)"
 ---

themes/delta/assets/scss/templates/_main.scss

@@ -1113,7 +1113,7 @@ main:empty {
     position: relative;
     z-index: 1;
     overflow-x: hidden;
-    &::after {
+    .bottom-bg {
       position: absolute;
       content: "";
       height: calc(50% - 55px);
@@ -1457,6 +1457,8 @@ a.share-icon {
 
 // footer
 footer {
+  position: relative;
+  z-index: 1;
   padding: 100px 0 0;
   @include desktop {
     padding: 90px 0 0;
@@ -1471,6 +1473,15 @@ footer {
       border: 2px solid rgba($white, 1) !important;
     }
   }
+  .footer-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: -1;
+  }
   .footer-menu {
     margin-top: 60px;
     padding: 60px 0;
@@ -1496,6 +1507,27 @@ footer {
       }
     }
   }
+  &.bg-light {
+    .btn-search-footer {
+      cursor: text;
+      border: 2px solid rgba($dark, 0.4) !important;
+      &:hover {
+        border: 2px solid rgba($dark, 1) !important;
+      }
+    }
+    .footer-menu {
+      border-top: 1px solid rgba($dark, 0.2);
+      border-bottom: 1px solid rgba($dark, 0.2);
+      ul li {
+        a {
+          color: #555;
+          &:hover {
+            color: $dark;
+          }
+        }
+      }
+    }
+  }
   .footer-bottom {
     padding: 55px 0;
     @include tablet {

themes/delta/layouts/partials/call-to-action-2.html

@@ -1,6 +1,12 @@
+{{ $bg_color := .Params.footer.bg_color | default false }}
+{{ $bg_image := resources.Get .Params.footer.bg_image | default false }}
+
 {{if site.Params.call_to_action.enable}}
 <section class="section pb-0 call-to-action call-to-action-2">
-  <div class="container container-delta">
+  {{ if not $bg_image }}
+  <div class="bottom-bg" style="{{- if $bg_color -}}background-color:{{$bg_color}}!important;{{- end -}}"></div>
+  {{ end }}
+  <div class="container container-delta" {{- if $bg_image -}}style="margin-bottom:100px"{{- end -}}>
     <div class="row">
       <div class="col-lg-12">
         <div class="block bg-white rounded-lg shadow">

themes/delta/layouts/partials/footer-logo-dark.html

@@ -0,0 +1,38 @@
+{{ $logoPath:= site.Params.logo }}
+{{ $logoWidth:= replace site.Params.logo_width "px" "x" }}
+
+<!-- checking logo existance -->
+{{ if $logoPath }}
+{{ if fileExists (add `assets/` $logoPath) }}
+{{ $logo:= resources.Get $logoPath }}
+
+<!-- checking gif -->
+{{ $logoExt := path.Ext $logo }}
+{{ if eq $logoExt ".gif" }}
+{{ .Scratch.Set "logo" ($logo.Resize $logoWidth).RelPermalink }}
+<!-- checking svg -->
+{{ else if eq $logoExt ".svg"}}
+{{ .Scratch.Set "logo" $logo.RelPermalink }}
+<!-- logo fallback for svg -->
+{{ .Scratch.Set "logo_fallback" $logo.RelPermalink }}
+{{ else }}
+<!-- logo processing to webp -->
+{{ $logoDefaultWidth:= add (string $logo.Width) "x"}}
+{{ $logoWidth:= $logoWidth | default $logoDefaultWidth }}
+{{ $options := add (string $logoWidth) " webp" }}
+{{ .Scratch.Set "logo" ($logo.Resize $options).RelPermalink }}
+<!-- logo fallback -->
+{{ .Scratch.Set "logo_fallback" ($logo.Resize $logoWidth).RelPermalink }}
+{{ end }}
+
+<img loading="prelaod" decoding="async" class="img-fluid" {{if ne $logoExt `.svg`}}
+  width="{{$logoWidth | default $logo.Width}}" height="{{$logo.Height}}" {{end}} src="{{.Scratch.Get `logo`}}"
+  alt="{{ site.Title }}" onerror="this.onerror=null;this.src='{{.Scratch.Get `logo_fallback`}}'">
+{{ end }}
+<!-- logo text -->
+{{ else if site.Params.logo_text }}
+{{ site.Params.logo_text | markdownify }}
+<!-- logo title -->
+{{ else }}
+{{ site.Title | markdownify }}
+{{ end }}

themes/delta/layouts/partials/footer.html

@@ -1,14 +1,25 @@
-<footer class="bg-dark px-1 wave-block">
+{{ $footer_light := .Params.footer.footer_light | default false }}
+{{ $bg_color := .Params.footer.bg_color | default false }}
+{{ $bg_image := resources.Get .Params.footer.bg_image | default false }}
+{{ $overlay := .Params.footer.bg_image_overlay_color | default false }}
+
+<footer class="{{if $footer_light}}bg-light{{else}}bg-dark{{end}} px-1 wave-block" 
+ style="{{- if $bg_color -}}background-color:{{$bg_color}}!important;{{- end -}}{{- if $bg_image -}}background-image: url({{$bg_image | absURL}}); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover;{{- end -}}">
+  {{- if and $overlay $bg_image -}}<div class="footer-overlay" style="background-color:{{$overlay | safeCSS}}"></div>{{- end -}}
   <div class="container container-delta">
     <div class="row align-items-center gy-3">
       <div class="col-lg-4 mx-auto text-center text-lg-start">
         <a class="footer-brand" href="{{ site.BaseURL | relLangURL }}" title="{{site.Title}}">
+          {{if $footer_light}}
+          {{ partial "footer-logo-dark.html" . }}
+          {{else}}
           {{ partial "footer-logo.html" . }}
+          {{end}}
         </a>
       </div>
       <div class="col-lg-4 text-center">
         {{ if site.Params.fullSiteSearch }}
-        <button class="btn-search-footer rounded-sm border-0 outline-none py-1 ps-3 pe-4 text-start bg-transparent text-white" data-bs-toggle="modal" data-bs-target="#searchModal">
+        <button class="btn-search-footer rounded-sm border-0 outline-none py-1 ps-3 pe-4 text-start bg-transparent {{if $footer_light}}text-dark{{else}}text-white{{end}}" data-bs-toggle="modal" data-bs-target="#searchModal">
           <i class="fas fa-search me-1"></i>
           <span>Search Intelops ..</span>
         </button>
@@ -28,7 +39,7 @@
       <div class="row gy-4 row-cols-1 row-cols-sm-3 row-cols-lg-5">
         {{with site.Menus.footer_menu_1}}
         <div class="col block">
-          <h4 class="footer-menu-title text-white">{{i18n `footer_menu_1_title`}}</h4>
+          <h4 class="footer-menu-title {{if $footer_light}}text-dark{{else}}text-white{{end}}">{{i18n `footer_menu_1_title`}}</h4>
           <ul class="list-unstyled mb-0">
             {{range .}}
             <li><a href="{{.URL}}">{{.Name}}</a></li>
@@ -38,7 +49,7 @@ <h4 class="footer-menu-title text-white">{{i18n `footer_menu_1_title`}}</h4>
         {{end}}
         {{with site.Menus.footer_menu_2}}
         <div class="col block">
-          <h4 class="footer-menu-title text-white">{{i18n `footer_menu_2_title`}}</h4>
+          <h4 class="footer-menu-title {{if $footer_light}}text-dark{{else}}text-white{{end}}">{{i18n `footer_menu_2_title`}}</h4>
           <ul class="list-unstyled mb-0">
             {{range .}}
             <li><a href="{{.URL}}">{{.Name}}</a></li>
@@ -48,7 +59,7 @@ <h4 class="footer-menu-title text-white">{{i18n `footer_menu_2_title`}}</h4>
         {{end}}
         {{with site.Menus.footer_menu_3}}
         <div class="col block">
-          <h4 class="footer-menu-title text-white">{{i18n `footer_menu_3_title`}}</h4>
+          <h4 class="footer-menu-title {{if $footer_light}}text-dark{{else}}text-white{{end}}">{{i18n `footer_menu_3_title`}}</h4>
           <ul class="list-unstyled mb-0">
             {{range .}}
             <li><a href="{{.URL}}">{{.Name}}</a></li>
@@ -58,7 +69,7 @@ <h4 class="footer-menu-title text-white">{{i18n `footer_menu_3_title`}}</h4>
         {{end}}
         {{with site.Menus.footer_menu_4}}
         <div class="col block">
-          <h4 class="footer-menu-title text-white">{{i18n `footer_menu_4_title`}}</h4>
+          <h4 class="footer-menu-title {{if $footer_light}}text-dark{{else}}text-white{{end}}">{{i18n `footer_menu_4_title`}}</h4>
           <ul class="list-unstyled mb-0">
             {{range .}}
             <li><a href="{{.URL}}">{{.Name}}</a></li>
@@ -68,7 +79,7 @@ <h4 class="footer-menu-title text-white">{{i18n `footer_menu_4_title`}}</h4>
         {{end}}
         {{with site.Menus.footer_menu_5}}
         <div class="col block">
-          <h4 class="footer-menu-title text-white">{{i18n `footer_menu_5_title`}}</h4>
+          <h4 class="footer-menu-title {{if $footer_light}}text-dark{{else}}text-white{{end}}">{{i18n `footer_menu_5_title`}}</h4>
           <ul class="list-unstyled mb-0">
             {{range .}}
             <li><a href="{{.URL}}">{{.Name}}</a></li>
@@ -88,10 +99,10 @@ <h4 class="footer-menu-title text-white">{{i18n `footer_menu_5_title`}}</h4>
   </div>
 
   <div class="has-wave">
-    <svg class="wave-left text-white" style="opacity:0.15" width="313" height="230" viewBox="0 0 313 230" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg class="wave-left {{if $footer_light}}text-dark{{else}}text-white{{end}}" style="opacity:0.15" width="313" height="230" viewBox="0 0 313 230" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M-14.8194 14.9839C3.13821 37.9424 36.9915 27.6999 61.6547 27.5681C84.2532 27.4016 106.769 35.7678 122.993 51.6513C138.323 66.5174 146.99 89.3198 139.352 110.086C131.009 132.997 107.852 148.309 83.7288 148.845C72.5181 149.081 58.5368 146.113 50.8212 137.176C42.421 127.407 45.0441 112.296 53.7244 103.604C70.3422 87.0585 102.952 91.1301 123.155 97.9693C145.591 105.666 164.921 121.085 172.951 143.847C181.535 167.923 174.754 193.715 169.644 217.622C166.685 231.087 164.023 244.891 165.095 258.789C166.016 270.831 170.68 282.45 177.16 292.612C190.153 312.814 212.5 327.616 236.798 329.331C248.749 330.2 249.041 348.944 236.936 348.163C195.469 345.218 158.214 313.978 148.665 273.181C143.449 251.044 148.105 228.831 152.906 207.045C157.341 187.105 163.047 163.876 153.199 144.516C144.114 126.658 125.512 116.747 106.475 112.813C96.88 110.89 86.1704 110.224 76.5058 112.43C70.8344 113.762 58.0659 121.748 68.0603 127.018C84.7687 135.773 108.523 126.454 118.163 111.279C128.021 95.7732 122.768 77.6448 110.371 65.3791C93.9698 49.189 72.473 45.2436 50.2436 46.9349C23.3926 48.9432 -9.28315 52.3721 -28.1024 28.2753C-31.2832 24.1825 -31.9544 18.9474 -28.03 14.9438C-24.8161 11.6571 -17.8793 10.9235 -14.8194 14.9839Z" fill="currentColor"/>
     </svg>
-    <svg class="wave-right text-white" style="opacity:0.15" width="291" height="170" viewBox="0 0 291 170" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg class="wave-right {{if $footer_light}}text-dark{{else}}text-white{{end}}" style="opacity:0.15" width="291" height="170" viewBox="0 0 291 170" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M40.6178 -98.5373C26.3888 -74.758 17.9858 -47.7259 16.9774 -19.9086C16.1931 1.51518 20.3386 27.5378 38.6011 41.4464C50.9255 50.7562 72.5492 51.2049 83.305 39.0909C86.4422 35.6137 92.3803 22.1538 84.5375 20.247C80.7281 19.3496 76.5826 24.0606 74.4539 26.6404C70.4204 31.3514 67.6195 37.2963 65.4907 43.1289C61.9054 53.1117 61.9054 64.2162 72.8853 68.9272C82.1846 72.9652 93.2766 71.7313 102.8 69.2637C125.656 63.431 148.512 49.4102 162.181 29.7811C163.638 27.6499 164.198 25.7431 165.206 23.4998C165.654 22.4903 163.414 23.3876 166.215 24.0606C164.87 23.7241 163.638 23.7241 162.293 23.7241C157.139 24.0606 152.21 26.5283 148.4 30.0054C140.782 37.2963 139.661 48.5129 144.927 57.4862C150.529 67.0204 161.733 69.3758 172.041 69.2637C184.029 69.1515 195.905 66.6839 208.005 66.6839C222.795 66.5717 236.239 71.0584 248.228 79.583C259.992 87.9955 270.188 98.4269 281.504 107.512C305.704 126.917 333.266 142.396 362.284 153.164C372.368 156.866 367.998 173.242 357.803 169.428C325.311 157.202 295.06 140.041 268.059 118.168C255.51 107.961 244.306 95.2863 229.741 87.9955C215.96 81.0412 200.275 83.7332 185.597 85.1913C171.144 86.6495 155.347 87.0981 142.686 78.6856C129.914 70.161 123.079 54.9064 125.32 39.7639C127.449 24.8458 138.877 12.7318 153.106 8.35734C159.94 6.22618 168.455 5.66532 174.73 9.59115C181.788 13.8535 183.357 22.6025 180.892 30.0054C176.298 44.0262 162.069 56.028 150.641 64.6648C138.317 73.9746 123.976 81.0411 109.074 85.0791C95.7415 88.6684 81.0642 90.0144 67.9556 84.8548C53.3904 79.1343 44.9874 65.6743 46.78 49.971C48.5727 34.7164 57.0877 17.4428 69.7482 8.24514C82.5208 -0.952511 99.8869 3.98282 104.032 19.6861C111.315 46.9426 82.4087 65.6744 58.6563 65.0014C29.1898 64.2162 9.6948 40.2125 3.30853 13.0683C-4.31018 -19.0113 1.96406 -54.2315 14.6246 -84.1799C17.9858 -92.0316 21.7951 -99.6589 26.1647 -106.95C31.5426 -116.26 46.1078 -107.847 40.6178 -98.5373Z" fill="currentColor"/>
     </svg>
   </div>