Skip to main content
DannyPancratz
DannyPancratz
VIP ⭐️⭐️⭐️⭐️⭐️
February 13, 2024
Solved

Custom Styling of Category Name in Activity Feeds

  • February 13, 2024
  • 7 replies
  • 159 views

Desired Outcome: Different color styling on the Category name in activity feeds.

For example, if I was building this for the GS community, I’d be trying to have the “Build Communities” and “Customer Success (CS)” category names below use two different colors. 

 

Anyone know how this might be done? I’d imagine it’s a Thirty Party Script if it’s possible at all. But I’m open to custom CSS too if that’s an option. (I’m out of my technical depth here)

 

 

    Best answer by lauro.lana

    Loved the idea as well @DannyPancratz 

    This should do the job, add it to your Third-party Scripts section on Control:

    <script>
    $(".topic-view_header-item_category-link:contains('Category Name')").css('color', 'red');

    </script>

     

    7 replies

    security_lion
    security_lion
    Helper ⭐️⭐️
    February 14, 2024

    Don’t have an answer to this but count me in to vote on it if it becomes a Product Idea. I imagine it could be similar to the look of Article labels and Idea statuses.

    lauro.lana
    Gainsight Employee ⭐️
    lauro.lanaAnswer
    Gainsight Employee ⭐️
    February 15, 2024

    Loved the idea as well @DannyPancratz 

    This should do the job, add it to your Third-party Scripts section on Control:

    <script>
    $(".topic-view_header-item_category-link:contains('Category Name')").css('color', 'red');

    </script>

     

      olimarrio
      Gainsight Employee ⭐️
      olimarrio
      Gainsight Employee ⭐️
      February 15, 2024

      Nice idea @DannyPancratz 🙌, so much so we’ve implemented on our own community 😁

        DannyPancratz
        DannyPancratzAuthor
        VIP ⭐️⭐️⭐️⭐️⭐️
        February 15, 2024

        @leo-inspired Thank you! 

        @olimarrio woah! Cool!!!

        FYI: I am no longer active in this community
          DannyPancratz
          DannyPancratzAuthor
          VIP ⭐️⭐️⭐️⭐️⭐️
          February 15, 2024

          @leo-inspired in that script, you have the example color as ‘red’

          But in your implementation here on the community, you’re using branded colors to match your theme. How do you specify those colors? Is it name of colors? Hexcodes? 

          I’m outside of my technical depth when it comes to scripts, and I’m looking at how to specify the exact branded color I want for my use cases. 

          FYI: I am no longer active in this community
          lauro.lana
          Gainsight Employee ⭐️
          lauro.lana
          Gainsight Employee ⭐️
          February 15, 2024

          CSS you can use either colors or hexcodes. On our community we used the hexcode on the script.

          If you’d like to use your brand color, you’ll need to use inspect your homepage and find the colors you’re using. Or you can ask your design team which hexcodes they mostly use.

          If you search on Google "Color picker css”, you’ll get a picker where you can mix colors and get the hexcode:
           

           

            DannyPancratz
            DannyPancratzAuthor
            VIP ⭐️⭐️⭐️⭐️⭐️
            February 15, 2024

            I have the hexcodes, thank you for the help!

            FYI: I am no longer active in this community
              Terms & ConditionsAccessibility statement