An additional two CPTs were added on 2 sites. There are also additional listings on these sites.
Site:
UK EN Intermediary :RI Posts (Responsible Investing), UMAP Posts 
IE EN Intermediary: RI Posts

Global settings

  • Prefix :  bmo – class example: “bmo-banner”
  • Module name: [module number] module name – (numbering of individual modules can be found on the fsd page)
  • Please don’t use these classes to create selectors:.elementor-inner, .elementor-row and .elementor-column-wrap, . In element 3.0, these classes have been removed. -> developers elementor
  • In a footer there is a code which on the mac adds a class bmo-ios to a body.
  • Provider: vimeo/youtube/wistia
  • While adding a photo to the media, please add alt !!!
  • Reset paddings in columns
  • When creating templates, describe the sections (and columns, if it makes the job easier later)
  • When adding svg, please check their titles.
    The title should describe what is in the image, not where it is:
    Thumbs up icon –  Correctly
    BMO thumbs up icon – Incorrect
Task
Description
https://kurtosys-prod-eng.atlassian.net/browse/BMO-2980
Navigation – Changing the sub-menu layout on the tablet/mobile view. It now appears below the main link
https://kurtosys-prod-eng.atlassian.net/browse/BMO-7650
Navigation Flyouty – Changing the sub-menu width/position on the desktop
https://kurtosys-prod-eng.atlassian.net/browse/BMO-2864
Icon and text – In table and mobile view the text should be centred
https://kurtosys-prod-eng.atlassian.net/browse/BMO-2991
Tabs and image – Modules whose have slider have tabs one under the other on mobile because we were not able to reproduce it like on the old website
https://kurtosys-prod-eng.atlassian.net/browse/BMO-3268
Team members – All Read bio buttons are fixed and have been standardized → the title of each button is Read Bio, translations in the ticket.
https://kurtosys-prod-eng.atlassian.net/browse/BMO-3004
Team members – Font in member position has been standarized with everything similar
https://kurtosys-prod-eng.atlassian.net/browse/BMO-3006
Team members – The client decided to make the whole box clickable, not just the image and the button
https://kurtosys-prod-eng.atlassian.net/browse/BMO-3000
Team members – The client decided to standarize view module on mobile view and desktop view. Actually module have only boxes view without slider.
https://kurtosys-prod-eng.atlassian.net/browse/BMO-3022
Video – All modules from vimeo and youtube that are opened in the popup have a default modal size and a default play button.
https://kurtosys-prod-eng.atlassian.net/browse/BMO-4590
Insight – Please standardize to Version 1 – See all insights (Sentence case).
https://kurtosys-prod-eng.atlassian.net/browse/BMO-5742
Table – please standaralize fonts (size: 16px, table head is bold, use Italics on table body if it is already in Italics, otherwise use normal)
https://kurtosys-prod-eng.atlassian.net/browse/BMO-4432
Posts – if on the old side right side is empty, the content should be 100% (including images, tables, quotes etc)
https://kurtosys-prod-eng.atlassian.net/browse/BMO-3030
Posts – Can we go ‘Read more’ not in caps but increase the size of the CTA slightly?
https://kurtosys-prod-eng.atlassian.net/browse/BMO-6491
Pages – if on the old side right side is empty, the content should be 100%
https://kurtosys-prod-eng.atlassian.net/browse/BMO-6182
The color of the arrows in ” Insights Carousel ” module has been standardized
https://kurtosys-prod-eng.atlassian.net/browse/BMO-6071
A customer changed a field in a banner. Now the banner does not display excerpt but only “descriptions for banner post” field – without clamp
https://kurtosys-prod-eng.atlassian.net/browse/BMO-6280
Client will not provide better quality photos
https://kurtosys-prod-eng.atlassian.net/browse/BMO-5957
There is a version of the table that has the first heding empty. Leaving this space empty causes a WCAG error. BMO has chosen to fill this cell with the text “empty-cell”
https://kurtosys-prod-eng.atlassian.net/browse/BMO-6306
The item for a member will be displayed side by side. This has been changed to avoid creating multiple versions (on the old site they had different configurations of this)
https://kurtosys-prod-eng.atlassian.net/browse/BMO-6469
Change template for team members (if only description was visible)
https://kurtosys-prod-eng.atlassian.net/browse/BMO-3437
Income and Liquidity pages have unify structure under Fixed Income page across all sites
https://kurtosys-prod-eng.atlassian.net/browse/BMO-2943
Accordion – Collapsible can be enabled, then all chords are closed at the start and only one chord can be opened at the same time, clicking on another chord closes the previous one. It is then not possible to open a chord and close it by clicking again.

