Add callout CSS to “Formats” section of TinyMCE

Requested by: Jamie Edwards

Status: Completed

Change to something that already exists?: Yes
Requires a new CMS Component?: No
Requires New Functionality?: Yes
Estimated Completion Date: Completed April 2021

Description

Each time we setup a single line callout, we have to add some custom CSS to make it look right. I want to add the required CSS to the Formats dropdown in TinyMCE. Something like this:

.callout{
text-align: center;
margin-bottom: 0;
}

[Update: Feasible – ‘Single Line Callout’. Some exploration with UR has happened for potential of additional ‘alerts’ formats. -SQ]

[Update 2: Low priority, low value. ETA updated to Q1 2020 -SQ]

[Update 3: RL met with IT web team to review new CLF design elements. Updated date to Q2 due to COVID and various UBCO CMS outages/interruptions in March 2020 ]

[Update 4: No wells. New ‘Mega box’ component will combine other enhancement requests:

[Update 5: JE developing new alerts/’Mega Box’ component ]
[Update 6: This is a separate enhancement and will be worked on separate from the Mega, Shadow, and Alert boxes]

Completion Notes:

Completed April 9, 2021

This functionality has been added. To use this feature:

  • Create a new page section, select the dark background with white text option
  • Add single column with standard editor.
  • Add a single line of text
  • Highlight the text
  • Click the “Formats” button and select Text Styles and “Callout Align Center & Margin Fix”

For further instructions please refer to this article on the CMS website – https://cms.ok.ubc.ca/cms-guide/call-out


Ticket Number: INC2207857

Media (Screenshots, etc.)