Defining the Appearance of Pages
The way you present your online content greatly impacts the usability and readability of that content in the online environment. Information layout and design for print and online content are usually very different. ePublisher allows you to format your source documents to optimize for printed delivery, and then use ePublisher to deliver the content optimized for online presentation.
Unlike printed content, online documentation can include extra navigation features, follow different rules regarding topic length and page breaks, and include unique page layouts for specific types of information. While each output format varies in the types of files that are delivered, most output formats are based on HTML. Therefore, when you decide how to present your content online, consider the layout of your content on an HTML page.
In ePublisher, the overall appearance of each topic of your output is controlled by page styles. You can modify page style properties with Style Designer to define whether to include navigation browse buttons on each page, whether to include company logo and contact information, and other design elements for each page that uses a specific page style. To deliver your online content as individual chunks, or pages of information, define page breaks based on paragraph styles, such as headings. For more information, see Defining New Pages (Page Breaks).
The Prototype Style for Pages
The Prototype style is the parent to all other styles. When you set a property for the Prototype page style, other page styles inherit the value of that property. You can then override that value for specific styles as needed. The Prototype page style allows you to quickly change a default property and apply that change to all page styles within your Stationery project.
Displaying Company Logo and Information on a Page
Most HTML-based output formats support adding company information, such as company name, email address, and company logo, as part of a page. Once you specify your company information in the Target Settings for your project, you can select different locations in which to place the content on each page. If you specify a value for Company webpage, ePublisher links the specified company name to the specified Web page. If you specify Company email address, ePublisher creates a mailto: link to the specified address.
If you add a logo image to your project, ePublisher displays the logo next to your company contact information on the top or the bottom of your output pages. To include a logo, you must first store the image file in the Files folder of your project.
To specify your company information and the location on the page
  1. On the Project menu, select the Active Target you want to specify settings for.
  2. On the Target menu, click Target Settings.
  3. Specify the appropriate values for the Company Information settings, such as Company name and Company phone number. If you do not see these fields in the list of target settings, the output format for the active target does not support this feature. For more information about a setting, click Help.
  4. Click OK to save the target settings.
  5. On the View menu, click Style Designer.
  6. On the Project menu, click a target in the Active Target menu option that is an output format that supports this option.
  7. In Page Styles, select the page style you want to modify.
  8. On the Options tab, specify the appropriate values for the Company info... options. For more information about an option, click Help.
Note: Company information is not displayed in the Preview pane.
Modifying the Appearance of the Company Information
You can modify the appearance of the company information by creating an override for the Page.asp file. This file controls the content coding for each page of your content. When you modify this file, you need to change the appropriate part of the file based on whether you want to modify the appearance of the company information at the top of the page or at the bottom of the page. You can also modify many other aspects of your content pages.
To modify the appearance of the company information
  1. Create an override file for the Page.asp file by copying it from the installation folder to your format or target override folder in your project, based on whether you want to modify the appearance of the company information for an output format or for a specific target. For more information, see Format and Target Overrides.
  2. Open the Page.asp file you copied to the Formats\<formatname>\Pages or Targets\<targetname>\Pages folder in your project.
  3. Locate the code at the top or bottom of the Page.asp file, based on whether you want to change the appearance of the information at the top or the bottom of the page.
    • To modify the top of the page, find the following line of code:
      <table wwpage:condition="company-info-top" align="left" wwpage:attribute-align="company-info-top-alignment">
    • To modify the bottom of the page, find the following line of code:
      <table wwpage:condition="company-info-bottom" align="right" wwpage:attribute-align="company-info-bottom-alignment">
  4. If you want to modify the appearance of the company name, create an override for webworks.css from the Formats\<your format>\Pages\css installation directory. Then, find td.WebWorks_Company_Name_Top in Pages\css\webworks.css, and modify the CSS attributes, such as the font-size or font-family, and required.
  5. If you want to modify the appearance of the company phone number, find the following code immediately after the line of code you found at the top or bottom of the file:
    <tr wwpage:condition="company-phone-exists">
    <td class="WebWorks_Company_Phone_Bottom">
    or <td class="WebWorks_Company_Phone_Top">
    Look for td.WebWorks_Company_Phone_Bottom or td.WebWorks_Company_Phone_Top in Pages\css\webworks.css and change the font-size or font-family
  6. If you want to modify the appearance of the company fax number, find the following code immediately after the line of code you found at the top or bottom of the file:
    <tr wwpage:condition="company-fax-exists">
    <td class="WebWorks_Company_Fax_Bottom">
    or <td class="WebWorks_Company_Fax_Top">
    Look for td.WebWorks_Company_Fax_Bottom or td.WebWorks_Company_Fax_Top in Pages\css\webworks.css and change the font-size or font-family.
  7. If you want to modify the appearance of the company email address, find the following code immediately after the line of code you found at the top or bottom of the file:
    <tr wwpage:condition="company-email-exists">
    <td class="WebWorks_Company_Email_Bottom">
    or <td class="WebWorks_Company_Email_Top">
    Look for td.WebWorks_Company_Email_Bottom or td.WebWorks_Company_Email_Top in Pages\css\webworks.css and change the font-size or font-family.
