Coloring Tags in Kanban Collection?

Ask for Help
1

Has anyone been able to successfully color code the tags in the Kanban collection? I do not have a lot of requirements for whether or not the text is colored or the tag, but I would like to include some visual distinction between tags. Willing to consider all options here.

Thanks

Screenshot 2024-10-22 at 11.16.58 AM
Screenshot 2024-10-22 at 11.16.58 AM2346Ɨ1488 198 KB

2

With custom css it should be possible I havenā€™t tried it, yet.
Another thing is to use the custom AI component, if it would work, last time I tried it couldnā€™t create a Kanban functionality (but it did get the tags right)

Also, check css-library.glide.page maybe something can help

3

Yeah, I had the same problem with the Custom AI Component.

I was able to change the color of all tags with the dev tools in chrome, but I couldnā€™t replicate it in CSS settings in the app.

Checking out the CSS library now. Thank you!

4

Iā€™ll share what Iā€™ve done for my kanban. My CSS skills are not great and I know there are much better ways to target certain elements, but this is working for me right now. The tags arenā€™t all different colors, but they stand out a lot better than the white on white trend in Glide.

Iā€™ve applied a class name of ā€˜kanbanā€™ to my kanban component. If someone wants to clean up my CSS for me I wouldnā€™t be upset. :wink:

Screenshot_20241022-104949
Screenshot_20241022-104949956Ɨ1025 39 KB

.kanban div>div>div>div>div>div>div>div {
  background-color: lightgrey;
}

.kanban div>div>div>div{
  color:black;
}

.kanban >div>div>div>div>div>div>div>div>div>div:first-child {
  background-color: var(--gv-accent);
  border-radius: 5px;
  padding: 5px;
  margin-top:-15px;
  margin-left:-15px;
  margin-right:-15px;
  margin-bottom:15px;
}

.kanban >div>div>div>div>div>div>div>div>div>div:first-child>div {
  background-color:var(--gv-accent);
  color: white;
}

.kanban >div>div>div>div>div>div>div>div>div>div>div>div {
  background-color:var(--gv-dark-accent);
  border-width:0px;
}
.kanban [class*=" unselected"] {
  border-color:var(--gv-accent);
  border-radius:15px;
  border-width:3px;
}
.kanban [class*=" selected"] {
  border-color:rgb(200,255,0);
  border-radius:15px;
  border-width:3px;
}

.kanban >div>div>div>div>div>div>div>div>div>div>div:has(span) {
  color: white;
}
5

My CSS skills are also not great. This is a big help and gets me ALMOST there haha.

I fear I may not be able to get the conditional logic I need to color the tags per the content within each tag.

1 Like
6

Iā€™m sure there are ways to do it. Others will have better knowledge, but I almost guarantee itā€™s possible based on the words within the tag. Only downside is that you have to hardcode for each possible tag that you could have so its not very dynamic.

1 Like
7

Agreed with the rigidity component. Thanks for your help though Jeff.

1 Like
8

The tags from the kanban in HTML are in the form of span text, so they cannot be used as selectors. Unless you maintain the order, CSS can utilize the :nth-child(n) selector. In other words, the empty tags must be filled, for example, with ā€œ-ā€.

3 Likes