Purpose: The Administrator's Guide has two purposes: 1) to ensure a consistent look and feel across the OLLI Photo Club's web pages within the OLLI GMU WordPress system and 2) to ensure that the look and feel supports the Club's policies as described in the Overview.
Contents: At this time, January 2018, this guide contains a list of items describing web site layout, use of the menu bar, page titling, etc.
| Item | Description |
| Page Title | All page titles shall be of the form "OLLI Photo Club - Title" |
| Menu Bar Definitions | The following definitions apply to Menu Bar Policy:
Types of activities: routine functions and exhibitions. Routine functions identified in the club’s Overview include monthly themes, speakers, field trips, and peer reviews. Exhibitions have included themed exhibitions in the OLLI annex, community documentaries such as the 275th Fairfax County Anniversary’s “Then and Now” exhibit, drama shoots for the GMU School of Theater, and other special event coverage. Methods of communication: periodic emails, gallery comments, photography blog, Facebook group and (TBD) club news. Collective category: User Interface (UI) design uses the terms menu and sub-menu for navigating through human-machine interactions. For the purposes of these definitions, a collective category is a Club-specific set of similar activities specified in a sub-menu. |
| Menu Bar Policy | The number of links on the menu bar shall be kept to a minimum.
Links on the menu bar shall lead to pages for either 1) routine functions of the Club or 2) collective categories with further links to pages of the Club's exhibitions or other activities. A link on the menu bar shall also exist for the Club’s digital galleries, given their significance in supporting these activities. Should the club decide to formalize its communications through the OLLI GMU WordPress system (for example, a “news” page), a new item shall be added to the menu bar as a collective category; this will be a collective category rather than a "routine function" since the club already has several methods of communication: the Critique galleries, the Photography blog and the Facebook group. |
| Menu Bar Position | All pages shall have a menu bar at the top and bottom of the page. |
| Menu Bar Format | Menu bar links shall be separated from each other by five characters: two spaces, one bullet and two spaces. The top menu bar shall have a horizontal line beneath it (<hr/>) followed by two blank lines. The bottom menu shall have a horizontal line above it preceded by two blank lines. |
| Menu Bar: Link Format | Definition: an active link is one which will initiate calling a new page, an inactive link initiates no function.
Each link associated with a "routine function" (see Menu Bar Definitions above) shall be inactive on its own page and active on other pages. The rationale is that an inactive link provides the user a navigational aid that provides an additional clue as to his current page. Each link associated with a "collective category" (see Menu Bar Definitions above) shall similarly be inactive on its own page and active on other pages. Note, however, that on pages for Club activities which have been reached through a collective category, the link will always be active. The rationale is that such a page, even though acting as an extension of the sub-menu (the collective category page) in a navigation scheme, it is still a standalone page but without a first level menu link; thus the page has no ability to aid in navigation. Of course this is a limitation, so the collective category page must be clearly structured so the user can always properly navigate from it to other pages. The user must become accustomed to returning to the collective category page when other navigational references are not available. Note on collective category links. Currently only one collective category link exists: Projects. The policy shall be that the OLLI Photo Club's web pages shall have more than one collective category link if and only if all such links are clearly distinguishable by all members without need for explanation, such as an Admin collective, Project collective or a Communications collective. |
| Menu Bar: Link Operation | Links shall open in the same browser window (or tab) as the calling page except if the link is to a page outside the OLLI GMU WordPress system, in which case the link shall open in a new browser window (or tab). |
| Table Usage | In addition to typical uses of tables, the table function supports paragraph outdenting. |
| Colored Text | The OLLI GMU WordPress system has been configured with pages containing white backgrounds. Blue on white is one of the most effective combinations for attracting attention, more so than bold black on white. Avoid red text, especially on a black background, because the colorblind will see it as black on white (losing the emphasis) or black on black. Never use red on blue or blue on red - the greatly different wave lengths of these colors in combination will cause humans to perceive blurring on the edge of letters. |
| Link to Location within Page | Enter an id into an empty div HTML element. The id, in this case, "link-target," becomes the hash portion of the base url. Note that some browsers don't position precisely, I've added a period after the div element as shown here:
<div id="link-target"></div> Call the link-target position in page1 from an external page as follows: https://site.com/page1#link-target |
| Images in a Row | Normal caption insertion doesn't work in WordPress: there is no way (perhaps without extensive CSS) to place a carriage return (<p>, <br>, etc.) after the inserted images because WordPress deletes these codes in the visual editor. A solution of placing the images into a 1x1 table doesn't work because the images are not aligned horizontally. One solution is to place the captions into separate columns of a single table row (nx1 where n>1). However, word wrap around the table must be considered; to avoid wrap, enter width=100%. A template follows.
<table style="width: 100%;"> <td style="width: 208.567px;"> </td> <td style="width: 208.567px;"> </td> <td style="width: 208.567px;"> </td> </tr> To then place blank lines below the table, use the "visual" editor because the visual editor strips blank lines that are inserted via the "text" editor. |