The look and feel of Site Optimization can be customized with CSS as described here. This article provides CSS code examples of common elements that are customized. 

• Overview: Common elements to customize
• Customizing the Closed Tab Background Color
• Customizing the Closed Tab Font Size
• Customizing the Closed Tab Font Color
• Customizing the Closed Tab Font Style
• Customizing the Expanded Tab Background Color
• Customizing the Expanded Tab Font Size
• Customizing the Expanded Tab Font Color
• Customizing the Expanded Tab Font Style

Overview: Common elements to customize

Closed Tab:	Closed Tab HTML Code:

Expanded Side Tab:	Expanded Tab HTML Code:

Customizing the Closed Tab Background Color

Example Code:

.recommended-block RightAlignedBlock light closed {
background-color: rgb(113, 247, 250); 
opacity: 1;
}

Before:	After:

Customizing the Closed Tab Font Size

Example Code:

#db-ai-personalization-container > div > div.recommended-block_closed__content.mrg-btm > p {
font-size: 10px;
}

Before:	After:

Customizing the Closed Tab Font Style

Example Code:

#db-ai-personalization-container > div > div.recommended-block_closed__content.mrg-btm > p {
font-style: italic;
}

Before:	After:

Customizing the Closed Tab Font Color

Example Code:

#db-ai-personalization-container > div > div.recommended-block_closed__content.mrg-btm > p {
color: rgb(23, 230, 100);
}

Before:	After:

Customizing the Expanded Tab Background Color

Example Code:

.recommended-block RightAlignedBlock light opened{
background-color: rgb(300, 200, 150); 
opacity: 1;
}

Before:	After:

Customizing the Expanded Tab Font Size 

Example Code:

.recommended-block__list__recommended-item__title{
font-size:20px;
}

Before:	After:

Customizing the Expanded Tab Font Color

Example Code:

.recommended-block__list__recommended-item__title{
color: rgb(383, 187, 98);
}

Before:	After:

Customizing the Expanded Tab Font Style

Example Code:

.recommended-block__list__recommended-item__title{
font-style:italic
}

Before:	After:

Using a Custom Font Style

Example Code:

#db-ai-personalization-container .recommended-block { background-color: rgb(3, 46, 97) !important; font-family: CUSTOMSans !important; }

Note: this code will affect text in expanded box as well.

Before	After

For more information on how to navigate to, and update the CSS customizations, please visit this article.