Inserting Overlay Content Into Header Of Jekyll Theme

I want to add overlay content to the header, specifically to overlay on top of the Header Image.

Details

I have written the HTML/Liquid and SCSS and it all works when I test it outside of the site build, but I wanted to know how to add this overlay content into the header of all pages using the _masthead.html. The goal is to insert a widget of sorts with variable content. This is what the header currently looks like on the site image of website header This is what it is supposed to look like image of website header

What it Looks Like Now

After I implemented what Christian told me it looks like this now

The Files

The repository can be found here, and the components are:

This is the _masthead.html



  <div id="masthead-no-image-header">
    <div class="row">
      <div class="small-12 columns"><!-- <a id="logo" href="/" title=" – ">
        <img src="/assets/img/" alt=" – ">
        </a> -->
      </div>
      <!-- /.small-12.columns -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /#masthead -->

This is the header-widget.scss

@import "/assets/fonts/imports.css";
// @import url(https://raw.githubusercontent.com/NewSpectrum/Technovine-Site/main/_sass/foundation-components/_header-button.scss)

//▸ Widget Properties
$header-color:      hsl(0deg, 0%, 100%);
$txt-color:         hsl(0deg, 0%, 100%);
$inner-shadow:      inset 2px 2px 5px hsla(0deg, 0%, 0%, 0.5);
$txt-shadow:        0.5px 0.5px 5px hsla(0deg, 0%, 0%, 0.5);
$widget-bg-color:   hsla(0deg, 0%, 0%, 0.5);
$widget-padding:    1rem 2.5rem 2rem 2.5rem;


//▸ Button Properties
$sr-bg:             hsl(
                          18deg,
                          100%,
                          62%
                        );
$button-text:       hsl(0deg, 0%, 100%);
$button-gr1:        hsl(18deg,
                          100%, 62%);
                    // #ff773d
$button-gr2:        hsl(18deg, 80%, 45%);
                    // #cf4e17
$box-shadow:        1px 1px 3px hsla(0, 0%, 0%, 50%);
$text-shadow:       0.5px 0.5px 1.5px hsla(0, 0%, 0%, 50%);

$button-gradient:   linear-gradient(
                        135deg,
                        $button-gr1 0%,
                        $button-gr2 100%
                    );


.header-widget {
    position: relative;
    align-items: left;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;

    .widget-container {
        background-color: $widget-bg-color;
        padding: $widget-padding;
        border-radius: 20px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: $inner-shadow;

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: "Libre Baskerville", serif;
            color: $header-color;
        }


        p {
            font-family: "Lato", sans-serif;
            font-size: 1rem;
            color: $txt-color;
        }
    }

}




.button-container {
    position: relative;
    max-width: 200px;
    font-family: "Lato", sans-serif;
    text-shadow: $text-shadow;
    background: $button-gradient;
    color: $button-text;
    border: 0;
    box-shadow: $box-shadow;
    border-color: hsla(0, 0%, 0%, 0%);
    border-radius: 20px;
    padding: 10px 20px;
    a {
        color: inherit;
        text-decoration: none;
    }
}

This is the header-widget-button.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Test</title>

    <link rel="stylesheet" href="../css/_header-button.css">
    <script id="service-request_script"
     src="../js/service-request_button.js"></script>
    <script id="slideshow">
        // JavaScript
        // Change 'background-image' in 'body' (css)
        // Change <section> content
    </script>
</head>
<body>
    <section id="header-widget" class="header-widget">
        <div id="sales-widget" class="widget-container">
            <h1>
                Worry-Free Professional IT Services
            </h1>
            <p>
                No need to worry about amateur service. Get the IT professionals your business needs.
            </p>
            <!--BUTTON-->
            <br /><br />
            <div id="button-container" class="sales-request button">
                <button id="sales_button" onclick="requestService()">
                    Get&nbsp;Quote
                </button>
            </div>
        </div>

<br><br>

        <div id="service-request_widget" class="widget-container">
            <h1>
                Worry-Free Professional IT Services
            </h1>
            <p>
                No need to worry about amateur service. Get the IT professionals your business needs.
            </p>
            <!--BUTTON-->
            <br /><br />
            <div id="button-container" class="sales-request button">
                <button id="sales_button" onclick="requestService()">
                    Submit&nbsp;Ticket
                </button>
            </div>
        </div>
    </section>
</body>
</html>

This is the header-widget.liquid

<section id="header-widget" class="widget-container">
    <div id="sales-widget" class="header-widget">
        
            <code>widget_title is not set</code>
        
        <p>
            
        </p>
        <!--BUTTON-->
        <br /><br />
        <div id="button-container" class="button-container">
            <button id="sales_button" onclick="requestService()">
                <a href="">
                    
                </a>
            </button>
        </div>
    </div>
</section>

This is index.md

header:
  image_fullwidth: networking-connections-004.jpeg
header_widget:
  widget_title: "Worry-Free Professional IT Services"
  widget_text: |
    No need to worry about amateur service. Get the IT professionals your business needs.
  button_text: "Request a Quote"
  button_url: "/contact"

Search This Blog

Theprogrammersfirst | A technical portal.