Customize the Infobox Widget

Learn how to customize the Infobox widget with advanced custom CSS.

Employee App
Staffbase Intranet

Widgets are the building blocks of your Pages and News. In this tutorial, we will take you through how to customize the Infobox widget added to Pages and News with custom CSS.

On completing this tutorial, you will be familiar with the CSS selectors required to customize the Infobox widget.

Using custom CSS can result in undesired formatting or styling. Use custom CSS only if you have experience working with CSS, and always double-check what your app looks like after applying your styles.

  1. In the Studio, navigate to Settings > App and Intranet.

  2. Under Custom CSS, click and hold Show Editor until the editor opens.

  3. In the editor, copy and paste the CSS snippet.

div[type="info"].ui-commons__infobox-widget,
div[type="warning"].ui-commons__infobox-widget,
div[type="idea"].ui-commons__infobox-widget {
    border-left: 10px solid #66ccff;
}


div[type="warning"].ui-commons__infobox-widget {
    border-left: 10px solid  #FFCC70;
    background-image: linear-gradient(43deg, #4158D0 20%, #C850C0 80%, #FFCC70 100%);
    color: #fff !important;
}


div[type="warning"].ui-commons__infobox-widget  .ui-commons__infobox-widget__content{
    color: #fff !important;
}


div[type="warning"].ui-commons__infobox-widget svg{
    fill: #fff;
}


.infobox-widget .ui-commons__infobox-widget__title{
    font-size: 20px;
    line-height: 30px;
}


.infobox-widget,
.ui-commons__infobox-widget{
    border-radius: 8px !important;
}
  1. Click Save.

You have customized the Infobox widget of your Staffbase platform.