How to change text of this span object with no selectors?

Development

AI-generated summary

jordan-violet is trying to change the text of a <span> object with no selectors from “Topic” to “Blogs” on a per-category basis using CSS. supermathie suggests customizing the text via the admin panel, but this would apply to all categories.

Don provides a solution using CSS, targeting a specific category by class name and using the :before pseudo-element to replace the text. jordan-violet finds this solution helpful.

Canapin further refines the solution by suggesting the use of SCSS loops to make the code more maintainable when applying the change to multiple categories. jordan-violet plans to turn this into a theme plugin.

1

image
image1462×208 12.3 KB

This object has the following HTML:

<span>Topic</span>

I’m wondering how one might use css to change this text to something else, e.g. “Blogs”.

EDIT: I would want to do this on a per-category basis.

2

This is customisable via /admin/customize/site_texts?q=Topics

I’m not sure exactly which one it is though…

You can figure it out by running I18n.enableVerboseLocalizationSession() in the JS console, reloading the page, then you’ll be able to correlate the number of the string with output in the console:

image
image1088×650 85.4 KB

3

This would be for all categories though, right? I want to do it per category.

4

Hello :wave:

This is possible with CSS.

body.category-name {
  .topic-list-header {
    .default.topic-list-data {
      span {
        visibility: hidden;
        &:before {
          content: "Blogs";
          visibility: visible;
        }
      }
    }
  }
}
5

I wish I could give you 10 likes! Thank you so much, Don!

6

If you want to do this on multiple categories and avoid having many SCSS lines, you can use SCSS loops. It makes the code easier to read and maintain because you’ll just have to edit two SCSS variables.

7

I’m going to try to make this into a theme plugin, thanks for this loop idea!