<span> tags are bad mmkay. [Mr Mackie]
Thou shalt not paste directly from Word [eleventh commandment]
PAGE LAYOUT
ONLY Beaver builder should be used to create or edit content on this wordpress site.
Pages should not include feature images or excerpts as the design has not been done incorporating these elements.
All new pages should start with the default page template available in the saved area of the beaver builder menu (plus icon top right when editing a page)
The full row size of each page is 1280 pixels
All pages should include the sidebar menu on the left taking up 256 pixels
The content area on the right of each page is the remaining 1024 pixels
HOME PAGE
The home page is a special page and does not follow the layout conventions of the rest of the site.
It is full width 1280 pixels with NO sidebar.
There is a brief intro to the site overall.
There are 3 zones for custom links to other content of the site highlighting current issues and processes. These require a feature image and should be managed by the editorial team.
The teche posts feed and upcoming events feed are automated and should not be edited. Note: There is a delay in the update of these so please wait up to 24 hours for posts/items to appear.
There are social media links at the bottom. These services are managed externally. If there is a new one to add, please contact the editorial team.
MENU STRUCTURE
The site contains two different Menu hierarchies
MAIN MENU
MAIN_MENU is ALWAYS shown on the hamburger icon top right.
The MAIN_MENU is NOT auto generated and requires adding new pages or parents through the wordpress backend. This should ONLY be done by the Editorial team.
The order of items in the MAIN_MENU is NOT dictated by PAGE order in the wordpress backend. They need to be ordered manually and SHOULD ALWAYS reflect the page order shown in the SIDEBAR MENUS
The MAIN_MENU will never be more than two layers deep, PARENT -> FIRST CHILD
There should only be a maximum of 4-5 FIRST CHILDREN per PARENT
SIDEBAR MENUS
SIDEBAR MENUS are to be shown on ALL pages EXCEPT the HOME PAGE
The SIDEBAR MENUS ARE auto generated based on the top level PARENT of the section you are in and derived from the PAGE order in the wordpress backend.
Generally speaking, the HIERARCHY should not go past 4 CHILDREN
HEADINGS, BULLETS, COLOURS ETC
HEADINGS ETC:
Paragraph - To be used for all general text. Bold, italic, underline can be used for emphasis only. Colour should rarely be used and only for extreme cases.
Heading 1 - (NOT to be used ANYWHERE)
HEADING 2 - For main headings on a page. Do NOT change font, colour or weight
if there is only one level of headings on a page, use Heading 2.
HEADING 3 - For sub headings on a page. Do NOT change font, colour or weight
Only use if there is already a top level heading 2 and only use under that.
HEADING 4 - For sub-sub headings on a page. Do NOT change font, colour or weight
Only use if there is already a top level heading 2 AND a sub level heading 3 and only use under that.
AddressPreformatted
Code
Quotes can be added using the quote button. The font, size etc shall not be changed and the reference shall be included in the block [Rampe, 2019]
BULLETS AND LISTS
- All first level bullets used shall be "disc" style
- All second level bullets shall be "circle" style
- All lower level bullets shall be "circle" style
- All second level bullets shall be "circle" style
- All first level lists shall be "default" (numbered) style
- All second level lists shall be "default" (numbered) style
- All third level lists shall be "default" (numbered) style
- All second level lists shall be "default" (numbered) style
COLOURS
Colours of fonts or elements should NOT be changed unless justified.
Macquarie's brand colours are as follows:
| Colour | Pantone® reference | CMYK | RGB | HTML (HEX) |
|---|---|---|---|---|
| Red | Pantone® 187 CP | C7 M100 Y82 K26 | R166 G25 B46 | A6192E |
| Deep Red | Pantone® 188 CP | C16 M100 Y65 K58 | R118 G35 B47 | 76232F |
| Bright Red | Pantone® 2035 CP | C0 M97 Y100 K3 | R214 G0 B28 | D6001C |
| Magenta | Pantone® 233 CP | C12 M100 Y0 K0 | R198 G0 B126 | C6007E |
| Purple | Pantone® 242 CP | C32 M100 Y11 K41 | R128 G34 B95 | 80225F |
| Charcoal | Pantone® 447 CP | C50 M30 Y40 K90 | R55 G58 B54 | 373A36 |
| Sand | Pantone® 7527 CP | C3 M4 Y14 K8 | R214 G210 B196 | D6D2C4 |
Accordians should be used at the bottom of pages for references when needed. They can also be used in other areas as desired.
USE OF IMAGES AND MEDIA
IMAGES
All images should be sized appropriately for the screen. Not too big (more than 150% of page display size), not too small (less than 100% of page display size).
All image use should be purposeful or illustrative to the content.
All images used should be high quality, crisp, well colour balanced.
All diagrams and/or charts should be fully readable.
All images need correct permission to use. This includes Public Domain, CC BY, CC BY NC and Images owned by Macquarie University
If Public Domain, attribution is not required
If CC BY or CC BY NC, then PROPER attribution is required on page.
If copyright owned by Macquarie, Photographer should be named as per moral rights.
All images should include ALT-TEXT descriptions.
Text should not be run over images unless absolutely required to communicate.
MEDIA
Wherever possible, videos should be embedded using an embed code in a separate beaver builder element.
The beaver builder row element itself that contains the youtube embed should have zero margins to ensure the aspect ratio in the iframe is respected and the video plays without any black bars (letterbox or pillarbox) whatsoever.
Size and position should be handled with rows as in the example below.
Youtube videos should be embedded with norel=0 manually added to the embed code. (see example below)
<iframe width="560" height="314" src="https://www.youtube.com/embed/wqKbnjsVaK0?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
MANAGING LINKS AND FILES
LINKS
All links should be in default url styling. All external links should be set to open in a new tab. All internal links should not be set to open in a new tab.
Meaningful words should be used for the links as per good practise guidelines
All external links shall use a font awesome external link icon to the right of the link as above. (NOTE, this will not show in the text editor mode of beaver builder). To achieve this, paste the below code immediately before the closing </a> tag of a link once made.
<i class="fas fa-external-link-alt fa-xs"> </i>
Email addresses should be set with "mailto:" tag and have the email icon appended. ie. artlandt@mq.edu.au Paste the following code immediately before the closing </a> tag of a link once made.
<i class="fas fa-envelope fa-xs"> </i>
LOGIN REQUIRED
When linking to a document behind a login, use the lock icon. Arts CoP iLearn site
Paste the following code immediately before the closing </a> tag of a link once made.
<i class="fas fa-lock fa-xs"> </i>
FILES
Generally all small to medium sized files (up to 50MB) should be saved to the wordpress multimedia library.
Larger files should be saved using iShare.
Documents should be named correctly BEFORE upload.
Documents NOT intended to be edited by the end user shall be PDF format
Documents that ARE intended to be edited by the end user shall be in Microsoft office or Adobe standard formats only.
The link format above should be respected for documents as well as including format and file size in italic text inside square brackets after the link.
As an example, DOWNLOAD SLIDES HERE [.pdf, 16MB]