Capitalize a tag in the UI

Support

AI-generated summary

The discussion revolves around capitalizing a specific tag in the UI of a Discourse site. jomaxro wants to capitalize their company’s name in a unique way, but Discourse lowercases all tags. jomaxro attempts to use CSS to change the tag’s capitalization, but it doesn’t work on the /tags page.

cpradio provides a working CSS solution that uses the :after pseudo-element to display the tag with the desired capitalization. However, the solution breaks on the /tags page and in certain tag lists.

cpradio refines the solution by adding more CSS rules to exclude the tag-drop class and to handle comma-separated tag lists. jomaxro confirms that the solution requires four CSS rules, but still encounters issues with comma placement.

cpradio provides a revised solution that resolves the comma issue. jomaxro confirms that the solution works and expresses gratitude for the help. jomaxro adds two more CSS rules to fix lingering formatting issues, and the final solution is:

.tag-bears:not(.tag-drop) {
	visibility: hidden;
	position: relative;
}

.tag-bears:not(.tag-drop):after {
	visibility: visible;
	position: absolute;
	top: 0;
	left: 0;
	content: "bEars";
}

.tag-badge-wrapper.badge-wrapper.bullet.tag-bears:after{
   position: absolute;
   padding: 5px;
}

.badge-category.tag-bears:after{
    padding: 5px 8px;
    background: #e9e9e9 !important
}

.discourse-tags .discourse-tag.tag-bears.simple:not(:last-child):after, .list-tags .discourse-tag.tag-bears.simple:not(:last-child):after {
	content: "bEars, " !important;
}

.list-tags, .discourse-tag.tag-bears:not(.tag-drop) {
	margin-right: .5em;
}
1

The company I currently work for capitalizes its name in a unique way (capital in the middle). On our Discourse site, we have a tag that we’d like to use the same capitalization. I understand Discourse lowercases all tags in the back-end, which is perfectly fine. I’m hoping to use JS or CSS to change the tag in the UI.

Is the following safe? Will it get all instances of a tag? Is there a better way to accomplish this? 

.tag-tag_name_here {
    visibility: hidden;
    position: relative;
}

.tag-tag_name_here:after {
    visibility: visible;
    position: absolute;
    content: "tag_nAme_here";
    top: 0;
    left: 0;
}

Edit: That doesn’t work…breaks on /tags/tag_name_here

2

If it works, that should get all instances as you are hitting the tag name class directly which isn’t targetting a specific location.

3

And it doesn’t work…

It works for tags in the topic list and in a single topic view, but it breaks on the specific /tags page…I’m back to searching for a solution.

4

Can you screenshot where it doesn’t work?

.tag-bears {
	visibility: hidden;
	position: relative;
}

.tag-bears:after {
	visibility: visible;
	position: absolute;
	top: 0;
	left: 0;
	content: "bEars";
}

The above works for me.

Tags page

image.jpg264×366 13.1 KB

Tags drop down on Latest

image.png177×352 9.78 KB

Topic List

image.png370×143 2.09 KB

Docked Topic Title

Undocked Topic Title

The list goes on, all places seem to show it with the capitalization.

5

Sorry for the delay, was travelling last night. Here are two examples where it’s not working. The first is the issue I mentioned yesterday. The second is another I noticed today.

mysite.com/tags/tag_name

image.png654×370 13.5 KB

A topic with multiple tags (that should be bEars between feedback and question):

6

To solve the first one, we need to exclude situations where it has the tag class name and the tag-drop class name, so the CSS becomes

.tag-bears:not(.tag-drop) {
	visibility: hidden;
	position: relative;
}

.tag-bears:not(.tag-drop):after {
	visibility: visible;
	position: absolute;
	top: 0;
	left: 0;
	content: "bEars";
}

Looking at the second one still

7

To solve the second one, you need two more rules.

.list-tags, .discourse-tag.tag-bears:not(.tag-drop):after {
	content: "bEars, " !important;
}

.list-tags, .discourse-tag.tag-bears:not(.tag-drop) {
	margin-right: .5em;
}

One that says, hey, overwrite the existing :after rule for adding the comma in the tag separated list for my specific tag, and the second to provide some margin due to overriding it.

8

Thanks @cpradio, we’ve surpassed my CSS knowledge at this point. To confirm I want 4 CSS rules now?

Edit: Assuming I need all four, this still isn’t working…now there’s a comma added regardless of the tags place in the list:

image.png302×315 8.37 KB

9

Yes.

Try this to resolve the comma

.tag-bears:not(.tag-drop) {
	visibility: hidden;
	position: relative;
}

.tag-bears:not(.tag-drop):after {
	visibility: visible;
	position: absolute;
	top: 0;
	left: 0;
	content: "bEars";
}

.discourse-tags .discourse-tag.tag-bears.simple:not(:last-child):after, .list-tags .discourse-tag.tag-bears.simple:not(:last-child):after {
	content: "bEars, " !important;
}

.list-tags, .discourse-tag.tag-bears:not(.tag-drop) {
	margin-right: .5em;
}
10

Awesome, thanks @cpradio! I’m learning more and more about CSS each time we chat, thank you so much!

11

Added two more rules to fix some lingering formatting issues - now the grey background exists for the tag filter, and the tag is properly aligned in the dropdown:

image.png340×274 9.21 KB

.tag-bears:not(.tag-drop) {
	visibility: hidden;
	position: relative;
}

.tag-bears:not(.tag-drop):after {
	visibility: visible;
	position: absolute;
	top: 0;
	left: 0;
	content: "bEars";
}

.tag-badge-wrapper.badge-wrapper.bullet.tag-bears:after{
   position: absolute;
   padding: 5px;
}

.badge-category.tag-bears:after{
    padding: 5px 8px;
    background: #e9e9e9 !important
}

.discourse-tags .discourse-tag.tag-bears.simple:not(:last-child):after, .list-tags .discourse-tag.tag-bears.simple:not(:last-child):after {
	content: "bEars, " !important;
}

.list-tags, .discourse-tag.tag-bears:not(.tag-drop) {
	margin-right: .5em;
}