Website Documentation

Website:https://www.example.com
Project:My Project Name
Date:2020-05-15
Owner:Customer Name or Company
Author: Firstname Lastname
Table of Contents
Info

Only logged in users (Manager, Site Admins) have access to the administration pages (Dashboard etc) described below.

You should use any modern browser to administer the website like Chrome, Edge, Firefox, Safari etc.

We use Chrome browser to demonstrate functionality on these manuals.

You should use a screen with a minimum width of 1200px to have a great administrative experience.

Anonymous users are every visitor of the website that access it without an account on this website.

2 Terminology - Glossary

Edit SourceSingle Page
Info

(Terms sorted by name)

Accessibility (in short "A11y")

If you rely on a screen reader or other assistive technology, you will be glad to know that we have built this website to encourage and support the proper use of semantic markup. For example, you should be able to use headings reliably for page-level navigation.

This website is using Drupal Core which has designed to support the development of sites that comply with WCAG 2.0 and ATAG 2.0.

There is also a dedicated Drupal Accessibility Group who deals with A11y issues and warnings.

See more info about this topic at:

Block

Drupal Blocks are boxes of content rendered into an area, or region, of a web page but on the same position.

Blocks may be static (their content will not change dynamically) and dynamic.

For example, a static block may be a search form, a follow us social widget or copyright notice.

A dynamic block may be the "Latest 4 News", the "See more like this" block etc.

Cache

The software that runs your site, on each page request, must perform calculations and retrieve data from the database, in order to compose the page that is sent to the web browser or other application that is accessing the site. These calculations take time, which can mean that your page load time is longer than would be desirable.

During these page calculations, intermediate results and the final page output are stored in a special database area (known as the cache). Then the next time a compatible request is made, intermediate or final results, as appropriate, can be retrieved and used rather than redoing the entire calculation.

In addition, when content or data that affects a particular calculation is updated, the affected cached data is removed from the cache, forcing that part of the calculation to be redone the next time it is needed.

When you make a change in the website and you need this change to be public available immediately you probably need to "clear the Caches" using the appropriate button on the Dashboard Menu (see more in related section).

CKEditor

CKEditor is the Drupal default wysiwyg editor.

It allows users to add rich html content without knowing programming.

All fields of type "formatted" (textarea) are using CKEditor while editing.

Content Types (aka Nodes)

Think of nodes as articles or posts.

Each section of the website (eg News, Members etc) has its own content type to create it. A content type contains fields and has its own display modes which are called "View Modes" (see related term). For example a content type News may have a Title, an Image, Body (html text) and Category.

Each node has its own unique id (node id or nid) and can be accessed through a unique system path like /node/[nid]. For example, the node with nid=23 can be accessed through path www.example.com/node/23.

You can inspect the nid on the url path while editing an existing Node.

Drupal

The CMS which is used to build this wesbite.

Drupal is a php framework that has a well-defined structured data schema and comes with several third party integrations out of the box.

Fields

Fields are form input elements where a user can add data.

For example, a Text field is a field where a user can add text using the keyboard, an Image field is a form widget where a user can upload an image from his/her computer etc.

Content types as also as Media ano other templates (see related terms) have their own Fields to hold data.

Media

Media are like Nodes but with dedicated options to represent rich media (image, video, file attachment, iframe, social embed etc).

Media do not have an individual webpage but they can be attached to Content pages (Nodes) through reference fields.

They have fields like Nodes have since they keep data too.

Menu item

Each menu on the website consists of one or more links.

Each link is a menu item. Eg a menu item may be the link to the Contact page (www.example.com/contact).

Paragraphs

Drupal Paragraphs are special Drupal fields which combine other fields and display as a whole. In simple words, Paragraphs are group of fields that can represent an element.

For example, a Paragraph of type "Picture with Caption" may use an Image field and a Textfield and display an Image with a Caption after it.

Paragraphs in Drupal offer a great authoring experience, since they control data as also as markup in details.

Furthermore, authors can "duplicate" Paragraphs and "reorder" them within the Node page which allows for fast page structure building and easy visual changes.

In this project we call Paragraphs "Elements" to avoid any conflict with text paragraphs inside the textarea.

Path alias

Every Drupal webpage has a system (internal) path. For example a Node of type Page with the ID 23 may have the internal path /node/23.

System paths are always there unless a Node is deleted from the system.

Since these paths are "ugly" and not SEO friendly Drupal uses a path alias system to make these SEO friendly. Saying so, the Node with system path /node/23 may have a more meaningful path alias like /page/about-us.

When a user visits the system path /node/23 he/she will be redirected to the equivalent path alias.

The path aliases display by default on the Menu Items or on every other link generated by the system.

Taxonomy

Taxonomies are keywords used to categorize content of the website.

Other common words are 'terms', 'tags' etc. In Drupal CMS these are called 'taxonomy terms'.

For example all "News & Event" nodes may have a "Services" taxonomy where users can read only news that have the category "Services" while other prefer to read News of category "Nightlife".

Token

Tokens are small dynamic placeholders that automatically convert to html.

To take a simple example, if you put [site:name] on your site, it will be replaced by the actual name of your site.

To take a more complicated example, when you edit the metatag settings of a node you can use the token [node:title] that will display the current node Title on the metatags tag.

Notice that not all the fields provide token support. If a field supports tokens there is a link to open a modal with the available tokens ("Browse available tokens").

User Role

Each user that has an account to the website must have a specific role.

According to his/her roles he/she may have different permissions to the website.

There are 2 main user roles set: "Site Admin" and "Manager". "Site Admin" is a super user having any available permissions. "Manager" role has specified permissions that are represented in current Manual.

All users that have an account refer as 'authenticated users' and users that browse the website without being logged in refer as 'anonymous users'.

View Mode

All Node types as also as other Content related types (eg Media) have several output displays available called "View Modes".

Each display provides field values with proper styling and other validation rules.

For example, a Node of type News may have a view mode "Teaser" that displays Image, Title and Link to go to the Node page and a view mode "Full Mode" that displays all the available fields.

The first one is used while on News dynamic lists and the second one when the full News Page is rendered alone in its own path.

Views

Drupal Views are dynamic lists of content which have user defined sorting, filtering and other options.

Views can display as web Pages, Drupal Blocks or other more advanced display types.

A Views may be for example a "News" page that displays Nodes of type "News" sorted by date created (latest come first) with a pager of 12 items per page.

Another example of Views may be a list of "Our Officers - Members" that displays Nodes of type Member sorted by Member Name and filtered by Members category "Our Officers".

Website (or site)

The whole website under your main domain.

3.1 General - Login to the Backend

Edit SourceSingle Page
Url/user/login
Info

How to login to the Administration backend pages. Go to the User Login page and then follow the steps below.

Image: Login
Screenshot
  1. Add your Username

  2. Add your Password

  3. Click the "Login" button

3.2 General - Reset your password

Edit SourceSingle Page
Url/user/password
Info

How to reset your User Account password in order to login in the Administration backend pages. Go to the Reset Password page and then follow the steps below.

Image: Reset password
Screenshot
  1. Add your Username or Email Address

  2. Click the "Submit" button

  3. You will get an email message to reset your password. Click the link in the message, you will be able to set a new password for your account.

3.3 General - Edit user account

Edit SourceSingle Page
Url/user/8/edit
MenuMyUsername > Edit Profile
Tips
  • User edit pages are dynamic. Replace number "8" on the "Url" value above with your user id to edit your account.

Info

This is how to change your Account values or add a new user. It is the same process.

Image: Edit user account
Screenshot
  1. From the Toolbar menu click the "Edit Profile" menu link.

  2. Add your current password if you want to change password or your email.

  3. Change your email address.

  4. Change your username.

  5. Enter a new password if you want to change it and confirm it below.

  6. Enable or disable (block) a user. Blocked user do have accounts but they cannot login.

  7. Add the user role "Manager" to a user if you want to allow them to administrate the site.

  8. Click "Save" to submit the user form.

3.4 General - System Users

Edit SourceSingle Page
Url/admin/dashboard/users
MenuDashboard > Settings > System Users
Info

In this page you can see and filter all the system users (accounts with login permission).

The results display in a dynamic table. On the table header some column labels are links. When you click these you can sort by each column value.

Every time you are filtering the results you can see the result number as also as the results on each page (if there are more pages).

You cannot delete or edit user with ID 1 (Drupal root user).

Users with the role "Manager" cannot delete themselves but only other Managers.

Image: System users
Screenshot
  1. Access this page from the Toolbar menu.

  2. Click to create a new User.

  3. Filter by name or email (contains any word).

  4. Filter by user status (active or blocked).

  5. Filter by user role.

  6. Label - ID. This is the unique identifier of each "User" that is created by Drupal (incrementally) when you create a new system User. You can use this for unique reference. ID cannot change upon creation.

  7. Label - Username.

  8. Label - Status. Shows if a system "User" is Active or Blocked (disabled).

  9. Label - User roles.

  10. Label - Member for. How long before has this user been on the database.

  11. Label - Last access.

  12. Label - Operations. Available operations here are "Edit".

3.5 Dashboard - Overview

Edit SourceSingle Page
Url/admin/dashboard
MenuDashboard
Tips
  • Most of the times you will use the Toolbar menu and not this page to accomplish a task.

