Set the Content Area Width to Match a Header Image Width in a Web Skin

A common request is for a header image width to match the content area width on the same online page. You can adjust this for your web skin.

Web skins are configurable so you can change the content area width. But rather than trying to figure out the content area width, it is best to create your image first, and then have the content area match that width. Typical header image sizes are between 800 to 1000 pixels wide and 200 to 300 pixels high.

The below instructions assume you have:

• Uploaded the image you are using in the Top section within the Page Sections section of the Edit Web Skin screen.
• Set the Left and Right sections within the Page Sections section of the Edit Web Skin screen to Use the default option.
• The image width.

To change the web skin so the content area width matches your header image width:

1. Click the Web Skins link from the Main Menu. The Web Skins screen opens.
2. Select the web skin to edit.
3. Right-click and select Edit. The Edit Web Skin screen opens.
4. Expand the Page Settings section.
5. Enter the necessary information:
   • Page Width - Same value as your header image width
   • Page Width Unit - Pixel
   • Alignment - Center
   • Content Width - Center Presentation - 100
   • Page Section Dimensions - Center Presentation - Percent
   • Content Width - Left Presentation - 0*
   • Content Width - Right Presentation - 0*
6. Click OK.

*If you have content in the left and right sections, you need to adjust the values accordingly. For example, if your header image is 1000 pixels wide, and you want your left and right sections to each be 100 pixels wide, then your content area is 800 pixels wide (1000-100-100=800) and you could use the following settings:

• Page Width - 1000
• Page Width Unit - Pixels
• Alignment - Center
• Content Width - Center Presentation - 800
• Page Section Dimensions - Pixels
• Content Width - Left Presentation - 100
• Content Width - Right Presentation - 100