Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

Harmony TutorialsOne Design: All Devices: Perfect Harmony...

User Guide & Examples | Harmony Home

One Design. All Devices. Perfect Harmony

  • The first ever flexbox page layout tool for Dreamweaver
  • Makes Dreamweaver a much better program
  • No coding is ever required.
  • Add, remove, and re-order columns visually, within the Harmony interface
  • No layout is beyond your reach

Current Tutorials

The following tutorials are available:

Creating a Sticky Footer in a Harmony Page

Sticky footers are footers that are pinned to the bottom of your browser viewport. They are not, however fixed. That is, when the content above grows sufficiently, the footer is pushed down and your page scrolls normally — with your footer going along for the ride. To do this with Harmony, you first need to create the sticky footer, then add your Harmony structure in a designated area . It's really easy!

Harmony and Dreamweaver Templates

A single Dreamweaver template can drive your entire site—a site where each and every child page can have a completely different structure and look. All you need to do is place your cursor anywhere inside the editable region and open the Harmony interface, where you can then delete columns, add columns, change their width, and so very much more.

Harmony Layout Basics

Harmony is all about being able to flesh out any type of page layout you can imagine. But all that power can be used to make simple layouts extraordinarily fast. Literally, in minutes For a web designer, this is not a trivial thing. It's more like being handed a magic wand—a means to handle more clients, or more projects, than you ever thought possible. So let's work together on a little project right now. Let's make a traditional 2-column page layout, composed of a masthead, a main content area, a sidebar, and a footer. Then we'll spice it up a little by fixing masthead so it sticks to the top of the page. We'll start with a new page, and if you follow each step, your layout will be finished in about 5 minutes.

Harmony Link Styles

The default Harmony style sheet [p7HMY-01.css] contains a set of text link styles that are applied automatically. Sometimes these rules can conflict with other elements on your pages, such as menus or widgets, by assigning unwanted borders. If this is a problem, there are two ways to fix things, which are covered in the tutorial.

Best Practices: The User Class Option

You can assign an optional User Classes to Harmony Sections, Columns, or the entire Harmony Grid. User classes are one of the most powerful features in Harmony, allowing you full freedom to customize individual elements beyond the options in the UI. User classes are assigned directly in the Harmony interface and point to CSS classes that you create, giving you total design freedom. If you are a proficient CSS author, the User Class entry boxes in the Harmony UI allow entry of multiple class names. Simply separate each name with a class.

Best Practices: Assigning Background Images: Part 1

You can set simple or complex background images to any Harmony element, by assigning User Classes to Harmony Sections, Columns, or the entire Harmony Grid. User classes are one of the most powerful features in Harmony, allowing you full freedom to customize individual elements beyond the options in the UI.

Best Practices: Assigning Background Images: Part 2

Leverage the power of CSS3 multiple backround images to create a color overlay. CSS level 3 permits the assigment of multiple background images to any element on your page. The task of adding semi-transparent color overlay that allows your background image to peek through, can be easily achieved using two background images. In this tutorial you'll learn to use the Harmony User Class option. You'll learn about CSS level 3 multiple background images, media queries, and how to fix your display in Dreamweaver design view to make editing content easier.