Info
  • Dashboard is the start page when you log into the backend.
  • There are many subpages under "Dashboard" that allows for granular Content or Settings Administration.
  • It is an expanded list of all the related menus items.
  • It is simple to use and can be access by a mobile device too.
  • If a logged in user does not have access to a backend page she gets redirected to this page.
Image: Dashboard overview
Screenshot
  1. Click "Dashboard" on the Toolbar menu to open the custom "Dashboard" menu

  2. Click "Sitemap" on the Toolbar menu to open the sitemap menu (all site links of the Main Menu)

  3. Click "Manager" (your username) to open the User Menu

  4. Click the "Rebuild Cache" menu link to clear the caches. See more about caches on Terminology section

  5. Dashboard link is the first on the menu and goes to this page.

  6. Pages are organized into groups

3.6 General - Using the rich text editor (CKEditor)

Edit SourceSingle Page
Tips
  • Click the maximize button to open the editor in full window.

  • Don't use H1 format inside the CKEditor textarea. It may affect search engines.

  • You can see almost all the CKEditor available styles on the "demo" page

Info

This CKEditor Version 4 works the same as with MS Word or any other text editor and allows user to style text as he/she wants.

  1. Not all fields have the CKEditor filter available.
  2. Web pages addresses and email addresses turn into links automatically (eg if you type www.example.com this will become a link www.example.com)
  3. You can style the text using the buttons from the toolbar. Put the mouse above each button on the toolbar to see its description.
  4. Select (Highlight) any content on the editor area and then click on any button of the toolbar to apply a specific style or edit (eg cut, copy, paste etc)
  5. You can see the html tag that apply to the selection.
  6. You can drag the right corner to maximize the text editor's window.
  7. Internal links to Nodes (eg /node/16) are automatically parsed to their path alias equivalent.
  8. Furthermore, there are project specific styles that can be applied to elements for an easier authoring experience.

Learn more about CKEditor at https://ckeditor.com/ckeditor-4/.

Image: Basic buttons
Screenshot
  1. Header style (H1, H2, H3 etc)

  2. Custom site specific styles (more details on next screenshot)

  3. Remove decoration and format (bold, italic etc)

  4. Bold text

  5. Italics

  6. Strikethrough

  7. Superscript

  8. Subscript

  9. Text align left

  10. Text align center

  11. Text align right

  12. Text align justify

  13. Add hyperlink (Can add internal or external urls. Provides an autocomplete form that allows to find an internal page from its title. Notice that if an internal page is found Drupal will display the title of the page automatically even if it changes.)

  14. Remove hyperlink

  15. List bulleted

  16. List with numbers

  17. Add Embedded media (Opens a modal that allows to embed an existing media file like Image, Report/Attachment and Video from media library or create a new one and insert it)

  18. Add horizontal line

  19. Add special character (eg the Copyright sign)

  20. Undo

  21. Redo

  22. Copy selected elements

  23. Cut selected elements

  24. Paste form Word

  25. Show html blocks (advanced users)

  26. Maximize textarea (this will make the editor stretch to the whole browser window)

  27. Show and edit html code (advanced users)

  28. The textarea where you can type text and apply button actions

  29. Current html structure information (advanced users)

  30. Resize editor window

Image: Custom styles available
Screenshot
  1. Select (highlight) any element (text, link, list etc) inside the editor textarea and click the "Style" dropdown. Select one of the available options.

  2. Notice that only one option can be applied. Only the last one applies.

  3. All these styles have been created to adopt properly to each user browser.

Image: Custom styles - Texts and Headers (applies to simple text paragraphs)
Screenshot
  1. Default paragraph

  2. Paragraph with padding

  3. H1 heading

  4. H2 Text paragraph (same style as H2 but it is a paragraph)

  5. H3 Text paragraph (same style as H3 but it is a paragraph)

  6. H4 Text paragraph (same style as H4 but it is a paragraph)

  7. H5 Text paragraph (same style as H5 but it is a paragraph)

  8. Subtitle

Image: Custom styles - Links and Buttons (applies to hyperlinks only)
Screenshot
  1. Simple link (no styling)

  2. Button Default (fonts will convert to capital for all button styles)

  3. Button Black

  4. Button White

  5. Button Red

  6. More link style

Image: Custom styles - Lists
Screenshot
  1. Simple bulleted list

  2. Simple numbered list

  3. List, 2 Columns (applies to bulleted lists only. Will turn the list to a dynamic two columns grid.)

  4. List, 3 Columns (bulleted lists only, three columns grid)

  5. List, 4 Columns (bulleted lists only, four columns grid)

Image: Custom styles - Blockquotes (apply to simple text paragraphs)
Screenshot
  1. Blockquote red icon

  2. Blockquote purple icon

  3. Blockquote pink icon

  4. Simple quote like text

Image: CKEditor, Embed Drupal Media
Screenshot
  1. Click the embed media button.

  2. A modal appears. You can upload a new Media file (image or video url).

  3. You can also select existing Media from the Media Library which is organized by type.

  4. There are filters and sorting to help you find the Media you need.

  5. Chose the Media you want to insert.

  6. Click "Insert selected" button to import Media into CKEditor textarea.

  7. See more about Media

4 Content Types (Nodes) of type Page

Edit SourceSingle Page

4.1 Node type Page: Administer Pages

Edit SourceSingle Page
Url/admin/dashboard/pages
MenuDashboard > Content > Content: Pages
Tips
  • All the Content related tables look the same as this page and have similar functionality and options. Learn once, use everywhere.

  • Use the custom filters and sorting to find the item you are looking for.

  • Prefer to "Unpublish" items instead of deleting them if you believe that they contain useful data or may need them again in the future.

Info

In this Administration page you can see all the site nodes of type "Page" with their basic fields.

Page node type is a template that creates landing pages with structured fields. These structured fields are called Paragraphs.

Examples of this type are "About Us", "Management Team" etc.

The results are displayed in a dynamic table. On the table header some column labels are links. When you click these you can sort by each column value.

Every time you are filtering the results you can see the result number as also as the results on each page (if there are more pages).

Image: Administer Pages
Screenshot
  1. Access this page from the Toolbar menu

  2. Click to Add a new node of type "Page"

  3. Filter results by Title name (that contains any keyword) or by Published status

  4. Apply bulk actions to multiple rows. You can select one or multiple rows to apply the action with the checkbox on the left. Then click the "Apply to selected items" button. Allowed actions are "Publish" and "Unpublish".

  5. Label - Bulk action checkbox. Every row selected here will be available for the bulk action.

  6. Label - ID. This is the unique identifier of each Page that is created by Drupal (incrementally) when you create a new Page. You can use this for unique reference. ID cannot change upon creation.

  7. Label - Title. Title of each Page. It displays on the browser title as also as on the header of each page view.

  8. Label - Content Type. The type of each node. In this table all the nodes are of type "Page" but there may be other tables that display mixed types.

  9. Label - Author. The username of the initial Author of each Page.

  10. Label - Status. Shows if a Page is Published or Unpublished. Rows with Unpublished items do have a light red background for visual separation. Unpublished nodes are hidden in menus and do not appear for the anonymous users.

  11. Label - Updated. The last datetime where this node has been saved in the database.

  12. Label - Operations. Several operations you have regarding this node. Click the dropdown list to select an operation. Available operations here are "Edit", "Replicate" (clone the node with all its field values but without the menu entry) and "Delete".

  13. Click on the Title value to open the node view page.

4.2 Node type Page: Add new node

Edit SourceSingle Page
Url/node/add/page
MenuDashboard > Content > Content: Pages > Add Page
Tips
  • Most of the times you should replicate an existing node instead of creating a new one in order to save time.

  • Settings on the right sidebar are common for all node types. Learn once, use everywhere.

  • Edit form is the same as Add New form.

  • Preview button is your friend. Educate yourself to Preview nodes before saving them.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

Info

Page node type is a template that creates landing pages with structured fields. These structured fields are named Paragraphs (or Elements) and will be analyzed later on the section.

Examples of this type are "About Us", "Management Team" etc.

Every node has a unique identifier (ID) that is created by Drupal (incrementally) when you create a new node. You can use this for unique reference. ID cannot change upon creation.

The form to add a new Page has the left sidebar fields as also as the right sidebar fields. Right sidebar fields are common for every node type (template).

Most of the fields on this form provide a description to Authors about the field (how to use, what it does, restrictions etc).

There is a demo Page (Unpublished) that can be used by Authors for reference and experiments.

