How can I display Only Categories of Solution in Forum for customers?

hi,

if you want to show only category on your home portal so this is possible.

i will provide you code below.

copy paste this code in your "portal home page"

<!--  start Category box -->
<section class="home-category-blocks padding">
   <div class="container">
      <div class="row">
         <div class="col-sm-12 col-xs-12 col-md-12">
          <ul class="category-list navigator text-center" id="with-id">
            {% for category in portal.solution_categories %}
            {% if category.folders_count > 0 %}
            <li id="{{category.id}}">
            <a href="{{category.url}}">
              <span class="category-icon"></span>
              <h3>{{category.name | h }}</h3><br>
              <p class="info-text">{{ category.description | h}}</p>
              </a>
            </li>
            {% endif %}
    {% endfor %}
          </ul>
        
        </div>
     </div>
</section>
<!--  end Category box -->



<!-- Stat Recent Article -->  
<div class="container"> 
  <div class="row">
    <div class="col-sm-6 col-xs-12 col-md-6">
        <div class="quick-articles">
        <section class="articles promoted_blocks">
                        <h3 class="promoted_title">Recent articles</h3>
          <ul class="article-list promoted-articles">
  {% for article in portal.recent_articles limit:5 %}
            <li class="promoted-articles-item">      
            <a class="ol" href="{{article.url}}">{{article.title | h }}</a>
                {% if article.body_plain != blank %}  
                {% endif %}
          </li>
            {% endfor %}
            </ul>
</section>
      </div>
  
      </div>
<!--  End Recent Article -->      
  
  
 <!--<section class="submit-request-section community-image text-center">
   <div class="container">
     <a href="/support/discussions" class="btn btn-lg">Community</a>
     <a href="/support/tickets/new" class="submit-a-request btn btn-lg">Submit a request</a>
   </div>
</section> -->
  
  
<!--  start Popular post -->
 <div class="col-sm-6 col-xs-12 col-md-6">
 {% if portal.recent_popular_topics.size > 0 %}
    <div class="recent-activity">
      <h2 class="recent-activity-header" style="padding-top:17px;padding-bottom:14px;margin-left:20px;">Popular posts</h2>
      <ul class="recent-activity-list">
      {% for topic in portal.recent_popular_topics %}
        <li class="recent-activity-item">
          
          <a href="{{topic.url}}" class="recent-activity-item-parent">{{ topic.user | profile_image }} {{topic.title | h}}</a>
         <!-- <div class="t-inf">{{ topic | topic_info }}</div>-->
        </li>
      {% endfor %}
      </ul>
    </div>
  {% endif %}
  </div>
</div>
<!--  End Popular post -->
  
 

copy paste this code in your "Css" part

/*portal home page css*/

.image-lazy-load {
    margin-top: -6px;
}


/*category block css*/

.home-category-blocks {
    background: #ebf0f5;
}

.padding {
    padding: 30px 0;
}

ul.category-list,
ul.quick-article-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

ul.category-list li:hover {
    border: 1px solid #2fa3cc;
    border-radius: 5px;
}

ul.category-list li,
ul.quick-article-block>li {
    /*display: flex;*/
    flex: 1 0 270px;
    list-style-type: none;
    justify-content: center;
    padding: 20px;
    background: #fff;
    margin: 15px;
}

ul.category-list li {
    border: 1px solid #fff;
    border-radius: 5px;
}

ul.category-list li span {
    display: inline-block;
}

ul.category-list li span i {
    font-size: 2.5em;
    color: #2fa3cc;
    margin-right: 3px;
}

ul.category-list li h3 {
    font-size: 1.3em;
    font-weight: 600;
    color: #5f5f5f;
    margin-top: -10px;
    display: inline-block;
    vertical-align: middle;
}

ul.category-list li p {
    color: #959595;
}

ul.quick-article-block>li {
    background: #ebf0f5;
    justify-content: flex-start;
}

@media (max-width: 720px) {
    ul,
    ol {
        padding: 0;
        margin: 0;
    }
}


/*recent articles css*/

ul.article-list>li {
    padding: 0px 10px;
}

@media (max-width: 720px) {
    ul.article-list>li {
        margin-left: 0px !important;
    }
}

li {
    line-height: 18.875px;
}

.ol {
    padding-left: 20px;
}

.promoted_title {
    padding-left: 0px;
    padding-bottom: 10px;
}

.promoted_blocks {
    padding-top: 17px;
}

.quick-articles ul>li,
.quick-articles section {
    text-align: left;
}

.quick-articles ul>li {
    margin-top: 20px;
}

.quick-articles section {}

.quick-articles section h3 {
    font-size: 24px;
}

.quick-articles ul>li,
.quick-articles section {
    text-align: left;
}

.article-list>li,
.quick-articles ul>li {
    position: relative;
    padding-left: 30px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.quick-articles section a {
    /*border-bottom: 1px solid #ddd;*/
    color: #333333 !important;
    display: block;
    padding-bottom: 0px;
    font-weight: 500;
    font-size: 14px;
}

.quick-articles {
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none;
    padding: 0;
}


/* link btn css home page*/

.text-center {
    text-align: center;
}

.community-image {
    padding: 100px 0;
    background-position: center;
    background-image: url(//p13.zdassets.com/hc/settings_assets/2087525/115000111251/g2uHA6hq6cSzVx8olRROQA-request-section.jpg);
    background-repeat: no-repeat;
    max-width: 100%;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.community-image .btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.72);
    color: #fff;
    padding: 20px 45px;
    font-size: 18px;
    border-radius: 6px;
    text-shadow: none;
}

@media (max-width: 600px) {
    .community-image .btn {
        width: 100%;
        margin-bottom: 5px;
    }
}

.section h2 {
    margin-bottom: 10px;
    text-align: center;
}

.recent-activity-list {
    padding: 0px;
}

.home_recent_activity .recent-activity-list::before {
    content: "";
    font-family: FontAwesome;
    font-size: 30em;
    position: absolute;
    left: 0px;
    right: 0px;
    text-align: center;
    color: rgba(68, 68, 68, 0.36);
    opacity: 0.1;
    margin-top: -100px;
    overflow: hidden;
}


/*promoted articles css */

.recent-activity-item-parent a {
    font-weight: 600;
}

.recent-activity div.thumb {
    width: 25px;
    height: 25px;
    line-height: 25px;
    font-size: 12px;
}

.recent-activity-item {
    position: relative;
    z-index: 9;
    /*border-bottom: 1px solid rgb(221, 221, 221);*/
    overflow: auto;
    padding: 0;
    margin-top: 0px;
}

@media (min-width: 768px) {
    .recent-activity-item-parent,
    .recent-activity-item-link {
        width: 70%;
        margin: 0px;
    }
}

.recent-activity-item-parent,
.recent-activity-item-link {
    color: rgb(51, 51, 51);
    display: inline-block;
    width: 100%;
    margin: 6px 0px;
}

.recent-activity-item-parent {
    font-size: 15px;
}

.bg-1 {
    background-color: #2fa3cc;
}

div.thumb {
    color: #fff;
}
 

After copy paste this code your portal look like like this

if you face any problem.

please contact us:- info@helpdesktheme.com

thanks

support team

(Experts in 'freshdesk' & 'freshservice' theme & customization)