Articles in this section

Site Optimization CSS Customization Examples

  • Updated

 

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

Closed Tab: Closed Tab HTML Code:
Screen_Shot_2018-01-02_at_3.49.00_PM.png Screen_Shot_2018-01-02_at_3.43.05_PM.png 

 

Expanded Side Tab:

 Expanded Tab HTML Code:
Screen_Shot_2018-01-02_at_3.54.35_PM.png  Screen_Shot_2018-01-02_at_3.56.15_PM.png

 

Customizing the Closed Tab Background Color

Example Code:

.recommended-block RightAlignedBlock light closed {
background-color: rgb(113, 247, 250); 
opacity: 1;
}
Before: After:
Screen_Shot_2018-01-02_at_3.49.00_PM.png Screen_Shot_2018-01-02_at_4.14.03_PM.png

 

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:
Screen_Shot_2018-01-02_at_3.49.00_PM.png Screen_Shot_2018-01-02_at_4.16.52_PM.png

 

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:
Screen_Shot_2018-01-02_at_3.49.00_PM.png Screen_Shot_2018-01-02_at_4.17.59_PM.png

 

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:
Screen_Shot_2018-01-02_at_3.49.00_PM.png Screen_Shot_2018-01-02_at_4.19.38_PM.png

 

Customizing the Expanded Tab Background Color

Example Code:

.recommended-block RightAlignedBlock light opened{
background-color: rgb(300, 200, 150); 
opacity: 1;
}
Before: After:
Screen_Shot_2018-01-02_at_3.54.35_PM.png Screen_Shot_2018-01-02_at_4.22.09_PM.png

 

Customizing the Expanded Tab Font Size 

Example Code:

.recommended-block__list__recommended-item__title{
font-size:20px;
}
Before: After:
Screen_Shot_2018-01-02_at_3.54.35_PM.png Screen_Shot_2018-01-02_at_4.25.51_PM.png

 

Customizing the Expanded Tab Font Color

Example Code:

.recommended-block__list__recommended-item__title{
color: rgb(383, 187, 98);
}
Before: After:
Screen_Shot_2018-01-02_at_3.54.35_PM.png Screen_Shot_2018-01-02_at_4.32.04_PM.png

 

Customizing the Expanded Tab Font Style

Example Code:

.recommended-block__list__recommended-item__title{
font-style:italic
}
Before: After:
Screen_Shot_2018-01-02_at_3.54.35_PM.png Screen_Shot_2018-01-02_at_4.33.20_PM.png

 

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
Screen_Shot_2018-03-29_at_9.59.27_AM.png

Screen_Shot_2018-03-29_at_9.59.46_AM.png

 
 


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

  

Related articles