Image: Add new Page form
Screenshot
  1. Add node Title. Title displays on the header section as also as on the browser title.

  2. Left sidebar is the place to add/edit Elements. These Elements are the "content" of this node.

  3. Right Sidebar contains system settings that do not represent content (eg menu settings) except from some custom fields.

  4. Click the "Add Element" button to add new Elements on this node. (see more details on Elements section)

  5. By default new nodes set Published except if you uncheck this field.

  6. Click "Save" button to save the new node.

  7. Click "Preview" button to preview the node. This will open node in a special frame where you can select the View Mode to check the node display.

  8. Useful information about the Node (applies on Edit forms only) like "Author", "Published status", "Last saved" datetime etc.

  9. Create new Revision. When you create a new Revision Drupal will create a new instance of the node and keep the preview one to the database. This will allow Authors to go back later to an older revision if needed to.

  10. Menu Settings. Add this node to Main Menu. Notice that nodes do not required to have a Menu link. Also, the Menu settings here are available from the Menu form too.

  11. Add the Menu link title. Keep this sort and meaningful. By default Drupal will add here the node Title.

  12. Add the Menu link description (optional) which is a tooltip helper when users hover over the menu item.

  13. Add the Menu link Parent item. This allows to organize menu into submenus. Do not create more that 2 level menus.

  14. Weight of the Menu link. Integer that is used to sort menu links. Eg Menu link with weight 20 displays after the Menu link with weight 19.

  15. Metatags settings. Metatags are automatically generated with Drupal tokens but you can also override them for each node. Advanced users only.

  16. URL Redirects. If you want to set another path to redirect to this page add this here. By default Drupal will create a system redirect from the system path /node/[ID] to the node path alias.

  17. URL Alias (path alias). Specify an alternative path by which this data can be accessed. For example, type /about when writing an about page. If there is a Menu Parent add this Parent path alias here too to create structured path aliases.

  18. Custom - HTML on Title. These texts will display on top of the Page after the main Title. Used on the Homepage.

  19. Custom - Page Background Image. Change the default background image on top of the page with a custom one.

  20. Set the Author of this node. By default, Drupal sets current user as Author.

  21. Set the Created datetime of this node. You can set any time (current, past or future). By default, Drupal sets here current time.

4.3 Node type Page: Existing node options

Edit SourceSingle Page
Url/node/[id]
Menu(node specific)
Tips
  • Move cursor on the screen left side to trigger the existing node options menu which is partially hidden.

Image: Existing node options
Screenshot
  1. View. This will refresh the current page.

  2. Edit. Edit this page. See more at this section.

  3. Delete. Delete this page. See more at this section.

  4. Revisions. Inspect, compare and revert current page Revisions. See more at this section.

  5. Replicate. Clone current page to a new one. All the field values are cloned too except the referenced fields (eg Media images).

4.4 Node type Page: Edit an existing node

Edit SourceSingle Page
Url/node/[id]/edit
Tips
  • Edit form is the same as Add New form.

Info

Edit form is the same as Add New form. Please go to this section to see more.

You can "Edit" an existing node:

  • Through the Dashboard: Administer Pages table.
  • From the view node display by clicking the "Edit" button on the left options.
  • Directly by typing /node/[ID]/edit on the browser where [ID] is the node unique id.

4.5 Node type Page: Delete an existing node

Edit SourceSingle Page
Url/node/[id]/delete
Tips
  • Deleting a node is not recoverable.

  • If you are not sure if you need to delete a node set its state to "Unpublished".

Info

You can "Delete" an existing node:

  • Through the Dashboard: Administer Pages table.
  • From the view node display by clicking the "Delete" button on the left options.
  • Directly by typing /node/[ID]/delete on the browser where [ID] is the node unique id.

When you decide to "Delete" a node you go to a confirmation form (see below) where you need to confirm your decision.

Image: Delete an existing node, confirmation form
Screenshot
  1. Click "Delete" to permanently delete this node.

  2. Click "Cancel" to go to previews page or the Homepage.

  3. Click any other button available (eg the Edit button) to cancel the deletion.

  4. Navigate to another page or delete the browser tab to cancel deletion

4.6 Node type Page: Create and revert Revisions

Edit SourceSingle Page
Url/node/[id]/revisions
Tips
  • Create a revision for every change on a node by default. More unused revisions is better than none.

  • If you make a very important revision do not forget to add a helpful log message on the Revision Message field.

Info

Revisions are independent (standalone) instances of a node stored on the database within their other references (eg images).

Revisions allow Authors to go back later to an older revision if needed to.

Revisions allow Authors to compare changes through the time, revert to a previous revision as also as inspect other Authors changes without the need to contact them or moderate content.

The latest revision is the "Current Revision". All current Revisions are these that display on the website.

You can visit the "Revisions" page of an existing node:

  • Through the Dashboard: Administer Pages table.
  • From the view node display by clicking the "Revisions" button on the left options.
  • Directly by typing /node/[ID]/revisions on the browser where [ID] is the node unique id.
Image: Revisions of a node
Screenshot
  1. Go to the "Revisions" page

  2. Each Revision has a title with is the Revision datetime. Click on this link to open the Revision view. Notice that Revisions that are not current may not display 100% correctly due to some system alters in HTML.

  3. Each Revision has the Author of that Revision.

  4. Select the Revision to compare with. The latest Revision (time based) will be the first Revision to compare and changes will apply to this one.

  5. Select the Revision to compare with.

  6. Click the "Revert" button if you want to make this Revision the current one. Test your choice before doing this.

  7. Click the "Compare selected revisions" to compare Revisions from steps 4 and 5. By default, Drupal will use the "Visual inline" layout to compare the Revisions.

Image: Compare Revisions - Layout visual inline
Screenshot
  1. On top of the Compare page you can see the two Revisions basic information

  2. Previous change will go to compare with the previous Revision of the selected one.

  3. Authors can change the Compare layout. Each layout may have some additional options.

  4. This layout displays any change inline on the page with special styles.

Image: Compare Revisions - Layout split fields
Screenshot
  1. Same fields as above, but the Compared fields are side by side. Prefer this layout for more granular comparing.

Image: Compare Revisions - Layout unified fields
Screenshot
  1. Same fields as above, but the Compared fields are in rows one after the other.

5 Content Types (Nodes) of type News & Events

Edit SourceSingle Page

5.1 Node type News & Events: Administer News & Events

Edit SourceSingle Page
Url/admin/dashboard/news_events
MenuDashboard > Content > Content: News & Events
Tips
  • All the Content related tables look the same as this News & Events and have similar functionality and options. Learn once, use everywhere.

  • Use the custom filters and sorting to find the item you are looking for.

  • Prefer to "Unpublish" items instead of deleting them if you believe that they contain useful data or may need them again in the future.

  • Categories of each node affect the way it is treated on the website.

Info

In this Administration page you can see all the site nodes of type "News & Events" with some of their basic or custom fields.

The results are displayed in a dynamic table. On the table header some column labels are links. When you click these you can sort by each column value.

Every time you are filtering the results you can see the result number as also as the results on each page (if there are more pages).

Image: Administer News & Events
Screenshot
  1. Access this page from the Toolbar menu

  2. Click to Add a new node of type "News & Events"

  3. See current results on the table.

  4. Filter results by Title name (that contains any keyword)

  5. Filter results by Published status

  6. Filter results by Categories

  7. Apply bulk actions to multiple rows. You can select one or multiple rows to apply the action with the checkbox on the left. Then click the "Apply to selected items" button. Allowed actions are "Publish" and "Unpublish".

  8. Label - Bulk action checkbox. Every row selected here will be available for the bulk action.

  9. Label - ID. This is the unique identifier of each "News & Events" that is created by Drupal (incrementally) when you create a new News & Events. You can use this for unique reference. ID cannot change upon creation.

  10. Label - Title. Title of each "News & Events" page. It displays on the browser title as also as on the header of each News & Events view.

  11. Label - Hero. This is custom (image) field of these nodes.

  12. Label - Categories. This is custom (taxonomy reference) field of these nodes. Multiple values display with comma separator.

  13. Label - Event Dates (Human Text). This is custom date field of these nodes.

  14. Label - Content Type. The type of each node. In this table all the nodes are of type "News & Events" but there may be other tables that display mixed types.

  15. Label - Author. The username of the initial Author of each News & Events.

  16. Label - Status. Shows if a "News & Events" page is Published or Unpublished. Rows with Unpublished items do have a light red background for visual separation. Unpublished nodes are hidden in menus and do not appear for the anonymous users.

  17. Label - Updated. The last datetime where this node has been saved in the database.

  18. Label - Operations. Several operations you have regarding this node. Click the dropdown list to select an operation. Available operations here are "Edit", "Replicate" (clone the node with all its field values but without the menu entry) and "Delete".

  19. Click on the Title value to open the node view News & Events.

5.2 Node type News & Events: Add new node

Edit SourceSingle Page
Url/node/add/news
MenuDashboard > Content > Content: News & Events > Add News & Events
Tips
  • Most of the times you should replicate an existing node instead of creating a new one in order to save time or reuse fields.

  • Settings on the right sidebar are common for all node types. Learn once, use everywhere.

  • Edit form is the same as Add New form.

  • Preview button is your friend. Educate yourself to Preview nodes before saving them.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

Info

"News & Events" node type is a template that creates News or Events pages with simple fields.

The teasers of these pages are displayed on a dynamic page the "News & Events" (/news) page sorted by time created (current nodes come first).

Every node has a unique identifier (ID) that is created by Drupal (incrementally) when you create a new node. You can use this for unique reference. ID cannot change upon creation.

The form to add a new node has the left sidebar fields as also as the right sidebar fields.

Most of the fields on this form provide a description to Authors about the field (how to use, what it does, restrictions etc).

