Skip to main content

Custom CSS: Recommended Topics List on 3 columns

  • October 29, 2019
  • 2 replies
  • 382 views

Frank
  • Product Guru
  • 22 replies

You can highlight any topic type, from any category, as 'recommended' content. This is useful for content that answers a lot of questions, has a lot of views and helps a lot of your users. 

By default recommended topics lists are shown in 2 columns. In this post you will learn how to list the topics in 3 columns.

Learn how to add Custom CSS in this article: How To Add Custom CSS

Test first: Consider using your staging environment first to test and try your changes before applying them to your production community

 

3 columns of recommended topics

Set up your topics in Homepage Customization Mode

Then apply the following Custom CSS

/* recommendation 3 columns */
.custom-featured-topic-list .box__pad {
 padding-right: 0;
}@media (min-width: 1025px) {
 .custom-featured-topic-list .topic-curation__item {
 width: 33.3%;
 }
}

 

Did you find this topic helpful?

2 replies

Jurgen
Forum|alt.badge.img
  • Helper ⭐️
  • 178 replies
  • December 19, 2019

@Frank @Cristina Is it possible to change featured topics height?

So this CSS: “.widget--featured-topics .link--featured-attachment .thread-list-block__featured-image {“

 


tom.shaddock
  • Gainsight Employee ⭐️⭐️
  • 117 replies
  • December 20, 2019

Hi @Jurgen yep that should work if you want to resize the image height of the featured topics. But it might be better to target the images more specifically to avoid altering a part of the platform you didnt intend to, something like this:

.featured-topic > a.link--featured-attachment > .thread-list-block__featured-image {
 height: 210px !important;
}

Which would give you the following result (dont worry the change is just in my local browser):
 

 

Hope this helps, any questions please just let us know (I will be on holiday for the next 3 weeks from today but im sure my colleagues will respond).


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings