Custom CSS: Recommended Topics List on 3 columns

  • 29 October 2019
  • 2 replies
  • 349 views
Frank
Rank
Userlevel 1

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%;
 }
}

 

😌

2 replies

Jurgen
Rank
Badge

@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
Rank

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


Terms & ConditionsCookie settings