Image: Add new "News & Events" form
Screenshot
  1. Add node Title. Title displays on the header section as also as on the browser title and on custom lists of these nodes.

  2. Left sidebar is the place to add/edit the node fields which are the "content" of this node.

  3. Right Sidebar contains system settings that do not represent content (eg Authoring time).

  4. Useful information about the Node (applies on Edit forms only) like "Author", "Published status", "Last saved" datetime etc. (works on edit form only)

  5. URL Redirects. If you want to set another path to redirect to this page add this here. By default Drupal will create a system redirect from the system path /node/[ID] to the node path alias. (works on edit form only)

  6. Set the Author of this node. By default, Drupal sets current user as Author.

  7. Set the Created datetime of this node. You can set any time (current, past or future). By default, Drupal sets here current time.

  8. Field Hero. This is the image that display on top of the page. It gets the whole width of the container so use a wide enough image here.

  9. Field Text. The main text for the node. Teasers and other trimmed text will create automatically from this one.

  10. Field Categories. This is a Taxonomy reference field that categories nodes into groups. These Categories are also provided in the menu above the /news page. If you need a new Category you need to go to the Categories Taxonomy Page.

  11. Field Tags. Tags are also Taxonomy references but are free to create with an autocomplete find and create functionality.

  12. Field Event Dates. This is a too advanced field that holds dates and date repeats for Events. See more below.

  13. Field Event Dates - Start and End datetime.

  14. Field Event Dates - All Day. Click this if it is a whole day event.

  15. Field Event Dates - Duration. Duration is calculated from the Start and End datetime, but you can also add it here to alter the above values.

  16. Field Event Dates - Repeats. If it is repeated Event add the repeat period here.

  17. Field Event Dates - Ends. If it is repeated Event add the end date for the repeat here. Can add specific number or a datetime.

  18. Field Event Dates - Advanced. If it is repeated Event you can set more details here.

  19. Field Event Dates - Advanced. If it is repeated Event you can set more details here like the Weekdays that the event repeats.

  20. Field Event Dates - Add More. Use this to add another instance of this field if the Event dates are too complicated to set in one field instance only.

  21. Field Event Dates (Human Text). This text is display on Events because the above field cannot generate a value suitable for humans.

  22. By default new nodes set Published except if you uncheck this field.

  23. Click "Preview" button to preview the node. This will open node in a special frame where you can select the View Mode to check the node display. See upcoming screenshot.

  24. Click "Save" button to save the new node.

  25. Click "Delete" link to delete the node (works on edit form only).

5.3 Node type News & Events: Edit an existing node

Edit SourceSingle Page
Url/node/[id]/edit
Tips
  • Edit form is the same as Add New form.

Info

Edit form is the same as Add New form. Please go to this section to see more.

You can "Edit" an existing node:

  • Through the Dashboard: Administer News & Events table.
  • From the view node display by clicking the "Edit" button on the left options.
  • Directly by typing /node/[ID]/edit on the browser where [ID] is the node unique id.

5.4 Node type News & Events: Delete an existing node

Edit SourceSingle Page
Url/node/[id]/delete
Tips
  • Deleting a node is not recoverable.

  • If you are not sure if you need to delete a node set its state to "Unpublished".

Info

You can "Delete" an existing node:

  • Through the Dashboard: Administer News & Events table.
  • From the view node display by clicking the "Delete" button on the left options.
  • Directly by typing /node/[ID]/delete on the browser where [ID] is the node unique id.

When you decide to "Delete" a node you go to a confirmation form (see below) where you need to confirm your decision.

Image: Delete an existing node, confirmation form
Screenshot
  1. Click "Delete" to permanently delete this node.

  2. Click "Cancel" to go to previews page or the Homepage.

  3. Click any other button available (eg the Edit button) to cancel the deletion.

  4. Navigate to another page or delete the browser tab to cancel deletion

5.5 Node type News & Events: Preview node

Edit SourceSingle Page
Tips
  • Resize your browser to Preview a node in different device sizes.

Info

You can Preview a node before saving it and see how it looks in several View Modes.

Check Terminology to learn more about View Modes.

Image: Preview a node
Screenshot
  1. Only available View Modes for this node type listed. Select the mode you want to preview at.

  2. Click "Back to content editing" to return on the node form.

  3. Previewed node area. Notice that Teasers (shortcut content) or other non full-page displays will still have a title although in the website they do not.

6 Content Types (Nodes) of type Member

Edit SourceSingle Page

6.1 Node type Members: Administer Members

Edit SourceSingle Page
Url/admin/dashboard/members
MenuDashboard > Content > Content: Members
Tips
  • All the Content related tables look the same as this Members and have similar functionality and options. Learn once, use everywhere.

  • Use the custom filters and sorting to find the item you are looking for.

  • Prefer to "Unpublish" items instead of deleting them if you believe that they contain useful data or may need them again in the future.

  • Categories of each node affect the way it is treated on the website.

Info

In this Administration page you can see all the site nodes of type "Members" with some of their basic or custom fields.

The results are displayed in a dynamic table. On the table header some column labels are links. When you click these you can sort by each column value.

Every time you are filtering the results you can see the result number as also as the results on each page (if there are more pages).

Image: Administer Members
Screenshot
  1. Click to Add a new node of type "Members"

  2. See current results on the table.

  3. Filter results by Title name (that contains any keyword)

  4. Filter results by Published status

  5. Apply bulk actions to multiple rows. You can select one or multiple rows to apply the action with the checkbox on the left. Then click the "Apply to selected items" button. Allowed actions are "Publish" and "Unpublish".

  6. Label - Bulk action checkbox. Every row selected here will be available for the bulk action.

  7. Label - ID. This is the unique identifier of each "Members" that is created by Drupal (incrementally) when you create a new Members. You can use this for unique reference. ID cannot change upon creation.

  8. Label - Photo. Custom image field.

  9. Label - Name. The Member Full Name.

  10. Label - Several custom fields.

  11. Label - Status. Shows if a "Members" page is Published or Unpublished. Rows with Unpublished items do have a light red background for visual separation. Unpublished nodes are hidden in dynamic lists and do not appear for the anonymous users.

  12. Label - Updated. The last datetime where this node has been saved in the database.

  13. Label - Operations. Several operations you have regarding this node. Click the dropdown list to select an operation. Available operations here are "Edit", "Replicate" (clone the node with all its field values but without the menu entry) and "Delete".

6.2 Node type Member: Add new node

Edit SourceSingle Page
Url/node/add/member
MenuDashboard > Content > Content: Members > Add Member
Tips
  • Most of the times you should replicate an existing node instead of creating a new one in order to save time or reuse fields.

  • Settings on the right sidebar are common for all node types. Learn once, use everywhere.

  • Edit form is the same as Add New form.

  • Preview button is your friend. Educate yourself to Preview nodes before saving them.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

Info

"Member" node type is a template that creates Member pages (Our People) with simple fields.

Every node has a unique identifier (ID) that is created by Drupal (incrementally) when you create a new node. You can use this for unique reference. ID cannot change upon creation.

The form to add a new node has the left sidebar fields as also as the right sidebar fields.

Most of the fields on this form provide a description to Authors about the field (how to use, what it does, restrictions etc).

Image: Add new "Member" form
Screenshot
  1. Add the Full Member Name. This is the Title which displays on the header section as also as on the browser title and on custom lists of these nodes.

  2. Left sidebar is the place to add/edit the node fields which are the "content" of this node.

  3. Right Sidebar contains system settings that do not represent content (eg Authoring time).

  4. Useful information about the Node (applies on Edit forms only) like "Author", "Published status", "Last saved" datetime etc. (works on edit form only)

  5. URL Alias (path alias). Specify an alternative path by which this data can be accessed. For example, type /about when writing an about page. If there is a Menu Parent add this Parent path alias here too to create structured path aliases.

  6. Set the Author of this node. By default, Drupal sets current user as Author.

  7. Set the Created datetime of this node. You can set any time (current, past or future). By default, Drupal sets here current time.

  8. Field Display Order. Simple integer number to sort items in lists (starting from 1, which is the first item). Items with the same Display Order will be sorted by Full Name.

  9. Field Member Photo. If no photo provided a default photo will display. Images must be larger than 150x150 pixels. Images larger than 600x600 pixels will be resized.

  10. Field Member Position.

  11. Field Member Alternate.

  12. Field Member Teaser. Plain text with a sort bio of the Member.

  13. Field Member Biography. Long formatted text.

  14. Field Member Group. This field is used to create dynamic lists of Members grouped by this value.

  15. Field Member Website. Add external url and link text (if Member has a website).

  16. Field Member Email. Emails validate through HTML5 validation.

  17. Click "Preview" button to preview the node. This will open node in a special frame where you can select the View Mode to check the node display.

  18. Click "Save" button to save the new node.

  19. Click "Delete" link to delete the node (appears on edit form only).

6.3 Node type Member: Edit an existing node

Edit SourceSingle Page
Url/node/[id]/edit
Tips
  • Edit form is the same as Add New form.

Info

Edit form is the same as Add New form. Please go to this section to see more.

You can "Edit" an existing node:

  • Through the Dashboard: Administer Members table.
  • From the view node display by clicking the "Edit" button on the left options.
  • Directly by typing /node/[ID]/edit on the browser where [ID] is the node unique id.

6.4 Node type Member: Delete an existing node

Edit SourceSingle Page
Url/node/[id]/delete
Tips
  • Deleting a node is not recoverable.

  • If you are not sure if you need to delete a node set its state to "Unpublished".

Info

You can "Delete" an existing node:

  • Through the Dashboard: Administer Members table.
  • From the view node display by clicking the "Delete" button on the left options.
  • Directly by typing /node/[ID]/delete on the browser where [ID] is the node unique id.