Setting the Background Color or Image of a Page
You can specify a color to use as the background of a page. You can also specify an image to use as the background. This capability allows you to include a watermark, such as DRAFT for initial internal versions of your online content. The background image for a page is behind other elements on the page. If you set a background color for the page, you cannot see the background image for the page. Make sure the image is stored in the Files folder for the project so the image file is copied to your output folder. Also make sure the image does not make the text too difficult to read.
To set the background color or image of a page
  1. Open your Stationery design project.
  2. On the View menu, click Style Designer.
  3. In Page Styles, select the page style you want to modify.
  4. On the Properties tab, click Background.
  5. If you want to specify a color for the background of a page, select a color in the Color field, or type the RGB value of the color you want, such as #FFFFFF.
  6. If you want to specify an image for the background of a page, complete the following steps:
    1. Save the image file in the Files folder for the project. ePublisher copies files from the Files folder when you generate the project.
    2. In the Image field under Background Image, select the image you want to use. ePublisher lists only the image files stored in the Files folder.
    3. Specify the tiling, scrolling, and position properties to position the image. For more information about a property, click Help.
Setting the Border Style and Color of a Page
Borders are lines that can be drawn around any or all of the four sides of a page. In terms of the CSS box model, increasing the padding for a page style increases the space between the content within the page and the border of the page.
Not all browsers display border styles the same way. For example, some browsers may not differentiate dotted lines from solid lines. The size and spacing of the dots in a dotted line may also be different between various browsers and operating systems. Some browsers may not display page borders at all. If you want a page border, view the generated output in multiple browsers to verify that your settings create the appearance you want.
To set the border style and color for a page
  1. Open your Stationery design project.
  2. On the View menu, click Style Designer.
  3. In Page Styles, select the page style you want to modify.
  4. On the Properties tab, click Border.
  5. Click the tab for the side of the page you want to display a border, and then specify the color, style, and width for that border. For more information about a property, click Help.
Adjusting the Space Around a Page
You can adjust the white space around a page by adjusting the margin and the padding. In terms of the CSS box model, modifying the padding property adjusts the space inside the border area. For example, if you create a border or background color for a page and you increase the size of the padding, the border moves away from the content in the page.
Modifying the margin properties adjusts the space outside the border area. For example, if you create a border or background color for a page and you increase the size of the margins around the page, the border remains the same distance from the content in the page. However, the position of the content changes because the space outside the border increases.
To set the margin and padding of a paragraph
  1. Open your Stationery design project.
  2. On the View menu, click Style Designer.
  3. In Page Styles, select the page style you want to modify.
  4. On the Properties tab, click Margin.
  5. Specify a value and select the unit of measure for the Left, Right, Top, and Bottom margin properties.
  6. On the Properties tab, click Padding.
  7. Specify a value and select the unit of measure for the Left, Right, Top, and Bottom padding properties.
Using a Custom CSS to Modify the Appearance of Content
You can use a custom CSS file to modify the appearance of your content instead of using Style Designer for HTML-based output formats. By using style names in your source document that match the classes defined in your custom CSS file, such as div.Heading1, you can make sure your content uses your custom CSS file. You do not need to create any other association between styles in your source documents and the styles in Style Designer. Make sure you define each tag and class from your generated output in your custom CSS file.
To use a custom CSS file with your project
  1. Store your custom CSS file in the Files folder in your project.
  2. Open your Stationery design project.
  3. On the View menu, click Style Designer.
  4. On the Project menu, click a target in the Active Target menu option that is an output format that supports this option.
  5. In Page Styles, select the page style you want to modify.
  6. On the Options tab, select your custom CSS file in Custom document css file.
Modifying the Location and Separators of Breadcrumbs
Breadcrumbs form a linked path to show users the location of the current topic in your online content. This clickable path steps you through the topics in the hierarchy above the current topic. You can display breadcrumbs at the top of the page, at the bottom of the page, or both. The breadcrumb trail at the top of the output page is enabled by default.
To modify the location of the breadcrumb trail
  1. Open your Stationery design project.
  2. On the View menu, click Style Designer.
  3. On the Project menu, click a target in the Active Target menu option that is an output format that supports this option.
  4. In Page Styles, select the page style you want to modify.
  5. On the Options tab, select the appropriate value for the Breadcrumbs shown at top of page and Breadcrumbs shown at bottom of page options.
  6. On the Properties tab, click Navigation.
  7. Specify the appropriate values for the Breadcrumbs Separator and Alignment properties. For more information about a property, click Help.
