Skip to content

Megapanels Full Width Rows

Sarah Carney edited this page Jan 9, 2019 · 1 revision

Classes have been added to Suitcase Interim to allow Megapanels rows to have full width backgrounds. The classes are added to the Panel page's general settings, and the colors can be added with CSS.

1. Add classes

Go to the General settings tab on the Panel page.

Add the following classes to the Add body CSS classes field. megapanels_full-width megapanels_content-contained

Screenshot of the General settings tab.

2. Add CSS for colored background

In the General settings tab there is an additional field for CSS Code. Target the desired megapanels row with its class.

.megapanels-wrapper_top { background: #cc0000; } to make the top row have a red background. .megapanels-wrapper_middle { background: #eeeeee; } to make the middle row a light grey background.

Screenshot of how to add the custom css for backgrounds.

Really, any CSS can be added to this area, but limit it to just what will affect this panel page. Be sure to make sure your background color provides sufficient contrast to the text.