When you decide to "Delete" a node you go to a confirmation form (see below) where you need to confirm your decision.

Image: Delete an existing node, confirmation form
Screenshot
  1. Click "Delete" to permanently delete this node.

  2. Click "Cancel" to go to previews page or the Homepage.

  3. Click any other button available (eg the Edit button) to cancel the deletion.

  4. Navigate to another page or delete the browser tab to cancel deletion

7 Media Types (Media)

Edit SourceSingle Page

7.1 Media: Media Dashboard

Edit SourceSingle Page
Url/admin/dashboard/media
MenuDashboard > Content > Media
Tips
  • Use the custom filters and sorting to find the item you are looking for.

  • You do not have to visit this page to create or edit a Media item. You can always do this straight through the field which references the Media.

Info

In this Administration page you can see all the site Media.

Media is a template that creates reusable rich media content like Images, Video (from 3rd party providers) and Files (Attachment).

Each media type has specific fields and requirements.

Available Media types are "Background Image", "Hero Image", "Image (Generic)", "Report/Attachment" and "Video."

Media do not have a standalone page like Nodes, but they are used as reference fields inside other types (Nodes or Elements).

Examples of media is a Hero banner attached to the Homepage or a Video for the Grand Gourmet node page.

The results display in a dynamic grid.

Every time you are filtering the results you can see the result number as also as the results on each page (if there are more pages).

Image: Administer Media
Screenshot
  1. Access this page from the Toolbar menu

  2. Click to create a new Media. See more on next section.

  3. Filter results by Published status

  4. Filter results by file Name (that contains any keyword)

  5. Filter results by Media type. Available options are "Background Image", "Hero Image", "Image (Generic)", "Report/Attachment" and "Video."

  6. Sort Results by "Newest First" (date created), "Name (A-Z)", "Name (Z-A)".

  7. Apply bulk actions to multiple items. You can select one or more items to apply the action with the checkbox on the left. Then click the "Apply to selected items" button. Allowed actions are "Delete", "Publish", "Save" and "Unpublish".

  8. Click on a Media item to select it for a bulk action.

  9. Click to Edit this Media

  10. Click to Delete this media. Notice that deleting a Media will delete it from any referencing field across the website. Use with caution.

  11. Media file name below Media image help you identify Media easier.

7.2 Media: Add Media

Edit SourceSingle Page
Url/media/add/
MenuDashboard > Content > Media > Add Media
Tips
  • Edit form is the same as Add New form.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

Info

Media is a template that creates reusable rich media content like Images, Video (from 3rd party providers) and Files (Attachment).

Each media type has specific fields and requirements.

Available Media types are "Background Image", "Hero Image", "Image (Generic)", "Report/Attachment" and "Video."

Media do not have a standalone page like Nodes, but they are used as reference fields inside other types (Nodes or Elements).

Examples of media is a Hero banner attached to the Homepage or a Video for the Grand Gourmet node page.

Every Media has a unique identifier (ID) that is created by Drupal (incrementally) when you create a new Media. You can use this for unique reference. ID cannot change upon creation.

Most of the fields on this form provide a description to Authors about the field (how to use, what it does, restrictions etc).

Image: Add new Media form
Screenshot
  1. Background Image (Background image on top of each Page title).

  2. Hero Image (Hero image, used on top of each News & Events post).

  3. Image - generic (Generic usage, reusable Image used on Elements image fields).

  4. Report/Attachment (Attachments are PDF files that can be downloaded. Usually, they are Reports).

  5. Video (External video from YouTube, Vimeo or Facebook. Preview images created automatically).

Image: Add/Edit Media of type "Background image"
Screenshot
  1. Follow the instructions on the form.

  2. In most image type Media the file Name and Alt field is required to prevent accessibility issues.

  3. Restrictions on file uploads apply automatically. Eg if you upload an image larger than the required it will resize accordingly.

  4. Some fields have default values since they are used on every page (eg the default Hero image).

  5. By default new Media are Published. You can always Unpublish a Media though. Use with caution.

  6. Click "Save" button to save changes.

Image: Add/Edit Media of type "Hero image"
Screenshot
  1. Same as above

Image: Add/Edit Media of type "Image (generic)"
Screenshot
  1. Same as above

Image: Add/Edit Media of type "Video"
Screenshot
  1. Same as above

Image: Add/Edit Media of type "Report/Attachment"
Screenshot
  1. Name of the Report. Does not display on the website.

  2. Short Title. Short Title used on lists of Reports instead of the large Name.

  3. File. Only pdf allowed.

  4. Report Category. This is a Taxonomy reference field that categories Reports into groups.

  5. Alternative Image. Override default image if the result is not acceptable. Must be larger than 290x380px.

  6. Image Display. This is a control field that allows Authors to select which image will show to the Media item lists. Allowed options are "System Icon", "PDF first page screenshot" and "Custom uploaded image" from field above.

  7. Available in hard copy. When checked will provide a link to the Publication Request form to ask for a hard copy.

  8. Texts. Formatted text with Media details. Does not display on the website.

  9. By default new Media set Published except if you uncheck this field.

  10. Click "Save" button to save changes.

  11. Click "Delete" link to delete the Media (works on edit form only).

8 Taxonomy Terms

Edit SourceSingle Page

8.1 Taxonomy: Administer Taxonomies

Edit SourceSingle Page
Url/admin/dashboard/taxonomies
MenuDashboard > Content > Taxonomies
Tips
  • Use the custom filters and sorting to find the item you are looking for.

  • Reports categories cannot be deleted because there are dynamic lists associated with them.

Info

In this Administration page you can see all the Taxonomy Terms.

See more about Taxonomy on the section below.

The results are displayed in a dynamic table. On the table header some column labels are links. When you click these you can sort by each column value.

Every time you are filtering the results you can see the result number as also as the results on each page (if there are more pages).

Image: Administer Taxonomies
Screenshot
  1. Access this page from the Toolbar menu

  2. Click to create a new Taxonomy of type "Category". See more on next section.

  3. Click to create a new Taxonomy of type "Report". See more on next section.

  4. Click to create a new Taxonomy of type "Tags". See more on next section.

  5. Show current results

  6. Filter results by Published status

  7. Filter results by Name (that contains any keyword)

  8. Filter results by Vocabulary. Available options are "Category", "Reports" and "Tags".

  9. Label - ID. This is the unique identifier of each Taxonomy that is created by Drupal (incrementally) when you create a new Taxonomy. You can use this for unique reference. ID cannot change upon creation.

  10. Label - Name. Name of each Taxonomy. It displays on the browser title as also as on the header of each dynamic listing view.

  11. Label - Vocabulary.

  12. Label - Usage. How many items (Nodes or Reports) are referencing this Taxonomy. This field is useful if you want to delete, merge or split a Taxonomy accordingly.

  13. Label - Published. Shows if a Taxonomy is Published or Unpublished. Unpublished Taxonomies are hidden in menus and do not appear for the anonymous users. Use with caution.

  14. Label - Updated. The last datetime where this Taxonomy has been saved in the database.

  15. Label - Operations. Several operations you have regarding this node. Click the dropdown list to select an operation. Available operations here are "Edit" and "Delete".

  16. Click on the Name value to open the Taxonomy view page if exists.

8.2 Taxonomy: Add Taxonomy Term

Edit SourceSingle Page
MenuDashboard > Content > Taxonomies > Add Category Term
Tips
  • Edit form is the same as Add New form.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

  • Do not use other taxonomies as parents (tree structure with more than one levels hierarchy). This will break the dynamic lists or/and the dynamic menus.

Info

Taxonomies are keywords used to categorize content of the website (Nodes, Media etc).

Other common words are 'terms', 'tags' etc. In Drupal CMS these are called 'taxonomy terms'.

For example all "News & Event" nodes may have a "Services" taxonomy where users can read only news that have the category "Services" while other prefer to read News of category "Nightlife".

Each Taxonomy Term usually has its own dynamic page.

There are three types of taxonomies which are called "Vocabularies" on this website:

  • Categories (found on News & Events nodes).
  • Tags (found on News & Events nodes)
  • Reports (used to categorize Media of type Report).

Every Taxonomy Term has a unique identifier (ID) that is created by Drupal (incrementally) when you create a new Taxonomy. You can use this for unique reference. ID cannot change upon creation.

Most of the fields on this form provide a description to Authors about the field (how to use, what it does, restrictions etc).

Image: Add/Edit taxonomy term (all types)
Screenshot
  1. Name of the Taxonomy term.

  2. Description. Does not display on the website.

  3. Parent terms. Avoid adding a parent for any term as this may break dynamic menus and lists.

  4. Set the weight for this Taxonomy term.

  5. URL Alias. Always force Drupal to generate the Taxonomy term path aliases because many paths are used as page variables.

  6. By default new Taxonomy terms set Published except if you uncheck this field.

  7. Click "Save" button to save changes.

  8. Click "Delete" link to delete the Taxonomy Term (works on edit form only). Use with caution.

Info

Reusable are templates that create and store extra "reusable" simple content entities.

Each Reusable type has specific fields and requirements.

Available Reusable types are "Counter", "Sponsor", and "Iframe".

Reusable do not have a standalone page like Nodes, but they are used as reference fields inside other types (Nodes or Elements).

Reusable do have Revisions too like Nodes and Media.

