[Feature Request]: Label colors #2465

New Issue

OVERLORD · 2026-02-05T04:14:38+03:00

OVERLORD commented

2026-02-05 04:14:38 +03:00

Originally created by @MaartenUreel on GitHub (Oct 29, 2021).

Describe the feature you'd like

Be able to define a color for specific label values.

For instance, a label "confidentiality" with three levels (green, amber & red) could be represented with that color.

Describe the benefits this feature would bring to BookStack users

Help to achieve certain ISO compliancy guidelines.

Additional context

No response

Originally created by @MaartenUreel on GitHub (Oct 29, 2021). ### Describe the feature you'd like Be able to define a color for specific label values. For instance, a label "confidentiality" with three levels (green, amber & red) could be represented with that color. ### Describe the benefits this feature would bring to BookStack users Help to achieve certain ISO compliancy guidelines. ### Additional context _No response_

OVERLORD added the 🔨 Feature Request label 2026-02-05 04:14:38 +03:00

OVERLORD closed this issue

2026-02-05 04:14:40 +03:00

OVERLORD commented

2026-02-05 04:14:44 +03:00

@ssddanbrown commented on GitHub (Oct 29, 2021):

Thanks for the request @MaartenUreel.

Tags are already a secondary element within BookStack, I don't really want to go down to the level of building & supporting further settings/options for sub-elements at this time, especially since this has not been requested before while it would need a restructuring of the tag implementation.

I could probably provide a "Custom HTML Head" setting hack that would achieve this though if desired?

@ssddanbrown commented on GitHub (Oct 29, 2021): Thanks for the request @MaartenUreel. Tags are already a secondary element within BookStack, I don't really want to go down to the level of building & supporting further settings/options for sub-elements at this time, especially since this has not been requested before while it would need a restructuring of the tag implementation. I could probably provide a "Custom HTML Head" setting hack that would achieve this though if desired?

OVERLORD commented

2026-02-05 04:14:46 +03:00

@MaartenUreel commented on GitHub (Oct 29, 2021):

I was indeed thinking, if you would be able to have the tag name & value in a data-attribute of the tag, we could work around it with custom HTML, yes.

e.g. now we have a tag:

<div class="tag-item primary-background-light">
        <div class="tag-name"><a href="...">confidentiality level</a></div>
        <div class="tag-value"><a href="...">Amber</a></div>     
</div>

If that would be:

<div class="tag-item primary-background-light" data-tag-name="confidentiality-level" data-tag-value="amber">
        <div class="tag-name"><a href="...">confidentiality level</a></div>
        <div class="tag-value"><a href="...">Amber</a></div>     
</div>

That would already solve my "issue".

You could debate whether to lowercase/normalize the value, I would, but that might be opiniated.

@MaartenUreel commented on GitHub (Oct 29, 2021): I was indeed thinking, if you would be able to have the tag name & value in a data-attribute of the tag, we could work around it with custom HTML, yes. e.g. now we have a tag: ```html <div class="tag-item primary-background-light"> <div class="tag-name"><a href="...">confidentiality level</a></div> <div class="tag-value"><a href="...">Amber</a></div> </div> ``` If that would be: ```html <div class="tag-item primary-background-light" data-tag-name="confidentiality-level" data-tag-value="amber"> <div class="tag-name"><a href="...">confidentiality level</a></div> <div class="tag-value"><a href="...">Amber</a></div> </div> ``` That would already solve my "issue". You could debate whether to lowercase/normalize the value, I would, but that might be opiniated.

OVERLORD commented

2026-02-05 04:14:49 +03:00

@Cave-Johnson commented on GitHub (Oct 29, 2021):

I'd just like to add my +1 to this. This type of tags / labels is used in Gitlab and its really good way of easily distinguishing between tags on a page

@Cave-Johnson commented on GitHub (Oct 29, 2021): I'd just like to add my +1 to this. This type of tags / labels is used in Gitlab and its really good way of easily distinguishing between tags on a page

OVERLORD commented

2026-02-05 04:14:55 +03:00

@ssddanbrown commented on GitHub (Nov 17, 2021):

@MaartenUreel The latest release now has additional attributes set on the tag elements:

<div class="tag-item primary-background-light" data-name="Category" data-value="Demo">

If a quick live example is desired:
https://demo.bookstackapp.com/books/bookstack-demo-site/page/mixed-content-example-page

@ssddanbrown commented on GitHub (Nov 17, 2021): @MaartenUreel The latest release now has additional attributes set on the tag elements: ```html <div class="tag-item primary-background-light" data-name="Category" data-value="Demo"> ``` If a quick live example is desired: https://demo.bookstackapp.com/books/bookstack-demo-site/page/mixed-content-example-page

OVERLORD commented

2026-02-05 04:15:02 +03:00

@ssddanbrown commented on GitHub (Jul 25, 2022):

Since the original fundamental request can be now be achieved, using a little custom applied CSS, I'll close this off.
Feel free to shout if you need an example of such CSS.

@ssddanbrown commented on GitHub (Jul 25, 2022): Since the original fundamental request can be now be achieved, using a little custom applied CSS, I'll close this off. Feel free to shout if you need an example of such CSS.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/BookStack#2465