One-Third Row enhancement

You can use the One-Third Row enhancement to provide an alternative way of displaying two widgets in the same row. With this enhancement, you can have a widget occupy 75% of the available page width while the other widget occupies the remaining 25% of the page's width. When configuring a page, you can have the row be either 75%/25% or 25%/75%. 

In addition to the classes that determine how widgets will appear in a row, this enhancement also comes with a class that can be used to adds a semi-transparent background widgets.

Sections in this article: 

• Considerations
• Set up the enhancement
• Configure the enhancement
• Turn the enhancement on
• Turn the enhancement off
• Use the enhancement

Considerations

• Visibility: The effects of this enhancement are not visible when editing a page.
• Widget compatibility: Some widgets do not display well in a narrow column.
• Screen width: At smaller screen widths, these widgets will be stacked. In this orientation the widget that was on the left will now be above the other widget.

Set up the enhancement

To set up the enhancement for the first time, follow the steps below. To request this enhancement to be set up in your digital workplace, contact our Igloo team.

Add enhancement code to the header

Add the following code to the header of your digital workplace:

<!-- One Third Row enhancement begins -->
<link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/OneThirdRowClasses.css" />
<!-- One Third Row enhancement ends -->

Configure the enhancement

The One-Third Row enhancement uses three classes to affect a page row and the widgets within it. 

The row-right-one-third class will set the right hand column at 1/3 of the page row's width, and the left hand and center column will occupy the remaining 2/3.

The row-left-one-third class will set the right hand column at 2/3 of the page row's width, and the left hand and center column will occupy the remaining 1/3.

Additionally, the widget class of  semi-transparent will add a white semi-transparent background to the widget.

To configure the page row and widgets: 

1. Navigate to the page you want to edit. 
2. Select Actions and then Edit. 
3. Place your two widgets as desired in a row with a two-column layout. See Placing and setting up a widget.
4. Select the </> icon in the top right-hand corner of the row.
5. Add the class row-right-one-third  or row-left-one-third, and select Done. See Applying custom CSS to page rows for more information.
6. (Optional) If needed, you can add a transparent background to one of the widgets:
   1. Select Edit on the widget.
   2. In the Appearance tab, in Class, enter the following:  semi-transparent.
   3. Select Update. 
7. At the bottom of the page, select Publish Page. 

Turn the enhancement on

Once the code has been placed, the enhancement is ready to be used. If you have already turned the enhancement off following the steps in the Turn the enhancement off section below, you can remove <!-- before and --> after the middle line and save the changes to the header. 

Turn the enhancement off

To turn the enhancement off, you can remove the code entirely or add <!-- before and --> after the middle line, as shown below, and save the changes to the header. 

<!-- One Third Row enhancement begins -->
<link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/OneThirdRowClasses.css" />
<!-- One Third Row enhancement ends -->

Changes to:

<!-- One Third Row enhancement begins -->
<!-- <link rel="stylesheet" type="text/css" href="https://igloo-prod.azureedge.net/cmedia/enhancements/OneThirdRowClasses.css" /> -->
<!-- One Third Row enhancement ends -->

Use the enhancement

Members will view the widgets with the one-third row positioning.