Customizing status icons for Community posts

Have more questions? Submit a request

22 Comments

  • OT

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

    1
  • Merav B

    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... 

    Thanks

    Merav

     
     
    0
  • 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.

    0
  • 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');
    0
  • 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. 

    0
  • 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. 

    0
  • 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!

    0
  • 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?

    0
  • Jake Bantz

    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!

    0
  • Joel Mayer

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

    0
  • 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.

    0
  • Nicole - Community Manager

    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. 

    0
  • Drew Hayes

    Elizabeth:

    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? 

    0
  • Daanish Sayyed

    I don't seem to find {{#if status}} and {{#if post.status}} in the relevant pages, i assume there had been some changes and this post is not updated.

     

    0
  • Nicole - Community Manager

    Hey Daanish - 

    We'll have the documentation team double check and will get back to you on this. 

    0
  • Nicole - Community Manager

    Hi Daanish - 

    You're correct, this article is in need of updating. We're going to pull it down while we work on it, and, so long as you've clicked the "follow" button at the top of the page, you'll receive a notification once it's been updated and re-published. Thanks for your patience!

    0
  • Jennifer Rowe

    Good news!

    Laura updated this article so it's back. Enjoy!

    0
  • Mary Paez

    Thank you!

     

    In script.js, we added: 

    0
  • Mike Cannon

    The code for the labels works great. I am having issues with the .js for the drop downs. I am using the Copenhagen theme. Is there a different code needed for this theme? 

    0
  • Jessie Schutz

    Hi Mike! Welcome to the Community!

    Can you go into some more detail about what you're trying to do with the drop downs? We might have an article or tip that'll help you out!

    0
  • Mike Cannon

    Hello Jessi,

    I am trying to change the drop down to match the new status icons and I cannot seem to get it to work with the Copenhagen theme. 

    0
  • Jessie Schutz

    Hey Mike!

    Which dropdown are you trying to change? Is it a custom drop-down?

    0

Please sign in to leave a comment.

Powered by Zendesk