Best Answer

CSS for catalog widget - hide details everywhere

  • 16 May 2023
  • 8 replies
  • 253 views

Userlevel 1

Hello! I’m looking for CSS support in eliminating the details from the course cards in the catalog and learning plan. For example, I’d like to remove the footer, type description, and language.

 

I’ve checked fark.tools and there is nothing included regarding these items. I’ve also found a thread elsewhere where someone mentions doing this but the code provided does not work when I adjust it to apply to all pages and all course widgets.

/* Hides 'new' status on course tiles */

.ui-badge-status-wrapper{

   display: none!important;

}

/* Hides enrollment status */ 

#doc-widget-156 .item-status-box{

    display: none!important;

}

/* Hides Course type */ 

#doc-widget-156 .type-box{

    display: none!important;

}

/* Hides language */ 

#doc-widget-156 .course-type{

    display: none!important;

}

/* Hides tile footers */ 

#doc-widget-168 .ui-card-catalog-content .ui-card .ui-card-footer{

   display: none!important;

}
​​​​​​​

icon

Best answer by Chelsy Koshy 16 May 2023, 15:57

View original

8 replies

Userlevel 4
Badge +2

@stephanie.pankewicz I was able to hide those using the below css.

/* Hide the footer */
.ui-card-footer{
display:none;
}
/* Hide the language */
.ui-card .ui-card-language{
display: none;
}

 

Userlevel 1

Thank you @Chelsy Koshy - that worked perfectly.

Userlevel 4
Badge +2

@stephanie.pankewicz Great to hear that it worked perfectly! I'm glad I could help. 😊

Userlevel 1
Badge

this is great, thanks for sharing! is there another one i could add for it to eliminate “free”

Userlevel 1

@jcellitti can you share a screenshot of where it says “free” on the card? I can’t remember where that was so I’m not sure which code removed it.

I’m having an issue with the NEW title on the cards. If the CSS code that was shared in this thread eliminates the title from ALL of the cards, would it be possible to remove it just for specific cards within a catalogue course listing so the user can see the NEW legend only on certain cards within the same catalogue row?

 

Txs!

Userlevel 7
Badge +3

I’m having an issue with the NEW title on the cards. If the CSS code that was shared in this thread eliminates the title from ALL of the cards, would it be possible to remove it just for specific cards within a catalogue course listing so the user can see the NEW legend only on certain cards within the same catalogue row?

 

Txs!

Without scripting, while technically possible, this would be an incredibly difficult thing to actually achieve well. There’s no way to identify card contents and apply rules based on it, so at best you could do nth number of card in the carousel, but everyone’s would be different. For just CSS use, this is an all or nothing situation.

Userlevel 7
Badge +3

Really like all the customizations to these cards, adding to the backlog for adding to the wizard in Fark.Tools. Getting ready to do an update with a bunch of new items soon.

Reply