Display favorites outside the table of contents

Besides adding Favorites to your table of contents, you can choose to add the Favorites section to various areas of your theme using the merge code displayed on Settings > Article Favorites.

This will require working with some HTML.

Places you could consider adding the merge code:

• If your knowledge base is older and has had minimal customizations, most of your homepage likely lives in the top-level Homepage in the lefthand navigation. You can add a section for your Favorites here.
• If your knowledge base is from at least October 2022 and/or has had theme customizations, your homepage code likely lives in Settings > Style, Custom HTML > Homepage. You can add a section for your Favorites here.
• If you are using a layout that includes the Right Column, you can choose to add a section to your Settings > Style, Custom HTML > Right Column for your favorites.
• To the footer of all articles, similar to the Related Articles section, in Settings > Style, Custom HTML in either the Body or the Article template.

Below, we'll walk through a couple of these as examples (Homepage custom content and some Settings > Style options). For all options, you can control the number of favorites displayed in the list, too.

Add Favorites to Homepage custom content

If the body of your homepage is set in the top-level Homepage custom content, you can choose to replace one of the existing article lists with the Favorites list, or add the Favorites list on as an additional section.

Replace existing article list with Favorites

To replace an existing article list with Favorites:

1. Go to Homepage.
2. Find the list you'd like to replace. In this example, we'll replace the Popular Articles list. Here's what that looks like before we make any changes:
   
   Sample homepage content before changes
   
3. Each pre-built article list has a template below it. For example, for the Popular Articles list, this is [template("pop-articles")].
4. Copy the merge code below and paste it in to replace the existing list merge code:

   [reader("favorite-articles")]

5. Update the heading for the article list to use the Customize Text merge code for the Favorites list:

   [translation("article-lists:favorite-articles")]

6. Your homepage might now look like this:
   
   Sample homepage content after the changes described above
   
7. You can Preview your changes to be sure they look good.
8. Be sure to Save your changes once you're done.

Add new article list section for Favorites

To add the Favorites article list without replacing an existing article list:

1. Go to Homepage.
2. In the upper left of the editor, select the </> button to toggle to Code View.
   Use the Code View button
   
3. The existing article lists are each set up within a div with class="col-md-4 col-sm-6", which helps handle the spacing. Your code should look something like this:

   <div>[template("icon-cats,max=8,col=4,desc=0")]</div>
   <div class="homepage-widgets row">
         <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:popular-articles")]</h3>[template("pop-articles")]</div>
         <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:new-articles")]</h3>[template("new-articles")]</div>
         <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:updated-articles")]</h3>[template("up-articles")]</div>
   </div>

4. Copy the code below and paste it in wherever you'd like the Favorites article list to appear:

   <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:favorite-articles")]</h3>[reader("favorite-articles")]</div>

5. For example, if you add the Favorites articles section after the other articles lists, your code should should look a bit like this once you're done:

   <div>[template("icon-cats,max=8,col=4,desc=0")]</div>
   <div class="homepage-widgets row">
         <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:popular-articles")]</h3>[template("pop-articles")]</div>
         <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:new-articles")]</h3>[template("new-articles")]</div>
         <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:updated-articles")]</h3>[template("up-articles")]</div>
         <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:favorite-articles")]</h3>[reader("favorite-articles")]</div>
   </div>

6. By default, this setup will bump the fourth list onto a new row. If you'd rather shrink all your lists a little so that you can fit all 4 onto a single row on medium to large screens, you can adjust the div class for all the article lists to col-md-3 instead of col-md-4.  That would look something like this:

   <div>[template("icon-cats,max=8,col=4,desc=0")]</div>
   <div class="homepage-widgets row">
         <div class="col-md-3 col-sm-6"><h3>[translation("article-lists:popular-articles")]</h3>[template("pop-articles")]</div>
         <div class="col-md-3 col-sm-6"><h3>[translation("article-lists:new-articles")]</h3>[template("new-articles")]</div>
         <div class="col-md-3 col-sm-6"><h3>[translation("article-lists:updated-articles")]</h3>[template("up-articles")]</div>
         <div class="col-md-3 col-sm-6"><h3>[translation("article-lists:favorite-articles")]</h3>[reader("favorite-articles")]</div>
   </div>

7. You can Preview your changes to see what they look like.
8. Be sure to Save once you've finished making changes!

Add Favorites to Settings > Style

If your homepage code is not in Homepage, it will be in Settings > Style. If you'd like to add your Favorites section to your Right Column, you'll also head to Settings > Style.

For homepage adjustments here, you can follow the same basic steps whether you're editing the Right Column or the Homepage, but you'd select the appropriate area in the Custom HTML dropdown.

Here, we'll walk through the Homepage:

1. Go to Settings > Style.
2. Below the Preview pane, be sure Custom HTML is selected.
3. Select Homepage from the Custom HTML dropdown.
4. In this Custom HTML, you can either edit one of your existing article lists to change it to Favorites, or add a new section. The same basic steps are followed as in the Homepage instructions above, though there is no WYSIWYG in this view.
5. To edit an existing article list:
   1. Locate the div with class="homepage-widgets", which is usually on row 9. That's where new knowledge bases get the article lists added. Your code should look something like this:

      <div class="homepage-widgets row">
          <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:popular-articles")]</h3>[template("pop-articles")]</div>
          <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:new-articles")]</h3>[template("new-articles")]</div>
          <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:updated-articles")]</h3>[template("up-articles")]</div>
      </div>

   2. Locate the article list you'd like to repurpose. Here, we'll replace Popular Articles, in row 2 of the code sample above.
   3. Remove the text or merge code between the <h3> and </h3> tags that was your previous list's title. Replace it with the Customize Text merge code for the Favorites list:

      [translation("article-lists:favorite-articles")]

   4. Delete the merge code that comes after that text, beginning with the [ and ending with the ]. So you should go straight from the </h3> to the </div>.
   5. Leave your cursor between the </h3> and the </div>
   6. Copy this merge code and paste it in there:

   [reader("favorite-articles")]

   7. Your code should now look like this:

      <div class="homepage-widgets row">
          <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:favorite-articles")]</h3>[reader("favorite-articles")]</div>
          <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:new-articles")]</h3>[template("new-articles")]</div>
          <div class="col-md-4 col-sm-6"><h3>[translation("article-lists:updated-articles")]</h3>[template("up-articles")]</div>
      </div>

   8. You can Preview your changes; just be sure to Save them once you're done!
6. To add to your existing article lists, copy one of the full divs for an article list and paste it where you'd like to add the Favorites. Then proceed with replacing the text and merge code as in the steps above. If you already have three article lists and you're adding a fourth, you can consider adjusting all the article lists to use col-md-3 instead of col-md-4 to get them to fit on a single row.