MND Header #01 Documentation

• Images
• Site Title
• Styling
• Last Steps

ImagesBack to top

• The header images can be changed by simply replacing the header1.jpg (big left), header2.jpg (big right), and header3.jpg (diamond middle) with your own in the images folder.
• The images sizes are unlimited wide by 450px high (header1.jpg & header2.jpg), and 250px wide by 250px high (header3.jpg).

Site TitleBack 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> tag for the special effect (background + rotate) in the website name.

StylingBack to top

• The 2 colors over the images can be changed in style.css - locate the classes mask1 and mask2. RGB values 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 for mask1 and mask2. The forth value is the opacity, you can also change it to suit your header.
• The class diamond holds the values for the diamond middle image. Many elements depend on this values. Changes are not recommended, unless you know what you're doing.
• The class site-title span adds the background and rotates the text in the website name. You can change/remove this values in style.css.
• The class border creates the diagonal effect at the bottom of the header. The background color must be the same with the body. You can change the angle, to make the diagonal more/less steep. Increase the height value if the angle is too steep and the bottom of the header becomes visible.

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.