MND Header #02 Documentation

Modified on Thu, 22 Sep 2022 at 04:11 PM

ImagesBack to top

  • The header images can be changed by simply replacing the header1.jpg, header2.jpg, header3.jpg, and header4.jpg with your own in the images folder.
  • The images sizes are 338px wide by 450px high (header1.jpg & header4.jpg - the margin images), and 339 wide by 450px high (header2.jpg & header3.jpg - the middle images).

Site Title & URLBack to top

  • To add your site title in the header: Open index.html in your favourite editor → Search and edit <h1 class="site-title">.
  • Use the <span class="st1"> tag for the brown color, and the <span class="st2"> tag for the green color + different font + separate row.
  • To add your site URL in the header: Open index.html in your favourite editor → Search and edit <div class="site-url">.

StylingBack to top

  • The color blended over header1 and header3 can be changed in style.css:
    .header3 {
        background-color: rgba(75,214,162,.25);
        background-blend-mode: multiply;

    RGB value must be used, in order to make opacity work. The RGB value of a color can be found using sites like ColorHexa - replace the first 3 values in the background-color. The forth value is the opacity, you can also change it to suit your header.
  • The Middle Half-diamonds section in style.css holds the style for the top and bottom half-diamonds effects. You can remove them both, or only one of them.
  • In the Site Title + URL section in style.css you can change the colors, fonts, sizes for the website name and site URL.
  • You can change/remove the background image for the site URL in the class site-url, and the mask color + opacity in the class mask2.

Last StepsBack to top

  • Make a screenshot of the page.
  • Open/copy the screenshot in an image editor like XnView.
  • Crop the header at the dimensions you want, then save it as .jpg or .png.

BrowsersBack to top

The background-blend-mode used for the color filter over header1 and header3 is supported by the latest versions of Firefox and Chrome.
A full display of browsers supporting this CSS effect can be found at

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article