CSS for My Team page and hiding "Expired Certifications" and "Overdue Courses" sections?

Hi there,

Give the following CSS a go

/* Hide Expired Certifications and Overdue courses on Team Member Card START */
mng-team-member-card .kpi-wrapper {
    display: none!important
}
/* Hide Expired Certifications and Overdue courses on Team Member Card END */

/* Hide Expired Certifications and Overdue courses on Team Member Card START */
mng-team-member-card .kpi-wrapper {
    display: none!important
}
/* Hide Expired Certifications and Overdue courses on Team Member Card END */

Thank you thank you thank you!  That worked.

Any idea if the three dots “...” for the “Actions” button can be expanded on the UI?  It would be helpful for our managers to see the word “Actions” there instead of just 3 dots.

When i inspect the “...” in DevTools this is what i get.

<button uiripple="" class="ui-ripple" type="button" id="ui-button-icon-26" aria-haspopup="true" aria-expanded="false" aria-disabled="false" data-dcb-ui-aria-label="Actions" aria-label="Actions" style="cursor: var(--ui-button-icon-cursor);" dcb-ui-keyboard-focusable-visible="true" tabindex="0"><!----><ui-icon data-dcb-ui-version="1" size="sm" class="ui-icon-size-sm dcb-ui-icon ui-icon ng-star-inserted"><span class="color-neutral" data-dcb-ui-screen-reader-visible="true" aria-hidden="true"><svg viewBox="0 0 24 24" role="presentation" focusable="false"><g xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-icon-name="more-horizontal" fill-rule="evenodd"><path d="M5.9921875,9.984375 C6.53906523,9.984375 7.00781055,10.1796855 7.3984375,10.5703125 C7.78906445,10.9609395 7.984375,11.4374972 7.984375,12 C7.984375,12.5625028 7.78906445,13.0390605 7.3984375,13.4296875 C7.00781055,13.8203145 6.53906523,14.015625 5.9921875,14.015625 C5.44530977,14.015625 4.97656445,13.8203145 4.5859375,13.4296875 C4.19531055,13.0390605 4,12.5625028 4,12 C4,11.4374972 4.19531055,10.9609395 4.5859375,10.5703125 C4.97656445,10.1796855 5.44530977,9.984375 5.9921875,9.984375 Z M17.9921875,9.984375 C18.5390652,9.984375 19.0078105,10.1796855 19.3984375,10.5703125 C19.7890645,10.9609395 19.984375,11.4374972 19.984375,12 C19.984375,12.5625028 19.7890645,13.0390605 19.3984375,13.4296875 C19.0078105,13.8203145 18.5390652,14.015625 17.9921875,14.015625 C17.4453098,14.015625 16.9765645,13.8203145 16.5859375,13.4296875 C16.1953105,13.0390605 16,12.5625028 16,12 C16,11.4374972 16.1953105,10.9609395 16.5859375,10.5703125 C16.9765645,10.1796855 17.4453098,9.984375 17.9921875,9.984375 Z M11.9921875,9.984375 C12.5390652,9.984375 13.0078105,10.1796855 13.3984375,10.5703125 C13.7890645,10.9609395 13.984375,11.4374972 13.984375,12 C13.984375,12.5625028 13.7890645,13.0390605 13.3984375,13.4296875 C13.0078105,13.8203145 12.5390652,14.015625 11.9921875,14.015625 C11.4453098,14.015625 10.9765645,13.8203145 10.5859375,13.4296875 C10.1953105,13.0390605 10,12.5625028 10,12 C10,11.4374972 10.1953105,10.9609395 10.5859375,10.5703125 C10.9765645,10.1796855 11.4453098,9.984375 11.9921875,9.984375 Z"></path></g></svg></span></ui-icon><!----></button>

Hi,

Not a great deal can be done on the ellipsis, only workaround I have is adding text to highlight this maybe
 

Have a go with the following CSS

/* Add text to Team Manager Card START */
mng-team-member-card .dcb-ui-card-footer::before {
    content: "Click the ellipsis for more";
    display: block;
    font-weight: bold;
    color: #007bff;
}
/* Add text to Team Manager Card END */

@DPatel thank you so much. Appreciate the help big time!!

Is it possible to only hide the “Expired Certifications” portion?

​@ariel.zimmerman 

Try the following CSS.

/* Hide the "Expired certifications" section */
mng-team-member-card .team-member-card__kpi .kpi-counter:nth-child(1) {
    display: none !important;
}

/* Hide the divider following the "Expired certifications" */
mng-team-member-card .team-member-card__kpi .kpi-divider {
    display: none!important
}

What the following CSS does is hide the first part shown on the card and then the divider. Please note that if this area updates in future, this CSS may begin to hide something different so be wary of any UI changes that occur on the platform.

/* Hide the "Expired certifications" section */
mng-team-member-card .team-member-card__kpi .kpi-counter:nth-child(1) {
    display: none !important;
}

/* Hide the divider following the "Expired certifications" */
mng-team-member-card .team-member-card__kpi .kpi-divider {
    display: none!important
}

Thank you!