Before You Begin
Prior to customizing the graphics and elements of your website, review the material in this section to familiarize yourself with the package of standard page design elements, the basic online ordering process, and the elements available for customization.
The Graphics and Content section of Web Admin contains .css and .txt files. Although users with the ‘Graphic Admin’ access level can access these files, Aloha Online Ordering neither supports nor recommends altering these items. If you choose to edit these files, you are responsible for testing the customization of these files. Should a site error occur as a result of the customization of these files and you cannot resolve the error, the Aloha Online Ordering team can only upload the stock .css and .txt files back to your online ordering website.
Understanding the Standard Page Design Elements
The following table identifies and defines the various types of design elements within an online ordering site, and provides customization tips specific to each type of element.
Table 1: Standard Page Design Elements
| Element Type | # of Files | File Format | Purpose | Customization Tips |
|---|---|---|---|---|
| Button Graphics | 28+ | PNG | The interactive buttons initiate the program actions that drive the online ordering process. Text automatically overlays most buttons throughout the ordering process. | DO: Customize the visual appearance of the buttons to match your company branding. DO NOT: Change the original button dimensions, PNG file naming conventions, or button text. |
| Universal, Independent, and Optional Graphics | 40+ | PNG | The universal and independent graphics provide background color, visual content organization, and opportunities for incorporating custom images. Applying a consistent design theme across these graphics and all other page design elements ensures a consistent and logical online ordering experience. | DO: Customize the visual appearance of the independent graphics to match your company branding. DO NOT: Change the original dimensions or PNG file naming conventions. |
| Primary Page Graphics | 5 | PNG | The primary page graphics serve as layout templates designed to organize the content. | DO: Become familiar with the standard online ordering page layout sections and their respective positioning and dimensions. DO NOT: Design new graphics with dimensions different from their original dimensions. You cannot modify the positioning and dimensions of each section to accommodate element dimension variations. |
Understanding the Online Ordering Process
The following graphic demonstrates the online ordering process and the pages presented to the consumer during the online ordering process. The ordering process may vary for your company, depending on the online ordering functionality you selected.
Each page presented to a consumer, as indicated in the above order flow, relies on an element file listed in the table below.
| Element File | Corresponding Step |
|---|---|
| page-landing.png | 1,2 |
| page_start.png | 8 |
| page_menu.png | 9 |
| page_text.png | 3,4,5,6,7,9,10 |
| page_thankyou.png | 11 |
Additionally, the following elements always appear to the consumer when accessing the online ordering site.
| Element File | Description |
|---|---|
| background.png | The browser background color. |
| footer.png | The site footer. |
| header.png | The site header. |
| nav_bar.png | The site navigation bar background. |
| page_text_repeat.png | Enables page expansion whenever the standard page height is exceeded. |
Reviewing the Available Design Elements
Aloha Online Ordering contains a number of different design elements available for you to customize.Refer to Design Elements for a list and description of the design elements, including the corresponding pixel height and width.