Refining the Look

Let's add a little polish to our layout by fixing the masthead and adding a few nice images.

Fixing the masthead

The default content inside the masthead consists of a level 3 heading and a paragraph. We're going to delete those elements and insert a logo. Now, don't get nervous, but this task is much easier to do in Code View. So, place your cursor inside the masthead and switch to Code View, which will look like this:

<div class="hmy-content-wrapper hmy-color-content-black masthead transparent">
<div class="hmy-content hmy-left">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, ne sea vocent scripta abhorreant, facilisi explicari mel ne, ut quo vide ridens. Mei ex quodsi inciderint, quo ad quas deleniti definitionem, vis no wisi graecis offendit. Ius ut everti detraxit expetenda, meis civibus consectetuer ea usu. Ad qui option facilisis consequuntur, pro omnis aliquip vulputate te. Solum affert expetenda eos te, et vim sale iudico impetus, in appetere postulant ius. Alia nihil utroque ex sit.</p>
</div>
</div>

Delete the H3 and the paragraph, leaving a blank line where those elements were, so it looks like this:

<div class="hmy-content-wrapper hmy-color-content-black masthead transparent">
<div class="hmy-content hmy-left">

</div>
</div>

Insert a Logo

With your cursor on the blank line in Code View, choose Insert > Image

Browse to the images folder inside your Harmony-Layout-Basics folder and select logo-2017.png

Now, of course, the image is the PVII logo, which is really cool, and you have our blessing to replace our logo with your own. We thought you should know that.

Your code should now look like this:

<div class="hmy-content-wrapper hmy-color-content-black masthead transparent">
<div class="hmy-content hmy-left"><img src="images/logo-2017.png" width="205" height="96"></div>
</div>

Fixing the Masthead

Copy the three CSS rules below and paste them inside the custom.css file in your Harmony-Layout-Basics folder.

.masthead {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
box-sizing: border-box;
}
.masthead .hmy-content {
padding: 5px 10px !important;
}

body {
padding-top: 106px;
}

The first rule sets the masthead DIV to position fixed. The second rule sets custom padding for the content DIV. The third rule (body) sets top padding to ensure that no page content gets lost beneath the fixed masthead. The amount of padding is equal to the height of the logo image (96px) plus the top/bottom padding assigned in the masthead rule.

Note: Since some versions of Dreamweaver do not support fixed position in Design View, your page will appear to begin 106 pixels from the top. This is normal. Real browsers will display it properly.

Add an image to the sidebar

If you want to emulate our finished page, insert into your sidebar, 02.jpg, which you'll find in the images folder you downloaded.

Tip: The Harmony CSS file contains a utility class called rounded. You can assign that class to your image to round its corners (if you want).

Add some additional content to Column 2 (main-content)

If you want, add some additional text content, and perhaps another heading to your main-content area.

Edit the footer (column 4)

You can also edit the footer at this time.

Preview in Browser

And this is what you've done, so pat yourself on the back!