Hide Gamification Icon using CSS

  • 26 October 2021
  • 10 replies
  • 274 views

Userlevel 7
Badge +7

Here’s a quick way to hide the gamification icon at the top level or by sib-domain:

.internal-header-gamification {

    visibility: hidden;

    width: 0.1;

    padding: 0;

}


10 replies

Userlevel 1
Badge

Thanks for the Reply. Where I can find the CSS. I am not able to do. Please help.

Userlevel 7
Badge +7

@Sasikumaar do you mean where can you find the spot where you need to enter this code? If yes, it depends whether you want to hide at root level or at the sub domain level. 

Root domain changes:

Admin menu > Configure Branding & Look > Custom Styles

 

Sub domain changes (*changed inly for that sub domain) - for this to work only for the sub domain, DO NOT add at the root level:

Extended Enterprise > Manage > Choose sub domain to edit > click the ‘gear’ > select Configure Banding & Look (at the top right)

Userlevel 1
Badge

Hi Irnlab, 

It’s working fine. Thanks for the support

Regards,

Sasikumaar

Userlevel 4

Thanks for this @lrnlab :) We’re just starting our game build, so if you have any other cool css, I’d be grateful.

SCENARIO: We have a subdomain for external learners and plan to segment/hide gamification for those people while making it visible to only our employees. In our case, we will go into the subdomain and add the lines labeled EXTERNAL.

CODE: I found a couple more places the game features need to be hidden from though so thought I would drop this code in here. There’s also an extra smidge of code below to emphasize the trophy in the top nav for INTERNAL. (We’ll use this for kick-off to draw the eye.)

 

* ----HIDE Top Nav Trophy from EXTERNAL users by lrnlab--- */

.internal-header-gamification {

visibility: hidden;

width: 0.1;

padding: 0;

}

/* --- HIDE My Activities sidebar Badges tab EXTERNAL--- */

.myactivities-sidebar > div > div.sidebar > ul > li:nth-child(7) {visibility: hiddendisplay: none;}

 

/* --- HIDE trophy icon next to course launcher details EXTERNAL--- */

.fa.fa-trophy.icon-type.text-grey-mid-permanent.trophy-cell {

    visibility: hidden;

}

/* --- Gold Trophy Emphasis for INTERNAL --- */

#ui-button-icon-5 {

    background-color: #ffdd00;

}

 

Userlevel 7
Badge +7

Thx @susan2000 

Userlevel 2

ehy @lrnlab how this code could work if a set of user have to see the icon and the gamification is active for them, and in the other hand, ither users shouls NOT see the icon?

many thanks 😎

Userlevel 7
Badge +7

ehy @lrnlab how this code could work if a set of user have to see the icon and the gamification is active for them, and in the other hand, ither users shouls NOT see the icon?

many thanks 😎

you can apply it at the sub domain level if you are an EE client however if all your users are in a single domain, you cannot hide this selectively using CSS...not quite sure how you would even do that...

Userlevel 2

ehy @lrnlab how this code could work if a set of user have to see the icon and the gamification is active for them, and in the other hand, ither users shouls NOT see the icon?

many thanks 😎

you can apply it at the sub domain level if you are an EE client however if all your users are in a single domain, you cannot hide this selectively using CSS...not quite sure how you would even do that...

mh, ok… in my opionion this is not too “nice” if a user see the icon but he/she could not partecipate...

Userlevel 7
Badge +7

you can control your contests and leaderboards by branch though...just cant hide the icon without using CSS and CSS does not apply at the branch level.

Userlevel 2

you can control your contests and leaderboards by branch though...just cant hide the icon without using CSS and CSS does not apply at the branch level.

ok, what a pity

Reply