MND Header #02 Documentation

• Images
• Site Title & URL
• Styling
• Last Steps
• Browsers

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:
  .header1,
.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 CanIUse.com.