Can I add color to the text in post titles?

AI-generated summary

用户 shawa 提问如何在帖子标题中添加颜色,Lhc_fl 解释可通过 CSS 为特定主题 ID 设置颜色,例如使用 tr[data-topic-id="314580"] td.topic-list-data .title { color: red }。shawa 询问具体操作和代码位置,Lhc_fl 指出需在主题的自定义 CSS/HTML 中添加代码,并建议使用 !important 提高优先级以确保生效 Lhc_fl。shawa 发现仅默认主题支持此功能,其他主题需创建主题组件并包含在启用的主题中。最终,添加 !important 后颜色生效,shawa 表示感谢。

Hello everyone, I have a question: When creating a new post, is it possible to add color to the text in the title, as shown in the picture?

as shown in the image:

It’s possible to do in CSS with the attributes of topic’s “tr” tag. It has topic id, category & tag slugs, topic statuses, etc.

Screenshot 2024-07-02 at 10.27.19 AM

How should I specifically operate? Are there any detailed tutorials?

@Lhc_fl 大佬,帮我看看

Esteemed colleague, might I trouble you to cast your discerning eye over this matter?

I need you to give more detailed information

Specifically, you did not explain the rules for coloring different topics with different colors.

For example, this will make the topic with id 314580 red.

    tr[data-topic-id="314580"] td.topic-list-data .title {
        color: red
    }

Thank you for your response. I wonder, where should this code be added or configured?

tr[data-topic-id="314580"] td.topic-list-data .title {
        color: red
    }

Here:

I took a look, and the only theme with the custom CSS/HTML option deactivated is mine. Is this where I can set it up?

Also, how can I find the ID of a post? Is it the number at the end of each post?
image

I don’t know why it’s not working. Is my code written correctly?

Obtained ID:
image

After refreshing the browser, the specified theme color for the ID remains unchanged.

Does it work when you use the preview button?

Hello, I tested the preview and the pop-up page still didn’t see the specified ID’s theme color change.

I found that only the default theme has the “Edit CSS/HTML” option, other added themes do not have this option. However, even if I enable the default theme, the color of the title I modified still does not change. I’m not sure where I went wrong in the process.

This is quite handy as you could color title via cat/sub or tag.

Because those themes you installed were pre-written by others and cannot be modified

The solution is to try to create a theme component and then include it in your enabled theme


Create a theme component and add it using this:

Hello, I tried creating a new theme test. However, whether it is previewing the theme or switching to this theme, the title color of the corresponding ID still has not changed at all. I don’t know where else I need to make adjustments.

Then try adding the !important flag

tr[data-topic-id="51"] td.topic-list-data .title {
    color: red !important;
}

Wow! Instantly effective, you’re amazing!
Wow! It works instantly, you’re amazing!

Is it because the priority is not enough?

Yes, I’m too lazy to see where the CSS has taken effect.