"View All" link to be consistent across all widgets

[kandulek]

Hi All,

Does anyone know why "View All" link looks different across different widgets?

For example, by default, the "View All" link in the "Upcoming Events" widget looks like this:

In "My favorites" widget it has additionally a chevron next to it and different colour:

Is there a way to make the "View all" link consistent across widgets by using the same font, colour and removing the additional chevron?

Thank you in advance for any suggestions!

[Rafael Batistot]

Hi @kandulek 

In this case you need to open the widget, in widget editor, open the css and change directly 

[musislam]

Hi @kandulek,

The difference comes from the widgets themselves. "My favorites" (widget your_favorites) comes from the Employee Center app, and its HTML template includes a chevron icon (fa-chevron-right) inside the link. Its widget CSS also makes the link bold (600) and uses $link-color with extra padding. "Upcoming Events (CD)" comes from the Content Publishing app and has its own simpler style, so they don't match by default.

I'd avoid editing or cloning the OOB widget. A theme-level CSS override is enough:

1. Go to Service Portal > Themes and open your portal's theme (e.g. Employee Center).
2. In the CSS Includes related list, add a new CSS include that points to a new Style Sheet (sp_css).
3. Add:

/* My favorites - match the plain "View all" link */
.your-favorites-container .favorite-footer .view-all-container .view-all .fa-chevron-right {
  display: none !important;
}
.your-favorites-container .favorite-footer .view-all-container .view-all {
  color: inherit !important;      /* or your brand link colour */
  font-weight: 400 !important;
  padding: 0 !important;
}
/* optional - left-align like Upcoming Events */
.your-favorites-container .favorite-footer .view-all-container {
  text-align: left !important;
}

your-favorites-container: the widget's outer box. Starting the selector here limits the change to the My favorites widget, so other "View all" links on the portal aren't affected.
.favorite-footer, .view-all-container, .view-all: the footer, the wrapper around the link, and the link itself.
.fa-chevron-right: the chevron icon.

!important is needed because Service Portal adds the widget's ID in front of the widget's own CSS, which makes it outrank theme CSS. For the exact font and colour, inspect the Upcoming Events "View all" link in your browser's dev tools and copy those values into the rule above. I tested this on my PDI: the chevron is gone and the link matches the plain style.

If that works for you, mind marking it as the recommended solution? Helps me support these better for the community.