Customizing status icons for Community posts Follow



  • Avatar
    Ola Timpson

    Thank you! I this is exactly what someone asked me for today and it was so helpful to have a walkthrough guide.

  • Avatar
    Merav B (Edited )

    Thanks for this article!

    My statuses are displayed as light gray text underneath the post.

    I would like to be able to display the statuses as icons as is shown above in this article, with different colors for each status icon. Why is it not displayed this way in mine? I am using the Wirey Merchant Theme, is that why?

    I also don't have the VOTES and COMMENTS in those square boxes on the right side.

    Mine look something like this, the votes/comment/status are grayed-out though:

    Multiple products to email

    NEIL MORTER  2 days ago 0 votes 1 comment Planned

    Is there any way to have those nice icons that you have above?

    At this point I'll be happy to have them as nice icons, I will worry about changing the status texts later... 



  • Avatar
    Laura Hippert

    Hi @Merav! The styling for the status is all done in the CSS, so I would look to see what you have in your CSS. A great way to do this would be to take a look at a basic Wiry Merchant template, and see how the content should be styled and then compare this to what you have in your own template's CSS. For example, there are several CSS properties for both .post-status that affects the style of the status. The individual colors are represented in individual classes such as: .post-planned.

  • Avatar
    Elizabeth Toy

    To change the dropdown menu for the agent setting the status, you can add this to the JS:


    // change text of Post Actions dropdown menu statuses

    $('.post-actions .dropdown-menu :nth-child(2)').text('insert none status text here');
    $('.post-actions .dropdown-menu :nth-child(3)').text('insert planned status text here');
    $('.post-actions .dropdown-menu :nth-child(4)').text('insert not planned status text here');
    $('.post-actions .dropdown-menu :nth-child(5)').text('insert completed status text here');
    $('.post-actions .dropdown-menu :nth-child(6)').text('insert answered status text here');
  • Avatar
    Brenda L.

    Thank you! This is just what we needed. Can someone tell me if this is also the way to add more status labels? We would like to have a total of 6 status labels instead of the original 4. 

  • Avatar
    Laura Hippert

    Hi Brenda - I'm glad this article was helpful. At this time, however, there is no way to add more statuses than the original 4. I would definitely recommend sharing your input in our Product Feedback forums. I found this post, which is similar to your request. 

  • Avatar
    Brenda L.

    Thanks for getting back to me so quickly, Laura. :) And thank you for including that link to that related Product Feedback post. I voted it up!

  • Avatar
    Joel Mayer

    Thanks for the JS to change the status for agents who are changing the statuses, Elizabeth.

    Laura, is there a way to do this using the the ZD Templating language?

  • Avatar
    Jake Bantz (Edited )

    Hi Joel,

    Unfortunately the select+identifier combo is not able to be broken down to manipulate each of the selections on their own, so the only workaround is to use Javascript.

    Hope this helps!

  • Avatar
    Joel Mayer

    Thanks, Jake. It does help me sleep a little better. 

  • Avatar
    Michael Kulig

    Wonder why we have to worry about curlybars and code. A simple customizable field with free content for admins would solve the problem.

  • Avatar
    Nicole Relyea

    Hey Michael - 

    Welcome to the Zendesk Community! The Product Managers are aware of this request. However, development activities are focused on some high-priority things for Guide at the moment. They may return to developing things for the community platform in the future, but for the moment this is the best workaround we can offer. 

  • Avatar
    Drew Hayes


    Thanks for the JS to update the Action menu for agents. Unfortunately, I can't seem to make it work! :( I've pasted your JS in directly ... is there something specific I am missing? Does it need to be in a specific section of the JS file? Is there somewhere else I need to update the Action menu? 

Please sign in to leave a comment.

Powered by Zendesk