Every time you are filtering the results you can see the result number as also as the results on each page (if there are more pages).

9.1 Reusable Data: Reusable Counters

Edit SourceSingle Page
Url/admin/dashboard/counters
MenuDashboard > Content > Reusable Data > Reusable: Counters
Info

In this Administration page you can see all the site Reusable of type "Counter".

Every time you are filtering the results you can see the result number as also as the results on each page (if there are more pages).

Image: Administer Counters
Screenshot
  1. Access this page from the Toolbar menu

  2. Click to create a new Reusable of type "Counter". See more on next section.

  3. Show current results information after applying search filter below.

  4. Filter results by Published status.

  5. Label - ID. This is the unique identifier of each Reusable that is created by Drupal (incrementally) when you create a new Reusable. You can use this for unique reference. ID cannot change upon creation.

  6. Label - Name. Name of each Reusable. It displays on the dynamic lists for this Reusable.

  7. Custom field, used only for this Reusable type. See more on next section.

  8. Custom field, used only for this Reusable type. See more on next section.

  9. Label - Type. The type of this Reusable.

  10. Label - Published. Shows if Reusable is Published or Unpublished. Unpublished items are hidden in dynamic lists do not appear for the anonymous users. Use with caution.

  11. Label - Updated. The last datetime where this Reusable has been saved in the database.

  12. Label - Actions. Several operations you have regarding this item. Click the dropdown list to select an action. Available actions here are "Edit" and "Delete".

9.2 Reusable Data: Add/Edit Counter

Edit SourceSingle Page
Url/admin/extra/add/counter
Tips
  • Edit form is the same as Add New form.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

  • Reusable Data do not have a display page.

Image: Add/Edit Reusable Data of type "Counter"
Screenshot
  1. By default new items set Published except if you uncheck this field.

  2. Name of the Reusable item.

  3. Custom field - Number. The number to associate the icon (How many assets of are available).

  4. Custom field - Icon. Svg icon of square size (eg 100x100px). Non square icons may break styling or appear very small or large.

  5. Click "Create new Revision" if you want to create a new instance for this item.

  6. Click "Save" button to save changes.

  7. Click "Delete" link to delete the item (works on edit form only). Use with caution.

9.3 Reusable Data: Reusable iFrames

Edit SourceSingle Page
Url/admin/dashboard/iframes
MenuDashboard > Content > Reusable Data > Reusable: iFrames
Tips
  • Create multiple Interactive Map iframes and embed them on the website according to your needs.

Info

In this Administration page you can see all the site Reusable of type "iFrame".

Every time you are filtering the results you can see the result number as also as the results on each page (if there are more pages).

Image: Administer iFrames
Screenshot
  1. Access this page from the Toolbar menu

  2. Click to create a new Reusable of type "iFrame". See more on next section.

  3. Show current results information after applying search filter below.

  4. Filter results by Published status.

  5. Label - ID. This is the unique identifier of each Reusable that is created by Drupal (incrementally) when you create a new Reusable. You can use this for unique reference. ID cannot change upon creation.

  6. Label - Name. Name of each Reusable. It displays on the dynamic lists for this Reusable.

  7. Custom field, used only for this Reusable type. See more on next section.

  8. Label - Type. The type of this Reusable.

  9. Label - Published. Shows if Reusable is Published or Unpublished. Unpublished items are hidden in dynamic lists do not appear for the anonymous users. Use with caution.

  10. Label - Updated. The last datetime where this Reusable has been saved in the database.

  11. Label - Actions. Several operations you have regarding this item. Click the dropdown list to select an action. Available actions here are "Edit" and "Delete".

9.4 Reusable Data: Add/Edit iFrame

Edit SourceSingle Page
Url/admin/extra/add/iframe
Tips
  • Edit form is the same as Add New form.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

  • Reusable Data do not have a display page.

Image: Add/Edit Reusable Data of type "iFrame"
Screenshot
  1. By default new items set Published except if you uncheck this field.

  2. Name of the Reusable item.

  3. Custom field - iFrame URL. This must be an external URL such as http://example.com. Notice the url provided here must allow access through iframes. See more about CORS.

  4. Click "Create new Revision" if you want to create a new instance for this item.

  5. Click "Save" button to save changes.

  6. Click "Delete" link to delete the item (works on edit form only). Use with caution.

9.5 Reusable Data: Reusable Sponsors

Edit SourceSingle Page
Url/admin/dashboard/sponsors
MenuDashboard > Content > Reusable Data > Reusable: Sponsors
Info

In this Administration page you can see all the site Reusable of type "Sponsor".

Every time you are filtering the results you can see the result number as also as the results on each page (if there are more pages).

Image: Administer Sponsors
Screenshot
  1. Access this page from the Toolbar menu

  2. Click to create a new Reusable of type "Sponsor". See more on next section.

  3. Show current results information after applying search filter below.

  4. Filter results by Published status.

  5. Label - ID. This is the unique identifier of each Reusable that is created by Drupal (incrementally) when you create a new Reusable. You can use this for unique reference. ID cannot change upon creation.

  6. Label - Name. Name of each Reusable. It displays on the dynamic lists for this Reusable.

  7. Custom field, used only for this Reusable type. See more on next section.

  8. Custom field, used only for this Reusable type. See more on next section.

  9. Label - Type. The type of this Reusable.

  10. Label - Published. Shows if Reusable is Published or Unpublished. Unpublished items are hidden in dynamic lists do not appear for the anonymous users. Use with caution.

  11. Label - Updated. The last datetime where this Reusable has been saved in the database.

  12. Label - Actions. Several operations you have regarding this item. Click the dropdown list to select an action. Available actions here are "Edit" and "Delete".

9.6 Reusable Data: Add/Edit Sponsor

Edit SourceSingle Page
Url/admin/extra/add/sponsor
Tips
  • Edit form is the same as Add New form.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

  • Reusable Data do not have a display page.

Image: Add/Edit Reusable Data of type "Sponsor"
Screenshot
  1. By default new items set Published except if you uncheck this field.

  2. Name of the Reusable item.

  3. Custom field - Sponsor Website. This must be an external URL such as http://example.com.

  4. Custom field - Sponsor Logo (image).

  5. Click "Create new Revision" if you want to create a new instance for this item.

  6. Click "Save" button to save changes.

  7. Click "Delete" link to delete the item (works on edit form only). Use with caution.

9.7 Reusable Data: Blocks (Static)

Edit SourceSingle Page
Url/admin/dashboard/blocks
MenuDashboard > Content > Reusable Data > Blocks (static)
Tips
  • Block content changes rarely.

  • If you change a Block too many times consider using another storage type to display the Block data.

Info

In this Administration page you can see all the site "Blocks".

Drupal Blocks are boxes of content rendered into an area, or region, of a web page but on the same position.

Blocks on this Administration page are static (their content will not change dynamically).

Blocks on this Administration page are always on the same place on the website (eg on footer section). You are not allowed to move these to another place.

Block content changes rarely. If you change a Block too many times consider using another storage type to display the Block data.

Image: Administer System Blocks
Screenshot
  1. Access this page from the Toolbar menu

  2. Filter results by Block Description.

  3. Filter results by Block type. Available options are "Address", "Contact", "HTML".

  4. Label - ID. This is the unique identifier of each Block that is created by Drupal (incrementally) when you create a new Block. You can use this for unique reference. ID cannot change upon creation.

  5. Label - Block Description. Used by Authors only, not displayed on the website.

  6. Label - Type. The type of this Block.

  7. Label - Updated. The last datetime where this Block has been saved in the database.

  8. Label - Actions. Several operations you have regarding this item. Available actions here are "Edit" only.

9.8 Reusable Data: Add/Edit Block of type HTML

Edit SourceSingle Page
Image: Add/Edit Block of type HTML"
Screenshot
  1. Block Description. Used for administration purposes only.

  2. Custom field - Body.

  3. Click "Create new Revision" if you want to create a new instance for this item.

  4. Click "Save" button to save changes.

Image: Block of type HTML - Rendering example 1 (footer region)"
Screenshot
Image: Block of type HTML - Rendering example 2 (footer region)"
Screenshot

9.9 Reusable Data: Add/Edit Block of type Contact

Edit SourceSingle Page
Url/block/1
Image: Add/Edit Block of type Contact"
Screenshot
  1. Block Description. Used for administration purposes only.

  2. Custom fields. Leave empty if you want to hide a field completely.

  3. Click "Create new Revision" if you want to create a new instance for this item.

  4. Click "Save" button to save changes.

Image: Block of type Contact - Rendering example (footer region)"
Screenshot

9.10 Reusable Data: Add/Edit Block of type Address

Edit SourceSingle Page
Url/block/2
Image: Add/Edit Block of type Address"
Screenshot
  1. Block Description. Used for administration purposes only.

  2. Custom field - Body. Notice that some special css classes used here. Change this only if you know hot to write HTML code.

  3. Click "Create new Revision" if you want to create a new instance for this item.

  4. Click "Save" button to save changes.

Image: Block of type Address - Rendering example (footer region)"
Screenshot

10.1 Elements (or Paragraphs) overview

Edit SourceSingle Page
Info

Drupal "Paragraphs" are special Drupal fields which combine other fields and display as a whole. In simple words, Paragraphs are group of fields that can represent an output.

