How can we change the color of heart(my favorites) in Employee Center(ESC) to other color.

Shiva Mothkur
Tera Contributor

‎03-23-2023 04:51 AM

Hi All,

How can we change the color of heart(My Favorites) to blue from red in Employee Center ? Your help is appreciated.

 

Preview file
7 KB
0 Helpfuls
  • 1,303 Views
3 REPLIES 3

Community Alums
Not applicable

‎03-23-2023 05:39 AM

Hi @Shiva Mothkur ,

You can change the favourite icon color by navigating to Service Portal Config (sp_config) page --> Portals --> Employee Center, then selecting Employee Center from the map and updating the Quick Start Config by replacing the color:

 

fa-icon:

SandeepDutta_1-1679575131413.png

 

 

0 Helpfuls

Shiva Mothkur
Tera Contributor
In response to Community Alums

‎03-23-2023 08:04 AM

Hi Sandeep,

Given the below script in Quick start config but it is not working 😞 .

[
{"favorite":
{"icon_checked":"fa-heart",
"icon_unchecked":"fa-heart-o",
"color": "blue"}
}
]

I want to change color to blue(#0077C8). How can I change the color to #0077C8.

 

Shiva.

 

0 Helpfuls

Pooja_Patil
ServiceNow Employee
ServiceNow Employee

‎03-23-2023 04:11 PM

@Shiva Mothkur heart icon takes color from $primary variable in your branding theme for the portal

Service Portal > Service Portal Configuration > Branding Editor

 

Pooja_Patil_2-1679612465735.png

You can use one of the variables in Quick start config

[{"favorite":{"icon_checked":"fa-heart","icon_unchecked":"fa-heart-o","color":"primary"}}]
or
[{"favorite":{"icon_checked":"fa-heart","icon_unchecked":"fa-heart-o","color":"default"}}]
or
[{"favorite":{"icon_checked":"fa-heart","icon_unchecked":"fa-heart-o","color":"warning"}}]
or
[{"favorite":{"icon_checked":"fa-heart","icon_unchecked":"fa-heart-o","color":"info"}}]
or
[{"favorite":{"icon_checked":"fa-heart","icon_unchecked":"fa-heart-o","color":"success"}}]
or
[{"favorite":{"icon_checked":"fa-heart","icon_unchecked":"fa-heart-o","color":"danger"}}]

I would strongly suggest to use variable from the branding theme.

 

If you cannot use these variables and still want to override heart icon color, you have to set css in ec_favorite widget

.favorite-primary {
  color: #0077C8;
}

 

 

~BR

Pooja Patil

Please mark this as helpful and accepted solution if applicable.

0 Helpfuls