Site Optimization CSS Customization Examples

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.