For example, a Paragraph of type "Picture with Caption" may use an Image field and a textfield and display an Image with a Caption after it.

Paragraphs in Drupal offer a great authoring experience, since they control data as also as markup in details.

Furthermore, authors can "duplicate" Paragraphs and "reorder" them within the Node page which allows for fast page structure building and easy visual changes.

In this project we call Paragraphs "Elements" to avoid any conflict with text paragraphs inside the textarea.

Each Element type has specific fields and requirements. It may reference Media, Nodes or Reusable data.

Element do not have a standalone page like Nodes, but they are only used as special fields inside Nodes.

Each Element is unique and can be attached only to one Node. There are no shared (reusable) Elements.

Elements do not need a name (title) like Nodes or Media nor do not have system fields (Published status, Created datetime, Author etc)

You can only create or edit them inside a Node form.

Some Elements have the same or similar name to Reusable Data types. This is because these Elements reference Reusable Data.

Available Element types are:

Element type Machine name Description
Columns columns Display other types of Elements in 2, 3 or 4 columns. Used when there are no such options in simple Elements.
Counters counters A group of 4 counters that display side by side.
Events List events Events dynamic list with simple date filtering (tab style).
Free Text/Title html Simple HTML text with CKEditor and a Title.
Hero Image banner Hero banner for wide displayed images.
Iframe iframe Embed an external Iframe.
Image, Text, Button short_teaser A short teaser has an Image, a Title, some Text and a button on footer.
Member List members Member lists (dynamic).
News List news Dynamic list of latest News.
Quote quote Quoted text (blockquote).
Report List report List of PDF files (Reports) with a Title, an Image cover and a Category.
Sponsors List sponsors Sponsors gallery of logos.
Text + Image image_teaser Image and Text side by side.
Twitter twitter Twitter Feed.
Video video External video from YouTube, Vimeo or Facebook with a Title.

See more details about each Element type in the following sections.

10.1 Elements: Add/Edit Element of type "Events List"

Edit SourceSingle Page
Tips
  • Edit form is the same as Add New form.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

  • Play with an Element values and click "Preview" to see what has changed.

Info

Use this simple type of Element to display four items of the Nodes of type "News & Events".

Only Events that have values on the "Event Date(s)" field appear to this dynamic list.

Events grouped by day and display in tabs (each day is one tab) and sort by "event date" (upcoming come first).

Authors have option to choose if they want to "Show only Today events" or "Show Today, Tomorrow and the Day after" events (if any).

Element of type "Events" has the "General Styling" options. See Element "Free Text/Title" above to learn more about this field.

Image: Add/Edit Element of type "Events List". Form vs Visual output mapping.
Screenshot

10.2 Elements basic options and operations

Edit SourceSingle Page
Tips
  • Play with Elements in the Demo page.

  • Preview Elements before saving the Node.

Info

When you create a new or edit an existing Element inside a Node several options are available.

These options are common for all Elements.

By default, when you edit an Element or other siblings collapse. This allows Author to focus on the current Element.

Image: Element basic options
Screenshot
  1. Edit all. Opens all Element forms as also as sub-forms. Not suitable for more than a few Elements list.

  2. Collapse All. Same as above but collapses all the Elements.

  3. Drag & Drop. Turns the list into a visual structured list with parents and children where you can move Elements easily.

  4. Single Element - Drag & Drop. Select the Element and move it with Drag & Drop in any place on the list.

  5. Single Element - Edit. Opens the edit form. Each Element has its own form. See more in the following sections.

  6. Single Element - Add above. Adds a new Element above current. This will open the "Add Element" Modal. See next section.

  7. Single Element - Remove. Removes the element. Notice that only after you "Save" the Node will remove the Element. Use with caution.

  8. Single Element - Duplicate. Crate a copy of the Element and places it after current.

  9. Single Element - Preview. Opens a Modal which Previews only this Element. Notice that your browser width may affect the Preview because it is a real time preview.

  10. Single Element - Collapse. Collapses current Element form.

  11. Each row on this table shows some information about Elements such as the Element system icon and Element name.

  12. Each row on this table shows a text like summary of the Element field values.

  13. Click "Add Element" button to add a new Element. This will open the "Add Element" Modal. See next section.

Image: Add Element modal
Screenshot
  1. Click any button to create a new Element. Notice, that the same modal appears inside Elements too if they are referencing other Elements.

  2. Click the "X" link to cancel.

10.3 Elements: Add/Edit Element of type "Free Text/Title"

Edit SourceSingle Page
Tips
  • Edit form is the same as Add New form.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

  • Play with an Element values and click "Preview" to see what has changed.

Info

Use this type of Element to add simple text or plain Titles above other Elements.

Element of type "Free Text/Title" has the "General Styling" options.

"General Styling" field holds special css classes that affect the output of the Element. They are shared across most of the Elements (except from some Elements that do not need them).

Notice that some General Styling options do not apply on every Element. Eg the "2 columns of 50% width each" option works only when there are more than one column on the Element.

Image: Add/Edit Element of type "Free Text/Title". Form vs Visual output mapping.
Screenshot

10.4 Elements: Add/Edit Element of type "Quote"

Edit SourceSingle Page
Tips
  • Edit form is the same as Add New form.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

  • Play with an Element values and click "Preview" to see what has changed.

Info

Use this type of Element to add a Blockquote. Not suitable for large texts.

Quote Element texts align on center by default.

Element of type "Quote" has the "General Styling" options. See Element "Free Text/Title" above to learn more about this field.

Image: Add/Edit Element of type "Quote". Form vs Visual output mapping.
Screenshot

10.5 Elements: Add/Edit Element of type "iFrame"

Edit SourceSingle Page
Tips
  • Edit form is the same as Add New form.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

  • Play with an Element values and click "Preview" to see what has changed.

Info

Use this simple type of Element to display one of the Reusable Data of type "iFrame".

If the Reusable Data item is not available you need to create it firstly.

Element of type "iFrame" has the "General Styling" options. See Element "Free Text/Title" above to learn more about this field.

Image: Add/Edit Element of type "iFrame". Form vs Visual output mapping.
Screenshot

10.6 Elements: Add/Edit Element of type "Video"

Edit SourceSingle Page
Tips
  • Edit form is the same as Add New form.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

  • Play with an Element values and click "Preview" to see what has changed.

Info

Use this simple type of Element to display one of the Media of type "Video".

If the Media Video item is not available you need to create it firstly.

Element of type "Video" has the "General Styling" options. See Element "Free Text/Title" above to learn more about this field.

Image: Add/Edit Element of type "Video". Form vs Visual output mapping.
Screenshot

10.7 Elements: Add/Edit Element of type "Hero Image"

Edit SourceSingle Page
Tips
  • Edit form is the same as Add New form.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

  • Play with an Element values and click "Preview" to see what has changed.

Info

Use this simple type of Element to display one of the Media of type "Hero Image".

If the Media Hero Image item is not available you need to create it firstly.

You can do this directly from this field though. No need to go visit another page to accomplish this.

Image: Add/Edit Element of type "Hero Image". Form vs Visual output mapping.
Screenshot

10.8 Elements: Add/Edit Element of type "Counters"

Edit SourceSingle Page
Tips
  • Edit form is the same as Add New form.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

  • Play with an Element values and click "Preview" to see what has changed.

Info

Use this simple type of Element to display four items of the Reusable Data of type "Counter".

If the Reusable Data item is not available you need to create it firstly.

Element of type "Counters" has the "General Styling" options. See Element "Free Text/Title" above to learn more about this field.

Image: Add/Edit Element of type "Counters". Form vs Visual output mapping.
Screenshot

10.9 Elements: Add/Edit Element of type "Sponsors List"

Edit SourceSingle Page
Tips
  • Edit form is the same as Add New form.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

  • Play with an Element values and click "Preview" to see what has changed.

Info

Use this simple type of Element to display four items of the Reusable Data of type "Sponsor".

If the Reusable Data item is not available you need to create it firstly.

Element of type "Sponsors" has the "General Styling" options. See Element "Free Text/Title" above to learn more about this field.

Grand Sponsor logo is larger that others.

Any other Sponsor display one next to the other using the same sorting from the "Add/Edit Element" form.

Image: Add/Edit Element of type "Sponsors List". Form vs Visual output mapping.
Screenshot

10.11 Elements: Add/Edit Element of type "News List"

Edit SourceSingle Page
Tips
  • Edit form is the same as Add New form.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

  • Play with an Element values and click "Preview" to see what has changed.

Info

Use this simple type of Element to display the latest (by date) four items of the Nodes of type "News & Events".

By default, only the latest four items display.

If you want to show more or fewer use the "Advanced Options" input field.

Element of type "News List" has the "General Styling" options. See Element "Free Text/Title" above to learn more about this field.

Image: Add/Edit Element of type "News List". Form vs Visual output mapping.
Screenshot

10.12 Elements: Add/Edit Element of type "Member List"

Edit SourceSingle Page
Tips
  • Edit form is the same as Add New form.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

  • Play with an Element values and click "Preview" to see what has changed.

Info

Use this dynamic type of Element to display Nodes of type "Members".

Authors can choose if they want to "Show Alternates" under each Member fullname.

Authors can select how they want to display Members. The available options are:

  • Members without Photo, Card with short info
  • Members without Photo, plain list
  • Members with Photo, open in new window
  • Members with Photo, open in Popup

