Employee Center Header

[tomaslindev]

Hello good everyone,
I have a requirement related to employee center; They ask me to change the "My favorites" section for a heart icon.

How would I have to modify the html to meet the requirement. 
All the best

.

[tomaslindev · Accepted solution]

Hi @Sid_Takali thanks for answering me,

I have added the code and it does not apply the changes, perhaps I have an error when placing them.

All the best

 

[tomaslindev · Accepted solution]

Hello @Sid_Takali , thanks for answering me
I have added the code and it does not apply the changes, perhaps I have an error when placing them.
All the best.

HTML:

 <li class="gt-menu-item" role="presentation" ng-if="data.isFavoritesEnabled">
               			<a href="#/favorites" aria-label="My Favorites">
    						<i class="fa fa-heart" aria-hidden="true"></i>
						</a>
                        

CSS:

 
  .fa-heart {
    color: #ff0000; /* Adjust the color as needed */
    font-size: 1.5em; /* Adjust the size as needed */
    margin-right: 10px; /* Adjust the spacing as needed */
}
  
  

  .label-as-badge {
    font-size: 1.2rem;
    position: relative;
    top: -$sp-space--sm;
    left: -$sp-space--xxs;
    padding: 1px 5px;
    margin-left: 0;

[tomaslindev]

Hi @Sid_Takali , 

First of all, thanks for the help, in my case I don't have the option to clone the theme (or I don't see that option); On the other hand, are the parts of the code that I have to replace found in the header associated with the theme?
All the best,

[Kashmira Surana]

Hello @tomaslindev 

We experienced an instance upgrade that modified the “My Favorites” section, replacing the heart icon with text. To restore the heart icon, follow these steps to modify the Employee Center Header widget:

Steps to Replace “My Favorites” Text with Heart Icon

1. Navigate to Headers & Footers:

   • Go to Service Portal in the filter navigator.

   • Select Headers & Footers.

2. Locate the Employee Center Header Widget:

   • Search for Employee Center Header and open the record.

3. Find the Relevant Code:

   • Look for the comment <!-- Header Navbar -->. Below this comment, locate the following code for “My Favorites”:

   • <li class="gt-menu-item" role="presentation" ng-if="data.isFavoritesEnabled">
     <a href="?id=favorites_list" id="favorites" aria-label="${My favorites}" role="menuitem">
     <span ng-bind-html="'${My Favorites}'" aria-hidden="true"></span>
     </a>
     </li>

4. Modify the Span Tag:

   • In the above code, replace the existing span code with the following:

   •  <span aria-hidden="true"><i class="fa fa-heart"></i></span>

5. Save and Refresh:

   • Save your changes and refresh the Employee Service Center (ESC). Note that a widget error might appear initially.

6. Resolve the Widget Error:

   • Navigate to System Applications > Application Restricted Caller Access.

   • Locate the invalidated record for the script include “todoPageUtils” in Employee Center Core.

   • Change the status to Allowed.

7. Final Check:

   • Refresh the ESC. The error will disappear, and the “My Favorites” section will display the heart icon.

Please find the attached screenshot for your reference.

@tomaslindev Please mark my answer as accepted solution and helpful. If it is works for you.

Thank you.

[abdul azeem]

Please add this to your code to make changes via css

#favorites > span {
display: none;
}

#favorites::before {
content: '\f004';
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}