How can I change the color of one 'card''s tab?

  • 1
  • Question
  • Updated 2 years ago
How can I change the color of one particular Card's tab in the deck of cards? I thought it might just be a simple CSS override in the Card macro properties but I have been unsuccessful. 
Photo of Nick McCarty

Nick McCarty

  • 1 Post
  • 0 Reply Likes

Posted 2 years ago

  • 1
Photo of Mervyn Toh

Mervyn Toh, Alum

  • 117 Posts
  • 7 Reply Likes
Hi Nick,

Could you please reach out to us at our Support Desk : support@servicerocket.com? This might require a workaround using custom CSS, and I believe it's easy to explain through direct mail exchange.

Thank you.
Photo of Hashimi

Hashimi

  • 642 Posts
  • 40 Reply Likes
Hi Mervyn

It's possible to change the tab's font color? How?

Thanks
Photo of Mervyn Toh

Mervyn Toh, Alum

  • 117 Posts
  • 7 Reply Likes
Hi Hashimi,

It is possible to do so via CSS as well. There are two methods for this, either via importing a .css file through {composition setup} macro, or directly setting the stylesheet through {html} macro.

The CSS code required is as per the following:
<style>
 #deckid .tabs-menu .menu-item a {color:#00ff00;}
 #deckid .tabs-menu .menu-item:nth-child(1) a {color:#0000ff;}
 #deckid .tabs-menu .menu-item:nth-child(1) a:hover {color:#ffff00;}
 #deckid .tabs-menu .menu-item:nth-child(1) .current {color:#ff0000;}
</style>
Take note that "#deckid" should be replaced with the Deck ID you have declared for the {deck} macro that is being used. Let me explain how the CSS is being used:
  • The first line sets the font color for all the tabs in the deck;
  • the second line specifically sets the first tab's font color;
  • the third line specifically sets the first tab's font color when it is being hovered;
  • the fourth line specifically sets the first tab's font color when it is being selected.
You can check how to import the .css file through {composition setup} macro on our ServiceRocket Documentation.

Thank you.