Modifying the Appearance of Breadcrumbs
Breadcrumbs form a linked path to show users the location of the current topic in your online content. If you enabled breadcrumbs for your output, you have several options to define the appearance of the breadcrumbs. For more information, see Modifying the Location and Separators of Breadcrumbs.
For more information about override files and locations, see Stationery, Projects, and Overrides.
To modify the appearance of the breadcrumb trail
  1. If you want to override the CSS settings for an output format, complete the following steps:
    1. In your Stationery design project, on the View menu, click Format Override Directory.
    2. Create the Formats\<formattype>\Pages\css folder in your project folder, where formattype is the name of the output format you want to override, such as Microsoft HTML Help 1.x.
  2. If you want to override the CSS settings for a target, complete the following steps:
    1. In your Stationery design project, on the View menu, click Target Override Directory.
    2. Create the Targets\<targetname>\Pages\css folder in your project folder, where targetname is the name of the target you want to override.
  3. Copy the webworks.css file from the following folder to the override folder you created within your project folder:
    Program Files\WebWorks\ePublisher Designer\Formats\<formattype>\Pages\css
  4. Open the webworks.css file you copied to your project override folder.
  5. Find the code for div.WebWorks_Breadcrumbs and modify the values specified within the braces:
    • To modify the text color, specify the desired RGB color value for the color option.
    • To modify the font, specify the name of the font you want for the font-family option.
    • To modify the size of the font, specify the size you want for the font-size option.
  6. Save the webworks.css file.
  7. Regenerate your project to review the changes.
Choosing the Location of Navigation Browse Buttons
If you have included navigation buttons in your output, you can specify whether to display the browse buttons at the top or the bottom of each page. You can also specify whether to align the button along the right or left side. Not all output formats support navigation browse buttons.
To modify the location of navigation browse buttons
  1. Open your Stationery design project.
  2. On the View menu, click Style Designer.
  3. On the Project menu, click a target in the Active Target menu option that is an output format that supports this option.
  4. In Page Styles, select the page style you want to modify.
  5. On the Options tab, select the appropriate value for the Navigation links shown at top of page and Navigation links shown at bottom of page options.
  6. On the Properties tab, click Navigation.
  7. Specify the appropriate values for the Navigation Alignment properties. For more information about a property, click Help.
Modifying the Navigation Browse Buttons
You can use customized navigation browse buttons in your online content. For more information about customizing the WebWorks Help navigation buttons, see Customizing the Toolbar in WebWorks Help.
To change the navigation button images
  1. If you want to override the images for an output format, complete the following steps:
    1. In your Stationery design project, on the View menu, click Format Override Directory.
    2. Create the Formats\<formattype>\Pages\Images folder in your project folder, where formattype is the name of the output format you want to override, such as Dynamic HTML.
  2. If you want to override the images for a target, complete the following steps:
    1. In your Stationery design project, on the View menu, click Target Override Directory.
    2. Create the Targets\<targetname>\Pages\Images folder in your project folder, where targetname is the name of the target you want to override.
  3. Paste the .gif files you want to use with names identical to those you want to replace in the Images folder you created. The following table lists the default button images and their file names and sizes.
    Image
    Name
    Image Size
    Description
    prev.gif
    Width: 0.722 inch
    Height: 0.333 inch
    Sends the user to the previous HTML document.
    prevx.gif
    Width: 0.722 inch
    Height: 0.333 inch
    Displayed when there is no previous HTML document available.
    next.gif
    Width: 0.722 inch
    Height: 0.333 inch
    Sends the user to the next HTML document.
    nextx.gif
    Width: 0.722 inch
    Height: 0.333 inch
    Displayed when there is no next HTML document available.
  4. Regenerate your project to review the changes.
Associating a Page with a Page Style
By default, output is associated with the Prototype page style in ePublisher. Therefore, you do not have to do anything to associate pages with the Prototype page style. However, if you want to have more than one page layout, you need to use additional page styles.
To associate a page with a page style
  1. Define page breaks based on paragraph styles, such as heading styles.
  2. Define additional page styles in the Stationery.
  3. If you want to associate a page with a page style other than the Prototype page style, add a PageStyle marker or field code in your source document after the new page style, such as the heading that starts the page. The PageStyle marker or field code identifies what page style to use for that page.
Provide writers with the defined page style names they need to specify in their PageStyle markers or field codes.
Was this helpful?
Last modified date: 01/28/2026