The event website comprises two main areas, the wrapper and the main body (shown in Figure 2). The wrapper is the area that remains the same regardless of the page you access on the event website. The main body is the area that changes according to the web page you wish to access. These two areas are configured using the Administration Software while logged into the server.
The wrapper displays the items that are common on every page of the event website. This includes the banner, footer, background, menu bar, body width and color, and CSS styling. Figure 3 shows you the various components of a wrapper. Each item on the wrapper is controlled from the “Website” module of the Administration Software. You do not have any access to HTML or scripting on the wrapper. However, you have limited access to images, colors, and fonts, spacing, and alignment.
The banner is the area at the top of the web site, above the menu bar. You can upload an image file in this area, or have the event’s name appear. If no image is uploaded, the event’s name appears over the background color selected for the main body; the font properties of the event’s name and the background color of the banner area can be changed from the CSS file.
The size of the banner are depends on the image file you upload. The server does not do any image re-sizing or cropping. The format of the uploaded image file must be JPG. If you upload a banner image that is wider than the width of the main body and footer area, the width of the main body and footer areas are stretched horizontally to fit the banner image’s width (see Section 2.2 for details on the main body). You upload the banner image from the “Website” module. See Section 8.2.1 for instructions on how to upload a banner image.
The menu bar appears below the banner. It contains the links to other web pages on the event website and links to external URLs. The menu bar has six parts, which are conceptually identified in Figure 4:
See Section 8.5 for details on how to add, edit, and delete main menu and submenu links.
The footer is the area at the bottom of the website, below the main body. You can upload an image file into this area. If no footer image is uploaded, nothing appears in that area. The size of the footer depends on what you upload. The server does not perform any image re-sizing or cropping. The format of the uploaded image file must be JPG. If you upload a footer image that is wider than the width of the main body area or the banner image, the width of the main body and banner areas are stretched horizontally to fit the footer image’s width (see Section 2.2 for details on the main body). You upload the footer image from the “Website” module. See Section 8.2.2 for instructions on how to upload a footer image.
The main background is displayed in the entire browser window in areas not covered by the Banner, Menu Bar, Main Body, and Footer. The background can be a color or an image, or both. When both are specified, the image is superimposed on top of the background color. The main background color and main background image are specified in the “Website” module. See Section 8.3.1 for instructions on how to upload the main background image.
The body background color is the default background color for the banner, menu bar, main body, and footer. You can override this color on the individual components. The body background color is specified in the “Website” module. See Section 8.3.2 for instructions on how to set the body background color.
The body border is the width of the border around the area containing the banner, menu bar, main body, and footer. The default border width is 0 pixels, but you can change this value from the “Website” module. See Section 8.4.2 for instructions on how to set the main body border width.
The body width is the minimum width of the area containing the banner, menu bar, main body, and footer. The default width is 800 pixels, but you can change this value from the “Website” module. The value configured for body width is overridden when you upload or specify an image, table, or other component that is wider. For example, the body width that is set to 800 pixels can be stretched if you upload a banner image that is 1000 pixels wide. See Section 8.4.1 for instructions on how to set the main body width.
The main body is the area of the event website that changes from web page to web page on the event website. The display area is surrounded by the wrapper, regardless of which web page you access. You can create any number of web pages using either default body pages or custom body pages. Each page can be associated to either Main Menu Label Link or a Submenu Label Link in the Menu Bar.
Default body pages are areas that display fields that you have configured in the “Update Tournament” or “Update Category” windows. Using a default body page is a convenient way of displaying information relating to your event without having to generate HTML code.
The following are default body pages are available:
The “Website” module is where you can specify which default body page you want on the event website. See Section 8.5.4 for details on how you can include default body pages on the event website. You also have access to the CSS style of specific areas of the default body pages. See Section 9 for details on accessing the content of the CSS file.
A custom body page is HTML code that you upload to render a web page on the event website. Custom body pages are uploaded from the “Website” module. See Section 8.5.5 for details on uploading custom body pages. You can also upload custom CSS styles that are used in your custom body pages. See Section 9 for details on how to access content of the CSS file.
