User Style Guide

 

Image Styles

Banner

Image Size: 1170 x 350

Card

Image Size: 700 x 480

Building photos

Image Size: 1290 x 862

Building floor plans

Image Size: 920 x 695

 

Accordion

How to add an accordion
  1. In the WYSIWYG editor create an accordion by clicking on the accordion button ()



 

  • ​​​​You can remove an accordion by right clicking on the accordion you would like to remove and selecting "Remove accordion tab"
  • You can add more accordions by righting on any accordion tab and selecting "Add accordion tab before" or "Add accordion tab after"

 

Background Image Card

How to create background image card
  1. In the menu bar go to Content -> Background Image Card
  2. On the background_image_card page click on the "Add background image card" button
  3. Fill in required information
  4. In the description add a link
  5. click anywhere on the link text and then in the WYSIWYG editor go to the styles dropdown and select White Outline (Once this is selected the text will turn white so you will not be able to see it in the WYSIWYG editor unless you highlight the text)

 

Banners

How to add banners
  1. You may add a banner by to going to the banner entities page located under Structure -> Banner List. Then clicking on the "Add Banner" button
  2. Once on the add banner page fill in the required information
    1. Published
    2. Name (required)
    3. Caption (required)
    4. Banner image (required - can be image or video)
    5. Button (optional)
      1. URL
      2. Link text (Text on the button)
  3. Save

 

Buttons

Large Purple Button
  1. In the WYSIWYG editor create a link ()
  2. Click anywhere on the link in the WYSIWYG editor ()
  3. Once on the link select the styles dropdown() and choose Large Purple btn


Large Purple Button

Small Purple Button
  1. In the WYSIWYG editor create a link ()
  2. Click anywhere on the link in the WYSIWYG editor ()
  3. Once on the link select the styles dropdown() and choose Small Purple btn

 

Small Purple Button

White Button
  1. In the WYSIWYG editor create a link ()
  2. Click anywhere on the link in the WYSIWYG editor ()
  3. Once on the link select the styles dropdown and choose White btn ()

 

White Button

Purple Text
  1. In the WYSIWYG editor create a link ()
  2. Click anywhere on the link in the WYSIWYG editor ()
  3. Once on the link select the styles dropdown() and choose Purple text 

 

Purple Text

 

Content Types

How to edit content types & components

There are multiple ways to edit content in Drupal:

  1. Clicking on the edit section on a page 
  2. Clicking on the pencil icon on a component or page 
  3. Going to the content type or component list page and clicking on the edit button for the individual item 

NOTE: pages are built in multiple ways

  • Most pages you can edit all the content just by clicking on the edit section on a page (e.g. this page, building pages, etc.)
  • Other pages that have components and node blocks (e.g. full width cards and student quote page) require you to use the pencil icon on the component or node block in order to edit that specific part of the page while the rest of the page can be edited via the usually edit button
  • A few pages are made only with layout builder and thus the content can only be edited via layout builder

 

Documents (PDFs)

How to add PDFs
  1. Under the structure menu on the menu tool bar select path files
  2. Once on the path files entity list page click on "Add Path file entity" button
  3. Configure Path file
    1. Name
    2. File Name (File to be uploaded)
    3. URL alias (Customizable site link to file e.g. /offer_book)
  4. Save
  • Once a file has been added, you may link to the PDF via the WYSIWYG editor create a link button ()
  • You may edit existing path files on the Path file entity list page located under Structure -> Path Files

 

How to edit PDFs
  1. Under the structure menu on the menu tool bar select path files
  2. Once on the path files entity list page click on "edit" on the PDF you would like to update.
  3. Click on the remove button on the existing file under File Name (Make a copy in case you need the old pdf)
  4. Upload the new pdf.
  5. Save.

 

NOTE: The file name you use on the PDF will be the file name the user sees when they download the PDF. The URL Alias is what the user sees for the path of the PDF on the browser.

 

Full Width Card

How edit Full Width Cards

You may edit full width card via two methods:

  1. Clicking on the pencil icon on the Full Width Card you wish to edit
  2. Going to the Full Width Card entities page located under Structure -> Full width card list. Then clicking on the edit button of the card you wish to edit

 

How to create Full Width Cards
  1. You may add full width card by to going to the Full width card entities page located under  Structure -> Full Width Card List. Then clicking on the "Add Full Width Card" button
  2. Once on the add full width card page fill in the required information
    1. Published
    2. Name (required)
    3. Description (required)
    4. Button (optional)
      1. URL
      2. Link text (Text on the button)
    5. Card Image (required)
  3. Save

