Cord LogoDocs
Sign inStart now

Customize the Thread

Integration Guide /
Ask the Community

Adjust your Thread's appearance to match your design

Adjust the CSS #

You can alter a Cord thread to closely mirror your application's design language. With the code below, you can change the Thread component to use the colors from your application's color palette. Here, we're assuming that our example application uses a bright orange color for its call-to-action buttons.

CSS:
cord-thread .cord-send-button  {
background-color: #ee6611;
}

cord-thread .cord-send-button:hover  {
  background-color: #ff7722;
}

cord-thread .cord-send-button  {
background-color: #ee6611;
}

cord-thread .cord-send-button:hover  {
  background-color: #ff7722;
}
Copy

This change will give you a thread that looks something like this:

A screenshot of a page with a Cord thread with a customized send button

Take the customization even further #

You can customize many more aspects of Cord's components by writing some CSS to target classes starting with cord-.

If you'd like to dive deeply into the topic of CSS customization, read our CSS guide.

Not finding the answer you need? Ask our Developer Community

Ask Cordy