Modules that are uploaded to the site via the "template" widget

The breadcrumbs widget for a single post is added via the “template” widget . If you need to edit this widget, please edit these templates -> https://www.bmogam.com/?elementor_library=breadcrumbs-for-team-members

The breadcrumbs widget for a single Market Chart is added via the “template” widget . If you need to edit this widget, please edit these templates -> https://www.bmogam.com/?elementor_library=breadcrumbs-for-market-charts

The breadcrumbs widget for a page is added via the “template” widget . If you need to edit this widget, please edit these templates ->  https://www.bmogam.com/wp-admin/post.php?post=17256&action=elementor
Template – breadcrumbs for pages

Global setting
  • Reset paddings in columns
Global setting

Information for testers

On the old site there are 5 or 6 breakpoints.

In order to make the work easier, we have chosen 3 resolutions from the old website, on which we are building the modules

Resolution from the old page on which to check the modules
Desktop – 1400px

Tablet – 900px

Mobile – 320px

New breakpoint:

  • ↓ – 767 – mobile (modules have 100%)
  • 768-1024- tablet (modules have 720px width)
  • 1025 – ↑ – desktop (modules have 1140px width)

1. Colors

Copied
To achieve proper contrast use #BEDCEB color for the background section when text-color is black

2. Typography

Heading tags are default padding-bottom: 30px

Please see section -> 5. Paddings settings

For developers:If any of the following classes do not work on a particular wiget, please add the selector to the global styles rather than setting the font appearance in the Elementor. Create the selector so that the client can override it from within the Elementor

Change font weight 300 to font weight 400 

and font weight 600 to font weight 700

Do not use font-size 13. Change it to a font-size 14px. Only buttons have a font-size of 13px.

If class which you want to use doesn’t have italic style and you need to set this add bmo-font-italic class

