Skip to main content

Hi Docebo Community,

 

Great seeing many of you at the conference this week. I tried out that great tip of using AI to help write CSS code, but I am getting stuck.

On the MyTeam page there are two elements of the UI that really are just cluttering up the interface, and I would like to remove them.

  • Expired Certifications
  • Overdue courses.

Please see screenshot below for reference.

 

On the Expired Certifications, this what i am seeing when i “Inspect” with DevTools

 

<section class="team-member-card__kpi kpi-wrapper"><a class="kpi-counter ng-star-inserted"><span class="kpi-counter__value"> 0 </span><span class="kpi-counter__label"> Expired certifications </span></a><!----><!----><span class="kpi-divider ng-star-inserted"></span><!----><a class="kpi-counter ng-star-inserted"><span class="kpi-counter__label"> Overdue courses </span><span class="kpi-counter__value"> 0 </span></a><!----><!----><!----><!----><!----><!----></section>

 

i’ve tried various combinations of CSS hiding these sections & classes, saved, reloaded - and these UI elements are still showing.

 

I must be missing something pretty basic.

 

 

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

 

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

 

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!!

Reply


Terms & ConditionsCookie settings