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.