Establishing a Consistent Look-and-Feel with Master Pages

This topic details how to use Master Pages to give your Wings Application a consistent visual style.

As noted in the Master Pages topic the MasterPage.Master works with each Wings display file ASPX, which has defined divisions identified with ContentPlaceHolderIDs, each using the same id as the corresponding division in the master page where it is displayed. When the Content Page is requested, it is merged with the Master Page combining the layout of the Master Page with the content from the Content Page.

Changing the master page thus changes the appearance of the entire application. Some of the easiest and most profound changes you can make include:

• Change the Title

  The title defaults to the example provided with the installation. You can locate the title in MasterPage.master and change "IronMonger" to your company name.

  <Title>Your Company Name Here</Title>

  You may also wish to change the Headline and Tagline to match your company name and motto here:

  <div id="branding">
  	<h1 id="headline" class="ir">Your Company Name Here</h1>
  	<p id="tagline">Your slogan or tagline here</p>
  </div>

• Change the Logo

  A sample logo image is provided with the installation. This logo image, App_logo.png, can be replaced with your logo or you can add a new image and then change the image reference in MasterPage.master. The image reference in MasterPage.master is shown below. If you create a new file you will need to change the ImageUrl to match the location and file name of your logo image.

  <asp:Image style="float:left;margin-top:30px" ID="Logo" runat="server" ImageUrl="~/Themes/Current/Images/App_logo.png" />

• Change the Placement of the Function Keys