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;

[Sid_Takali]

Hi @tomaslindev 

The main menu and header form a header menu are rendering from associated theme of a portal. I would suggest you to clone the OOTB "EC Theme"  and replace the OOTB code with below code in cloned theme.

HTML Code

<a href="#/favorites" aria-label="My Favorites">
    <i class="fa fa-heart" aria-hidden="true"></i>
</a>

CSS Code

.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 */
}

Regards,

Sid

[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 · 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