Anyway to style discourse topic title? ( IE, red, bold, highlight, anything. )

css

#1

For example in the body I am given markdown/HTML/etc capability. Does anyone know a way to bring attention to the topic title? ( IE color, bold, styling etc. )

Kind Regards


#2

Are the topics random or do they all fall under a particular category / tag?


#3

Hello III,

thanks for the response:

  1. Topics are not random in that sense, it would be hand-picked by the person making the topic itself. ( An administrator in our company, as it’s a public forums. so these would be “important” topics we want customers to pay attention to, IE the bold/stylish/red/etc text of the title topic itself. )

I see what you are getting at though, and they could be a tag, “important”, is there something which exists in discourse right now which would allow me to do this based on tag then? ( That would certainly work. )

Kind Regards


#4

For now, I don’t think you can do it with tags - as far as I can tell.

However, since the topics are hand-picked, you can do this with categories using CSS.

If for example, I want to highlight all the topics under the “support” category by making their titles red I can do something like this:

/* You only need to change the word "support" in the line below to
match the category you want to highlight. 
The rest will be generated based on that variable*/

$category-a: support;

.category-#{$category-a} {
	a.title.raw-link.raw-topic-link,
	.topic-link,
	#topic-title h1 a,
	.topic-list-main-link a.title,
	.main-link a.title,
	.latest-topic-list-item .main-link a.title,
	&.topic-list-item a.title:not(.badge-notification) {
    // apply the styles you want to change here
		color: red;
	}
}

And the result would be this:

Topic list:

Topic page:

User activity

Suggested topics:

Support category page:

That’s the basic idea.

You can style more than one category by repeating the code with a different variable. For example:

$category-a: support;
$category-b: feature;
$category-c: bug;

.category-#{$category-a} {
	a.title.raw-link.raw-topic-link,
	.topic-link,
	#topic-title h1 a,
	.topic-list-main-link a.title,
	.main-link a.title,
	.latest-topic-list-item .main-link a.title,
	&.topic-list-item a.title:not(.badge-notification) {
		color: red;
	}
}

.category-#{$category-b} {
	a.title.raw-link.raw-topic-link,
	.topic-link,
	#topic-title h1 a,
	.topic-list-main-link a.title,
	.main-link a.title,
	.latest-topic-list-item .main-link a.title,
	&.topic-list-item a.title:not(.badge-notification) {
		text-decoration: underline;
		font-weight: bold;
	}
}

.category-#{$category-c} {
	a.title.raw-link.raw-topic-link,
	.topic-link,
	#topic-title h1 a,
	.topic-list-main-link a.title,
	.main-link a.title,
	.latest-topic-list-item .main-link a.title,
	&.topic-list-item a.title:not(.badge-notification) {
		color: green;
	}
}

Results in:


Note for the team

It would be great to have tags added as classes to the topics in the same way that categories are here:

This would make such styling based on the presence of tags possible.


#6

Hello,

thank you for taking the time to respond to me, the method works great for the per category listing(s).

  1. Although it works perfectly in practice, I’d much more realistically want to make certain topics in many different categories this “color/style” etc. So tagging would actually be perfect, say make a tag “important/alert/new”, or what ever it pertains to, then it auto styles it. However as you noted there doesn’t seem to be a way to use it for tagging at this time.

My problem is that a less technical person would be the one making these changes from the GUI. Per say an employee makes an update to our products firmware, and needs to simply check a box / use embedded styling to make it a color. ( As opposed to looking up the topic ID / category via discourse / rails console etc, or loading into docker and making a change through CSS. )

I guess until I’m able to use tagging we’ll just make a category defaulted for this “important” styling, and use the method you’ve shown me.

Thanks again!

Kind Regards

lll

    January 13

For now, I don’t think you can do it with tags - as far as I can tell.

However, since the topics are hand-picked, you can do this with categories using CSS.

If for example, I want to highlight all the topics under the “support” category by making their titles red I can do something like this:

> 
> /* You only need to change the word "support" in the line below to
> match the category you want to highlight. The rest will be generated based on that variable*/
> $category-a: support; .category-#{$category-a} a.title.raw-link.raw-topic-link,
> .category-#{$category-a} .topic-link,
> .category-#{$category-a} #topic-title h1 a,
> .category-#{$category-a} .topic-list-main-link a.title,
> .category-#{$category-a} .main-link a.title,
> .category-#{$category-a} .latest-topic-list-item .main-link a.title,
> .category-#{$category-a}.topic-list-item a.title:not(.badge-    notification) { // Add the styles you want to apply to highlighted titles below. color: red; }

And the result would be this:

Topic list:

Topic page:

User activity

Suggested topics:

Support category page:

That’s the basic idea.

You can style more than one category by repeating the code with a different variable (find and replace works well here). For example:

> 
> $category-a: support;
> $category-b: feature;
> $category-c: bug;
> .category-#{$category-a} a.title.raw-link.raw-topic-link,
> .category-#{$category-a} .topic-link,
> .category-#{$category-a} #topic-title h1 a,
> .category-#{$category-a} .topic-list-main-link a.title,
> .category-#{$category-a} .main-link a.title,
> .category-#{$category-a} .latest-topic-list-item .main-link a.title,
> .category-#{$category-a}.topic-list-item a.title:not(.badge-	notification) {
> color: red;
> }
> .category-#{$category-b} a.title.raw-link.raw-topic-link,
> .category-#{$category-b} .topic-link,
> .category-#{$category-b} #topic-title h1 a,
> .category-#{$category-b} .topic-list-main-link a.title,
> .category-#{$category-b} .main-link a.title,
> .category-#{$category-b} .latest-topic-list-item .main-link a.title,
> .category-#{$category-b}.topic-list-item a.title:not(.badge-	notification) {
> text-decoration: underline;
> font-weight: bold;
> }
> .category-#{$category-c} a.title.raw-link.raw-topic-link,
> .category-#{$category-c} .topic-link,
> .category-#{$category-c} #topic-title h1 a,
> .category-#{$category-c} .topic-list-main-link a.title,
> .category-#{$category-c} .main-link a.title,
> .category-#{$category-c} .latest-topic-list-item .main-link a.title,
> .category-#{$category-c}.topic-list-item a.title:not(.badge-	notification) {
> color: green;
> }

#7

I understand. I also think doing it based on tags is a lot more efficient.

While it’s true that you cannot do this based on tags by default in Discourse, that doesn’t mean you cannot create your own mini plugin to address the need.

One possible way to do this by adding classes to topics that have the tag. You could then use the custom class to style the titles of topics that have that tag.

I think jQuery is great for this, for example, let’s say I want to highlight all the topics with the tag Photo in this list.

Because the tag I am targeting is “photo”, the class added to the anchor element for that tag would be tag-photo. If I am targeting another class like apple, the class added would then be tag-apple

Here’s what it looks like in the output html:

Now that we know that the tag’s unique selector, we select it with jQuery and based on that add a class to main-link above it to help with styling late. This looks like this:

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
      	$('.main-link:not(.title-highlight) .tag-photo') // <~ change tag-photo to your actual tag
		.closest(".main-link")
		.addClass("title-highlight");
    });
</script>

Now, if you examine the rendered html after loading the page, you will notice a difference:

From here it’s smooth sailing, all you need to do is use specific CSS selectors to highlight the titles that fall under that custom class, like so:

.title-highlight a.title {
    color: red !important;
}

I usually don’t like to use !important but I think it’s alright in this case as it’s an end result customization implemented on your end and not a template to be overridden.

!important here saves you from finding all the different rules applied to titles like we did with the CSS/category based fix previously. However, you will lose the dimmed/faded color added to visited highlighted topics. You can still add that back later.

If everything goes well, you should now have highlighted topics based on the presence of tags.

And once the feature is added to Discourse you just modify your CSS selectors and remove the script