Full Width Card

 

NOTE: The second set of Full Width Cards extends the whole page so the edit pencil icon will be on the far top right corner of the card.

 

Grids

How to add grid
  1. In the WYSIWYG editor create a bootstrap grid layout by clicking the grid icon ()
  2. Configure grid layout
    1. Select layout
    2. Configure width of the columns in the default (Extra small) tab
    3. Save

 

Links

How to add links & configure them
  1. In the WYSIWYG editor you can create a link by clicking on the create link button ()
  2. You can then configure the link with the following settings
    1. URL
    2. Title
    3. Advance
      1. Aria label
      2. CSS classes
      3. ID
      4. Open in new window/tab
      5. Relation
  3. Once configured you can save the link

Note:

  • All settings are optional besides URL
  • you can create anchor links as well using the create anchor button in the WYSIWYG editor ()

 

Lists

Bullet
  1. In the WYSIWYG editor create a unordered list ()
  2. Click anywhere on the list in the WYSIWYG editor
  3. Once on the list select the styles dropdown() and choose bullet list

Regular list:

  • Ex 1
    •  

Bullet styled:

  • Ex 1
    •  
Square
  1. In the WYSIWYG editor create a unordered list ()
  2. Click anywhere on the list in the WYSIWYG editor
  3. Once on the list select the styles dropdown() and choose square list
  • Ex 1
  • Ex 2
  • Ex 3

 

Tables

How to add a table
  1. In the WYSIWYG editor create a table ()
  2. Configure the table 
  3. Confirm configuration

Rows: Number of rows in table

Columns: Number of columns in table

Width: Width of table in pixels or a number with a valid CSS unit (px, %, in, cm, mm, em, pt or pc) 

Height: Height of table in pixels or a number with a valid CSS unit (px, %, in, cm, mm, em, pt or pc)

NOTE: Highly recommended to use percent or pixels for width and height

Headers: None, first row, first column, both (headers in first row and first column)

Border size: Size of border in pixels

Cell spacing: Space between cells 

Cell padding: Space around text inside cells

Alignment: <not set>(Default alignment), left, center and right

Caption: Add caption to table

Summary: Add summary to table

Table Style 1
  1. In the WYSIWYG editor create a table ()
  2. Configure the table 
  3. After table is created click anywhere on the table and select the styles dropdown() and choose Table Style 1
Header  Header 
Row 1 Row 1
Table Style 2
  1. In the WYSIWYG editor create a table ()
  2. Configure the table 
  3. After table is created click anywhere on the table and select the styles dropdown() and choose Table Style 2
Header  Header 
Row 1 Row 1
Row 2 Row 2
Row 3 Row 3
Buildings Header
  1. In the WYSIWYG editor create a table ()
  2. Configure the table 
  3. After table is created click anywhere on the table and select the styles dropdown() and choose Buildings header

NOTE: Building header is used in conjunction with buildings table to create the style of table located in /applying/fees_and_payment.

If new buildings fee table is needed please submit a ticket at the HASIT JIRA Service Desk under Web: Content Updates

Building Name
Buildings Tables
  1. In the WYSIWYG editor create a table ()
  2. Configure the table 
  3. After table is created click anywhere on the table and select the styles dropdown() and choose Buildings table

NOTE: Building table is used to in conjunction with buildings header to create the style of table located in /applying/fees_and_payment.

If new buildings fee table is needed please submit a ticket at the HASIT JIRA Service Desk under Web: Content Update

Room Type
Fee $$$$
Fee $$$$
Important Dates Table
  1. In the WYSIWYG editor create a table ()
  2. Configure the table 
  3. After table is created click anywhere on the table and select the styles dropdown() and choose Important dates table
  4. For the academic year text select the format dropdown                  ()  and select H2 
Dates Description

YEAR

  
date description
Resources Table
  1. In the WYSIWYG editor create a table ()
  2. Configure the table 
  3. After table is created click anywhere on the table and select the styles dropdown() and choose Resources table
Header  Header 
Row 1 Row 1
Row 2 Row 2

 

Text Formats

Headers

  • H1

  • H2

  • H3

  • H4

  • H5
Bold
  • Bold
Italics
  • Italics
Underline
  • Underline