If you need to use two font-size in one text editor there is classes with 36px font-size: bmo-small-and-big-font and bmo-small-and-big-font-color (#0075be) add this class in span

The font example

Style versions for fonts
all font have line-height 1.5

Desktop font-size
Mobile font size
Fonts from 41 upwards
Font size 34px
Fonts from 36 to 40px (including)
Font size 32px
Fonts from 30 to 35px (including)
Font size 29px
Fonts from 29px to 26px(including)
Font size 22px
Fonts from 26px down
Same font size as in desktop view

font-v1 - example text

Font styles:
Font-family: "Heebo";
font-size: 42px
color: #001928
font-weight: 400

font-v2 - example text

Font styles:
Font-family: "Heebo";
font-size: 38px;
font-weight: 400;
color: #001928;

font-v3 - example text

Font styles:
Font-family: "Heebo";
font-size: 38px;
font-weight: 400;
color: #5f5f5f;

font-v4 - example text

Font styles:
Font-family: "Heebo";
font-size: 36px;
font-weight: 400;
color: #001928;

font-v5 - example text

Font styles:
Font-family: "Heebo";
font-size: 32px;
font-weight: 400;
color: #001928;

font-v6 - example text

Font styles:
Font-family: "Heebo";
font-size: 28px;
font-weight: 400;
color: #ffffff;

font-v7 - example text

Font styles:
Font-family: "Heebo";
font-size: 28px;
font-weight: 400;
color: #001928;

font-v8 - example text

Font styles:
Font-family: "Heebo";
font-size: 26px;
font-weight: 400;
color: #001928;

font-v9 - example text

Font styles:
Font-family: "Heebo";
font-size: 24px;
font-weight: 400;
color: #5f5f5f;

font-v10 - example text

Font styles:
Font-family: "Heebo";
font-size: 24px;
font-weight: 400;
color: #001928;

font-v11 - example text

Font styles:
Font-family: "Heebo";
font-size: 22px;
font-weight: 400;
color: #001928;

font-v12 - example text

Font styles:
Font-family: "Heebo";
font-size: 21px;
font-weight: 400;
color: #001928;

font-v13 - example text

Font styles:
Font-family: "Heebo";
font-size: 20px;
font-weight: 400;
color: #5f5f5f;

font-v14 - example text

Font styles:
Font-family: "Heebo";
font-size: 18px;
font-weight: 400;
color: #001928;

font-v15 - example text

Font styles:
Font-family: "Heebo";
font-size: 18px;
font-weight: 400;
color: #ffffff;

font-v16 - example text

Font styles:
Font-family: "Heebo";
font-size: 18px;
font-weight: 700;
color: #001928;

font-v17 - example text

Font styles:
Font-family: "Heebo";
font-size: 16px;
font-weight: 700;
color: #5f5f5f;

font-v18 - example text

Font styles:
Font-family: "Heebo";
font-size: 16px;
font-weight: 400;
color: #001928;

font-v19 - example text

Font styles:
Font-family: "Heebo";
font-size: 16px;
font-weight: 400;
color: #5f5f5f;

font-v20 - example text

Font styles:
Font-family: "Heebo";
font-size: 16px;
font-weight: 700;
color: #001928;

font-v21 - example text

Font styles:
Font-family: "Heebo";
font-size: 14px;
font-weight: 400;
color: #001928;

font-v22 - example text

Font styles:
Font-family: "Heebo";
font-size: 14px;
font-weight: 700;
color: #0075be;

font-v23 - example text

Font styles:
Font-family: "Heebo";
font-size: 12px;
font-weight: 400;
color: #001928;

font-v24 - example text

Font styles:
Font-family: "Heebo";
font-size: 12px;
font-weight: 700;
color: #001928;

font-v25 - example text

Font styles:
Font-family: "Heebo";
font-size: 25px;
font-weight: 400;
color: #5f5f5f;

font-v26 - example text

Font styles:
Font-family: "Heebo";
font-size: 14px;
font-weight: 700;
color: #ffffff;

font-v27 - example text

Font styles:
Font-family: "Heebo";
font-size: 14px;
font-weight: 700;
color: #5f5f5f;

font-v28 - example text

Font styles:
Font-family: "Heebo";
font-size: 21px;
font-weight: 700;
color: #001928;

font-v29 - example text

Font styles:
Font-family: "Heebo";
font-size: 36px;
font-weight:400;
color: #ffffff;

font-v30 - example text

Font styles:
Font-family: "Heebo";
font-size: 24px;
font-weight:700;
color: #001928;

font-v31 - example text

Font styles:
Font-family: "Heebo";
font-size: 22px;
font-weight: 700;
color: #0075be;

font-v32 - example text

Font styles:
Font-family: "Heebo";
font-size: 14px;
font-weight: 400;
color: #0075be;

font-v33 - example text

Font styles:
Font-family: "Heebo";
font-size: 24px;
font-weight: 400;
color: #ffffff;

font-v34 - example text

Font styles:
Font-family: "Heebo";
font-size: 14px;
font-weight: 700;
color: #001928;

font-v35 - example text

Font styles:
Font-family: "Heebo";
font-size: 18px;
font-weight: 400;
color: #001928;
font-style: italic;

font-v36 - example text

Font styles:
Font-family: "Heebo";
font-size: 36px;
font-weight: 400;
color: #0075be;

font-v37 - example text

Font styles:
Font-family: "Heebo";
font-size: 36px;
font-weight: 700;
color: #0075be;

font-v38 - example text

Font styles:
Font-family: "Heebo";
font-size: 32px;
font-weight: 700;
color: #001928;

font-v39 - example text

Font styles:
Font-family: "Heebo";
font-size: 18px;
font-weight: 400;
color: #0075be;

font-v40 - example text

Font styles:
Font-family: "Heebo";
font-size: 22px;
font-weight: 400;
color: #0075be;

font-v41 - example text

Font styles:
Font-family: "Heebo";
font-size: 40px;
font-weight: 700;
color: #0075be;

font-v42 - example text

Font styles:
Font-family: "Heebo";
font-size: 28px;
font-weight: 400;
color: #0075be;

font-v43 - example text

Font styles:
Font-family: "Heebo";
font-size: 40px;
font-weight: 700;
color: #fff;

font-v44 - example text

Font styles:
Font-family: "Heebo";
font-size: 24px;
font-weight: 400;
color: #0075be;

font-v45 - example text

Font styles:
Font-family: "Heebo";
font-size: 12px;
font-weight: 400;
color: #0075be;

font-v46 - example text

Font styles:
Font-family: "Heebo";
font-size: 42px;
font-weight: 400;
color: #0075be;

font-v47 - example text

Font styles:
Font-family: "Heebo";
font-size: 24px;
font-weight: 400;
color: #5f5f5f;

font-v48 - example text

Font styles:
Font-family: "Heebo";
font-size: 22px;
font-weight: 700;
color: #001928;

font-v49 - example text

Font styles:
Font-family: "Heebo";
font-size: 16px;
font-weight: 400;
color: #0075be;

font-v50 - example text

Font styles:
Font-family: "Heebo";
font-size: 48px;
font-weight: 400;
color: #0075be;

font-v51 - example text

Font styles:
Font-family: "Heebo";
font-size: 20px;
font-weight: 400;
color: #001928;

font-v52 - example text

Font styles:
Font-family: "Heebo";
font-size: 40px;
font-weight: 700;
color: #5f5f5f;

font-v57 - example text

Font styles:
Font-family: "Heebo";
font-weight: 500;

3. Section container

Container default 1140px:

Custom container width form design:
On resolutions of 1025 to 1200 the container has a padding left/right of 15px
For all devices container has padding top/bottom 30px

Desktop

Max-width:1140px

Tablet

720px

Width:720px

Mobile

100%

Width:100%

Container default 1140px:

Custom container width form design:
On resolutions of 1025 to 1200 the container has a padding left/right of 15px
For all devices container has padding top 30px

Desktop

Max-width:1140px

Tablet

720px

Width:720px

Mobile

100%

Width:100%

Container default 1140px:

Custom container width form design:
On resolutions of 1025 to 1200 the container has a padding left/right of 15px
For all devices container has padding bottom 30px

Desktop

Max-width:1140px

Tablet

720px

Width:720px

Mobile

100%

Width:100%

Container default 1140px:

Custom container width form design:
On resolutions of 1025 to 1200 the container has a padding left/right of 15px
For all devices container has padding top/bottom 0

Desktop

Max-width: 1140px

Tablet

720px

Mobile

100%

Container small 760px:

Custom container width form design:
For all devices container has padding top/bottom 30px

Desktop

Max-width: 760px

resolution >901px

Tablet

720px

resolution <900px

Mobile

100%

resolution <767px

4. Buttons

Global setting

Buttons have a default padding-top of 30px; look in section-> Padding settings.

Font-family: “Heebo”
Font-weight:700;
Font-size:16px
Transition:0.3s;

V1,V2,V3-padding: 15px 25px

V5- 10px 20px; 

Only for page – Site map

Font-family: “Heebo”
Font-weight:700;
Font-size:13px;
Transition:0.3s;

V6,V7,V8-padding: 15px 25px

V10- 10px 20px;

font-family: “Heebo”;
font-size: 13px;
color: #001928;
font-weight: 400;
 

only for module Team Member

only for module Team Member

Font-family: “Heebo Bold”
Font-weight:700;
Font-size:12px;
Transition:0.3s;
Paddings : 10px 15px;

  • font-size: 12px;
  • padding: 10px15px;
  • line-height: 1.5;
  • background-color: transparent;
  • color: #fff;
  • transition: 0.3s all;
  • border-radius: 0;
  • text-transform:none;

Hover

  • background-color: #005587;

If the button is not to go anywhere, please use” #empty-link” and no “#”

Global setting

Default links

Lorem ipsum dolor sit amet, consectetur ; adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Color:#0075be:
Hover:#005587;

Transition: 0.3s

Version II - with underlining

Color:#001928

Hover:underline;

Color hover: #001928

Video button play

to add style and animation to the button for video (see picture below)

The video play button

you must add class bmo-video-button to main module section

Class video button

Image icon (jpg or png format)

World icon
  • height: 100px;
  • width: 100px;
  • object-fit: cover;
  • transition: transform 0.3s;

Hover

  • transform: scale(1.1);

5. Paddings settings

- spacing between headings and paragraphs - 30px; - Heading tags are default padding-bottom: 30px

Global settings

- spacing between paragraphs and buttons - 30px Buttons are default padding-top: 30px

Global settings

- padding inside the "white box" 30px

Global settings

- padding inside the "white box" with multiple column -

Global setting
Global setting
Global setting

-if you need a big padding between paragraphs, use 30px

Global setting

-if you need a small padding between paragraphs, use 10px

Bar - What our employees say about BMO Global Asset Management

-if you need a big padding above paragraphs, use 30px

The instruction how to set padding

-space between box 30px

Global setting

-space between columns 30px

Global settings

-space between columns (vertical) 30px

Global settings

-if, in a mobile or tablet view, the parts of a module start to line up on top of each other, the space should be 30px

-If an element is to have rounded corners, use a value of: 5px (border-radius:5px)

6.Box shadow class :

First example .bmo-shadow class added to inner section

Global setting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Second example .bmo-shadow class added to Column

Global setting

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo Lorem ipsum dolor sit amte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo Lorem ipsum dolor sit amte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo Lorem ipsum dolor sit amte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo Lorem ipsum dolor sit amte.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo Lorem ipsum dolor sit amte Lorem ipsum dolor sit amet, consecipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo Lorem ipsum dolor sit amte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo Lorem ipsum dolor sit amte.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellu dapibus leo Lorem ipsum dolor sit amte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo Lorem ipsum dolor sit amte.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellu dapibus leo Lorem ipsum dolor sit amte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo Lorem ipsum dolor sit amte.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo Lorem ipsum dolor sit amte Lorem ipsum dolor sit amet, consecipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo Lorem ipsum dolor sit amte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo Lorem ipsum dolor sit amte.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo Lorem ipsum dolor sit amte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo Lorem ipsum dolor sit amte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo Lorem ipsum dolor sit amte Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo Lorem ipsum dolor sit amte.

6.1.Box shadow v2 class :

example .bmo-shadow-v2 class added to section

Instruction how to add class for box shadow

6.2.Box shadow - tabs section

to add box shadow to tabs add class bmo-shadow-tabs to section with tab module

How to add box shadow to tabs
How to add box shadow to tabs module

7. Insight paddings example:

blue line – padding:15px – around text

red line – padding: 10px – between text/ title/ read time/ watch time/ button/

Insights example
Insights example 2

8. Box shadow with hover effect example:

Joe Yendell

John Borthwick

Position

Team member personal information

9.White background for section

Add this class for the section.
In tablet view, the background on the right is removed.


10.Clamp class - 3 line

Lipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

10a.Clamp class - 5 line

Lipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

11. Information

  • The list already has a default view
  • Please use media queries,
  • Please don’t use margins with padding for positioning. Use only padding
  • Please remember not to set a custom value in the “image” widget.
Global setting
Global settings

12. Information about paddings when there is a line

  • When there is a module with members or another module with box under the line, the distance between the headinig and the line should be 10px and between the line and the box with a member 15px
Member padding example

 

  • When there is text module or another module under the line, the interval between the headinig and the line should be 10px and between the line and the text 30px
Global settings

30px 

Section – column setting

On the old page the columns have widths of e.g. 66.6666666 % and 33.33333%. Please round up to the whole, that is 70% and 30%.

Column setting example
Global setting

13. Information about popup by button click (how to add)

  • Add class to button bmo-popup-button
  • Select popup [38] in option button
Select popup in button
  • in button attribute add bmo-iframe-link|(here link to iframe src)
Global settings

14. Default table

If there is an empty cell in the table header add text “Empty cell” and set the color to transparent

Global settings

Default table (like on screen) always has:

  • font-size:16px;
  • font-weight: 700  for heading only
  • font-style: normal
  • background is transparent
  • padding inside row is 10px

add class to table: bmo-table

Table with Business Unit Contact - adress and phone number in Germany

If you need italic font style to  table body add class to table: bmo-table-italic

Table with Business Unit Contact - adress and phone number in Germany

If you need italic font style to  first column of table body add class to table: bmo-table-first-italic

The example of table

If you need normal font style and 700 font weight to  first column of table body add class to table: bmo-table-first-normal

Global settings table

To set table column witdth set width in table head.

Table seetings

If on mobile view table is squeese, please add scroll effect.

15. Exceptions to the module

Insight/Market chart/News with CTA

The button is always on the right side under the heading → Please see the screenshot in module 233.

Global setting

Accordion [165 - ]

For all accordions:

-all icons are colored : #001928 (when accordion is open and closed)

Global setting
Global setting

Accordion with chevron

Global setting

In elementor please select icons – chevron

Accordion with plus/minus

  • use the widget: “classic accordion”
  • for SECTION add class: bmo-accordion (after this class the global styles for this module will apply)[also add unique class for module e.g. bmo-acccordion-version3]
  • for column add : “bmo-accordion-column”

Accordion with chevrons

  • use the widget: “classic accordion”
  • for SECTION add class: bmo-accordion (after this class the global styles for this module will apply)[also add unique class for module e.g. bmo-acccordion-version3]
  • for column add : “bmo-accordion-column”
  • to widget add class – “bmo-accordion-chevron”
  • In the “styles” tab, go to the “Toggle Control” tab and for the icon change the position
Global setting
Global setting
bmo-image-in-accordion-center – if you want centered images at any resolution in accordion

bmo-image-in-accordion-center-tablet – if you want to have centered images from 1024 down in accordion

Insights filters [237 - ]

Global settings

If another version with checkbox filters will be created please:

  • use the widget: “checkbox filter”
  • for Section add class: bmo-global-filters bmo-filters-styles (after this class the global styles for this module will apply)[also add unique class for module e.g. bmo-filters-v3]
  • for the Inner Section where the widget is placed add class: bmo-show-checkbox-section
  • for the “Remove filters” button add class: button-reset-filters
Global setting

[232] Latest insights with Load More

Insights load more example

to hide buttons Read more in insight box, add class to Section: bmo-insights-hide-button

to hide Date in insight box, add class to Section: bmo-display-date
There is an example on this page https://www.bmogam.com/se-en/institutional/institutional-capabilities/responsible-investing/

to hide Description in insight box, add class to Section: bmo-insight-hide-description

to hide Read Time in insight box, add class to Section: bmo-display-terms-button

to hide Terms button in insight box, add class to Section: bmo-insight-hide-read-time

[241]Charts  with Load More

to hide buttons Read more in charts box, add class to Section: bmo-chart-hide-button

to hide Date in chart box, add class to Section: bmo-display-date

to hide Terms button in insight box, add class to Section: bmo-display-terms-button

to hide Description in chart box, add class to Section: bmo-chart-hide-description

to hide Read Time in chart box, add class to Section: bmo-chart-hide-read-time

[243] News

to hide Date in news , add class to Section: bmo-display-date
to hide Terms button in insight box, add class to Section: bmo-display-terms-button

to hide Description in news, add class to Section: bmo-news-hide-description

[166] Feed Pages

to hide Description in pages feed, add class to Section: bmo-page-hide-description

Quick links - styles [107 - ]

Quick links example

If another version Quick links will be created please:

  • use the widget: “icon-list”
  • for Section add class: bmo-quick-links-styles (after this class the global styles for this module will apply)[also add unique class for module e.g. bmo-quick-links-v2]
  • in module icon-list, delete default icon-size and change alignment to right (global settings will be loaded)
Quick links styles example
If you need to use modules with quick links but without icon and want to align text to the left add class: bmo-quick-links-without-icon to existed classes in module.
Quick links without icons

If you want to use modules with quick links where the icon only appears when hovering over the item, please add a class to the section:

bmo-quick-link-transparent-icon

Text boxes v5 [103]

If this module is used SVG as an image add class bmo-text-boxes-v5-icon on a section to make the icon not cover

Team members - [ 201 - ]

Small image members style

Global setting example

If you need add style from image you should

  • add class: bmo-team-member-title-small to listing grid widget or section (with clicable only email )

If you need add style for only button view bio u must add class (look at screen):

  • bmo-team-member-position-and-button
Small members button

Bio title [201]

Hide button “read bio”

Add to section class –
bmo-bio-title-hide-button

Team members - [ 201 - ]

Big image members with contact info style

The team member module

If you need add style from image you should add class

bmo-member-big-with-contact to listing grid

Team members carousel- [ 202 - ]

Module [202] Team member carousel version 1:

  • Different colour for the arrow
  • padding in box: Top/bottom 30px, Left/right 15px
  • Padding for box with slider 1025px-1265px – right/left 45px
  • Padding for box with slider 768px-850px – right/left 30px
Global setting

For section in module (not in listing item) please add class: bmo-team-member-carousel 
and use listing : Team members carousel – listing item
This class add style for:

  • dots,
  • arrow,
  • paddings for carousel

    However, several values must be entered in the elementor -> module 202
Global setting

If you need to hide a short position in module 202 or 203, add to the section class: “bmo-short-position-none

If you need to show a description in module 202 or 203, add to the section class: “bmo-team-member-carousel-description-show

Wrapped text box with CTA - [ 80 - ]

Global styles – right white box with transparent image or left white box with transparent image

1. Add to main section class: bmo-white-box-styles

Main section example

2. add to column (in inner section) class: bmo-inner-section-white-column (this class add max-width: 600px)

Inner column example

2a. add to inner section class: bmo-right-white-box-inner-section (class add image transparent box on the right side)

Inner section example

2b. add to inner section class: bmo-left-white-box-inner-section (class add image transparent box on the left side)

Inner section example 2

Icon grid [39 - ]

 

– for all Icon-Grid modules there’s global class used for styling: bmo-icon-grid

 

Global settings icon grid example

If you need Slider with content from template:

Slider with tempale content

Add class 

bmo-slider-with-content-from-template
 
to widget 
 
Advanced Timeline
Global settings

If you need style (typografy and 100% width on mobil) to tabs

Global settings tabs

Add class 

.bmo-tabs
 
to the main section where the tapes are

Capabilities [41-49]

If another module with Capabilities will be created please:
– to icon/title/description use widget: Icon-box
– add to Section global class: bmo-capabilities-global-styles (styles for title and description in icon-box widget)

Capabilities example

Counter [143]

If another module with counter will be created please:
– for icon/title/description use widget: Icon-box
– add to Section global class: bmo-counter-global-styles (styles for prefix/suffix symbols)

Counter example

Image [89]

Default image has size min-height:750px
If you need different size add class to the section:

  • bmo-image-medium: height 400px
  • bmo-image-small: height 250px
Global setting

Default image has size min-height:750px
If you need different size add class to the widget “image”:

  • bmo-image-auto: max-height 200px

[93] bmo-image-and-paragraph-v2

The image in this module is set to max:400px in the css
If you need higher height please add the class: bmo-image-and-paragraph-v2-img-default to the section. Image assumes min:500px height

Position member horizontal in Dynamic Author

if you need dynamic authors to line up next to each other horizontally on desktop resolution, and vertically on mobile resolution please add this class to section:

bmo-dynamic-authors-horizontal

Global settings

Information about icon boxes on the pages

As already mentioned, no links on the icons. These are viewed as hidden redundant links, and since the actual description of it comes in the text after it, that is where the link should go (i.e. if the text says “Subscribe to our insights”, they know the purpose of the link).

The coding that places the module hovering over the banner that precedes it should be removed; it shouldn’t cover up portions of the banner. The problem hits two-fold:

If this is a rotating banner (which, those itself are AODA-problematic), it covers up the dots that can be used to navigate the rotation

It also has the potential to cover up the CTA button at the bottom of the banner, rotating or otherwise

How it looks on the old page:

Icon boxes old page

How it should look on the new page:

Introducing BMO's innovation ETF's

SDG pages - different color of Sticky sub nav on mobile - #F5F6F7;

add to section class .bmo-different-color-on-mobile-sticky.

Sticky Sub Nav - v1 - Styles of module v2 in v1 mobile version

add to section class .bmo-different-color-on-mobile-sticky-v1

Border radius add custom img

.bmo-border-radius

Instruction how to set the class to the widget image

Height of map box

 bmo-map-fit-content – add to section

Instruction how to set map height

[211] Change column posotion

bmo-team-members-column-reverse add to the section

Change column position

[105] Squeze images

bmo-awards-horizontal-auto-width add to the section

Changing of image

299 Module with two circles in banner

bmo-circle-banner-opacity add to section to get some transparent in circles