Customizing status icons for Community posts Follow

Comments

7 comments

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

    Thanks

    Merav

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

Please sign in to leave a comment.

Powered by Zendesk