How to move the comment section of an article to the side bar?

Step 1: Customize Your Theme

First, ensure that you have a customizable theme. You can either modify one of the default Zendesk themes or duplicate one and then make changes to the duplicate.

1. In your Zendesk Guide, go to Guide admin.
2. Click on Customize design and then Theme.
3. Either edit your current theme or duplicate a default theme and then edit the duplicate.

Step 2: Modify the Theme Code

You will need to access the theme's code:

1. While editing the theme, click on Edit Code.
2. Find the template files, specifically article_page.hbs which controls the layout of the article pages.

Step 3: Move the Comment Section

You need to move the HTML code for the comment section to the sidebar. This typically involves:

1. Locate the comment section code within the article_page.hbs or a related file.
2. Cut the code for the comments.
3. Open or create a sidebar template file (like sidebar.hbs if it exists, or you might need to include it in article_page.hbs).
4. Paste the comment section code into the sidebar section of the template.

Step 4: Adjust CSS

Adjust the CSS to ensure the comment section fits well within the sidebar. This might include changing widths, margins, or other styles. You might find these styles in style.css or similar files.

.sidebar-comments {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    /* additional styles */
}

Step 5: Test and Deploy

Make sure to preview your changes using the Preview option in the theme editor. Test the functionality thoroughly to ensure that comments still work as expected. Once satisfied, publish your changes.

Step 6: JavaScript Adjustments

Depending on how your theme is set up, you may need to adjust JavaScript that handles comment interactions. This is especially important if the commenting functionality relies on JavaScript that expects the comment section to be in its original location.

Hope this points you in the right direction!

Well done, Brandon! :-)

We don't have a side bar in our search results as we have a CUSTOM THEME. What code can I add and where? to create a sidebar section for searc results?

Hi Jen,
 
I completely understand your situation! Since you’re using a custom theme and don’t have a sidebar by default, you’ll need to add the necessary HTML and CSS to create one for your search results.
 
Here’s a general approach you can follow:
 
 

1. Access Theme Code: Go to your theme settings and edit the code.

    

2. Create Sidebar Section: You’ll want to add a new <div> for your sidebar in the main template file that manages your search results layout.

    

3. Style It: In your CSS file, you might add some styling to ensure the sidebar looks good alongside your search results. Use something like:

    

   .sidebar {
       width: 300px; 
       float: right;
   }

4. Test Your Changes: Always preview any changes to make sure the layout works and looks as expected.

    

If you need any specific code snippets or run into any challenges, feel free to reach out! The community is here to help.
 
Good luck with your sidebar creation!