Page Menu

UMass Chan CMS Blog

Generic Block: adding background colors and images

Tuesday, February 20, 2018

By: Leslie Rutter

Expand the accrodion items at the bottom of this post which explai how to add a CSS class names in the block's setting tab to apply set color combinations or layouts. You can set the background color of different blocks. Or using a generic block, you can create an effect of overlaying the text on top of the image.

Examples:

Adding background colors to blocks

Edit the block
Click on the Settings tab
Copy and paste the appropriate text, from below
- add to the property field: “CSS class name(s)..”

Background colored box with colored headers
CSS class name to copy	With heading	Without heading
box box-bg blue
box box-bg blue dark
box box-bg gray
box box-bg gray dark

Overlay Text on top of Image

Create a new block: Generic Block
Click on the Content Tab
- [optional] Add a Title if you want one
- Select your image
- to set the alignment of your text over the image
  - set the property Image Alignment to: left, right or center
  - leaving set to none will pick up default of “left”
- [optional] add a Description
- [optional] add Link Text and Link
Click on the settings tab
- Copy and paste the appropriate text, from below, into the property “CSS class name(s)..”

Setting the text on the image overlay
CSS class name to copy	How the text appears
On the Settings Tab add to the propertyCSS class name(s): image-overlay bottom horiz‑txt‑exclude On the Content Tab set the property Image Alignment: left
On the Settings Tab add to the propertyCSS class name(s): image-overlay bottom horiz‑txt‑exclude On the Content Tab set the property Image Alignment: right
On the Settings Tab add to the propertyCSS class name(s): image-overlay top horiz‑txt‑exclude On the Content Tab set the property Image Alignment: left
On the Settings Tab add to the propertyCSS class name(s): image-overlay top horiz‑txt‑exclude On the Content Tab set the property Image Alignment: right