Foreach display type above they can also select which Groups of Members they want to display. The Groups come from field "Member Group" of Node of type Member.

  • Board of Directors
  • Non voting Members
  • Officers
  • Our Team
  • Statutory Members

By default, all the Members of that Group will display. If you want to show more or fewer items use the "Advanced Options" input field.

Element of type "Members List" has the "General Styling" options. See Element "Free Text/Title" above to learn more about this field.

Image: Add/Edit Element of type "Member List". Form vs Visual output mapping.
Screenshot

10.13 Elements: Add/Edit Element of type "Report List"

Edit SourceSingle Page
Tips
  • Edit form is the same as Add New form.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

  • Play with an Element values and click "Preview" to see what has changed.

Info

Use this dynamic type of Element to display Media of type "Report/Attachment".

Authors can select which Report Display they want to use. The available options are:

  • Reports: Annual Reports
  • Reports: Financial Audits
  • Reports: Pedestrian Counts
  • Reports: Publications

By default, all the Reports of each group will display. If you want to show more or fewer items use the "Advanced Options" input field.

Element of type "Reports List" has the "General Styling" options. See Element "Free Text/Title" above to learn more about this field.

Image: Add/Edit Element of type "Report List". Form vs Visual output mapping.
Screenshot

10.14 Elements: Add/Edit Element of type "Columns"

Edit SourceSingle Page
Tips
  • Edit form is the same as Add New form.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

  • Play with an Element values and click "Preview" to see what has changed.

Info

This is an Element to create advanced structured data using other Elements. It is a builder with endless combinations.

It allows Authors to create two or more Columns with data and stack them automatically according to the General Styling selected options.

A Column can contain other Columns too. The available Elements inside a Column are:

  • Columns
  • Hero Image
  • Iframe
  • Free Text/Title
  • Events List
  • Text + Image
  • Member List
  • Quote
  • Image, Text, Button
  • News List
  • Sponsors List
  • Video

Notice that in order to keep your pages simple and manageable do not use more than a four column list. Also, keep the inner Elements as simple as possible otherwise design can break easily for each Column.

Element of type "Columns" has the "General Styling" options. See Element "Free Text/Title" above to learn more about this field.

Image: Add/Edit Element of type "Columns". Form vs Visual output mapping.
Screenshot

10.15 Elements: Add/Edit Element of type "Twitter"

Edit SourceSingle Page
Tips
  • Edit form is the same as Add New form.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

  • Play with an Element values and click "Preview" to see what has changed.

Info

Use this simple type of Element to display the latest four tweets from your official Twitter account.

Settings for the widget set in another settings page.

Image: Add/Edit Element of type "Twitter". Form vs Visual output mapping.
Screenshot

10.16 Elements: Add/Edit Element of type "Text + Image"

Edit SourceSingle Page
Tips
  • Edit form is the same as Add New form.

  • Each field has a corresponding description on top or bottom of it. Read this before entering values to the field.

  • Play with an Element values and click "Preview" to see what has changed.

Info

This Element type is like Columns but its fields and display is predefined.

It has an Image (Media) and Text as also as some styling options.

If you need to create more advanced Image & Text combinations use the "Columns" Element instead.

Notice that you need to set the two columns using the "General Styling" options otherwise the items will stack one under the other.

Image: Add/Edit Element of type "Text + Image". Form vs Visual output mapping.
Screenshot

11.1 Form Publication Request - Clear Submissions

Edit SourceSingle Page
Url/admin/structure/webform/manage/request/results/clear
Info

In this Administration page you can purge all the submissions of form "Publication Request".

This action cannot be undone.

11.1 Forms - Overview

Edit SourceSingle Page
Info
  • Forms (aka Drupal Webforms) are special templates that store user submissions as data.
  • Each Form has its own fields and settings.
  • Each Form sends an email to the site Managers or even to the submitter.
  • For every Form there is a dedicated backend page where Managers can see the results, download the results, resend the email etc.

There are three different forms on this website:

  • Contact form
  • eNewsletter form
  • Publication request form
Image: Forms available on the website
Screenshot

11.2 Form Contact - Submissions

Edit SourceSingle Page
Url/admin/dashboard/submissions-contact
MenuDashboard > Form Submissions > Results: Contact
Info

In this Administration page you can see all the submissions of form "Contact" with their basic fields.

Results display in a dynamic table. On the table header some column labels are links. When you click these you can sort by each column value.

Every time you are filtering the results you can see the result number as also as the results on each page (if there are more pages).

Image: Form Submissions of form "Contact"
Screenshot
  1. Access this page from the Toolbar menu

  2. Click to visit the Form page (frontend)

  3. Click to visit the "Download Submissions" administration page (see more in the following screenshot)

  4. Click to visit the "Clear Submissions" administration page (see more in the following screenshot)

  5. Filter submissions by date or internal notes

  6. Show current results after applying the Filters above

  7. Label - ID. This is the unique identifier of each submission that is created by Drupal (incrementally). You can use this for unique reference. ID cannot change upon creation. Click on the ID link to open the submission individual page with all the details available.

  8. Label - Created. The datetime where this submission has been saved in the database.

  9. Label - User. Most of the times it will be "Anonymous user".

  10. Label - IP Address. The IP of the browser that submitted the data.

  11. Label - Custom fields (only for this Form type).

  12. Label - Operations. Several operations you have regarding this submission. Click the dropdown list to select an operation. Available operations here are "Edit", "View", "Resend" (if there is an email to send), "Duplicate" and "Delete".

11.3 Form Contact - Clear Submissions

Edit SourceSingle Page
Url/admin/structure/webform/manage/contact/results/clear
Info

In this Administration page you can purge all the submissions of form "Contact"

This action cannot be undone.

Image: Clear (delete) Submissions of form "newsletter"
Screenshot

11.4 Form Contact - Download Submissions

Edit SourceSingle Page
Url/admin/dashboard/submissions-contact/download
Info

In this Administration page you can download submissions of form "Contact".

Image: Download Submissions of form "Contact"
Screenshot
  1. Choose your options and download submissions

11.5 Form eNewsletter - Submissions

Edit SourceSingle Page
Url/admin/dashboard/submissions-newsletter
MenuDashboard > Form Submissions > Results: eNewsletter
Info

In this Administration page you can see all the submissions of form "eNewsletter" with their basic fields.

Results display in a dynamic table. On the table header some column labels are links. When you click these you can sort by each column value.

Every time you are filtering the results you can see the result number as also as the results on each page (if there are more pages).

See more on similar section above.

11.6 Form eNewsletter - Download Submissions

Edit SourceSingle Page
Url/admin/dashboard/submissions-newsletter/download
Info

In this Administration page you can download submissions of form "eNewsletter".

See more on similar section above.

11.7 Form eNewsletter - Clear Submissions

Edit SourceSingle Page
Url/admin/structure/webform/manage/newsletter/results/clear
Info

In this Administration page you can purge all the submissions of form "eNewsletter".

This action cannot be undone.

11.8 Form Publication Request - Submissions

Edit SourceSingle Page
Url/admin/dashboard/submissions-request
MenuDashboard > Form Submissions > Results: Publication Request
Info

In this Administration page you can see all the submissions of form "Publication Request" with their basic fields.

Results display in a dynamic table. On the table header some column labels are links. When you click these you can sort by each column value.

Every time you are filtering the results you can see the result number as also as the results on each page (if there are more pages).

See more on similar section above.

11.9 Form Publication Request - Download Submissions

Edit SourceSingle Page
Url/admin/dashboard/submissions-request/download
Info

In this Administration page you can download submissions of form "Publication Request".

See more on similar section above.

12 Menus & Navigation

Edit SourceSingle Page

12.1 Menus & Navigation - Main Menu

Edit SourceSingle Page
Url/admin/dashboard/menu-main
MenuDashboard > Menus > Main Menu
Info

Main Menu is the basic navigation of the site.

It has two levels by default and some of its top parents are fake links (<nolink>) that just stay there to hold children pages.

Do not use more than two levels on the Main Menu.

Notice that most of the options on this page are also available on each "Edit Menu Item" individual page.

Menu items do not have revisions so edit or delete them with caution.

Image: Main Menu overview page
Screenshot
  1. Access this page from the Toolbar menu

  2. Click to add a new Menu Item. See more on next section.

  3. Drag and drop option to create structured groups. Children of a menu item appear indented.

  4. Uncheck to disable the menu item. This will hide the menu item from the menu but will not delete it.

  5. When you click to a menu item title you go to the link page of that menu item.

  6. Options "Edit" or "Delete" are available. See more on next screenshot.

Image: Add/edit Menu Item
Screenshot
  1. Provide the menu item title. Keep this short.

  2. Provide a link. Start typing the title of a piece of content to select it. You can also enter an internal path such as /node/add or an external URL such as "http://example.com". Enter <front> to link to the front page. Enter <nolink> to display link text only.

  3. A flag for whether the link should be enabled in menus or hidden.

  4. Description. Shown when hovering over the menu link (optional).

  5. Parent link. Keep to one parent maximum.

  6. Weight. A field to sort menu items on the menu display. Same as the drag and drop functionality on screenshot before.

  7. Save changes

  8. Delete this menu item. Always delete with caution. Notice tha deleting a menu item does not delete also the Node that is referenced (if any).

TOC