Is it possible to change dropdown names?

AI-generated summary

The discussion revolves around customizing dropdown names in Discourse. Initially, Helga_Razinkova asked if it’s possible to change dropdown names within a particular category. merefield suggested that most text can be customized, but Canapin clarified that these changes would be global, not specific to categories.

Later, Don created a theme component to achieve this customization, allowing users to change dropdown titles for categories and tags. His solution involves adding settings for category and tag names, which can be customized using the component.

The community praised Don for his work, with Lilly expressing amazement and Canapin awarding him the “Front-End Medal of Distinction.”

joffreyjaffeux then offered an alternative solution using JavaScript, modifying the SelectKit to replace content and providing documentation links for further customization. Helga_Razinkova thanked both Don and joffreyjaffeux for their help, acknowledging their awesomeness.

Hi community :slight_smile:

Does anyone happen to know if there’s an option to change dropdown names inside a particular category?

I’d love to customize ‘all’ and ‘all tags’ parts:

Pretty much all text can be customised:

I’m guessing you need to edit, for example:

But it won’t change for specific categories only.

Is started working on a very hacky CSS solution, it’s not perfect… And I’m a bit reluctant to share something that hacky anyway. :confounded:

Got it, thank you for your help! @merefield @Canapin

Oh sorry, scan read!

Yes, they are global.

Oh go on :wink: :wink:

I think it’s overly complex, especially when subcategories aren’t defined as such in the HTML code… I have a half-working thing, but I think it should be done the right way, and Discourse JS API might help with this. Unfortunately, I don’t know much about it.

Hello :wave:

I’ve made a theme component now to achieve this…

https://github.com/VaperinaDEV/category-breadcrumb-dropdown-title

It contains two settings to make it easier.

category name
First Place: category slug
Second Place: category dropdown title

tag name
First Place: category slug
Second Place: tag dropdown title

Which will looks like this.

Adding subcategory Tag title

I hope it helps :slightly_smiling_face:


Edit: I fixed the dropdown width to align correctly to the custom text width. UX: fix the dropdown width to keep the custom content width · VaperinaDEV/category-breadcrumb-dropdown-title@faca71c · GitHub

wow, great work @Don - you amaze me :exploding_head: :star_struck:

Hear ye!
:man_mage:

From the depths of SCSS mysteries and the intricacies of front-end alchemy, Sir Don has arisen. Conquering functions, mastering loops, and decrypting lists, we proudly confer upon him the illustrious Front-End Medal of Distinction :sports_medal::person_bowing:.

And your component works without a single JS line…

Happy James Corden GIF by The Late Late Show with James Corden

Please tell me GPT4bot helped you write that :laughing:

100% yes, I’m afraid.

Ok so this solution is impressive, but you can do this @Don:

api
  .modifySelectKit("category-drop")
  .replaceContent((component, content) => {
    let newContent = [];
    content.forEach((item) => {
      if (
        component.category?.slug === "general" &&
        item.id === "all-categories"
      ) {
        item.name = "jojo";
      }

      newContent.push(item);
    });
    return newContent;
  });

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/select-kit/addon/mixins/plugin-api.js lists all the actions you can make:

  • appendContent
  • prependContent
  • replaceContent
  • onChange

Let me know if you have troubles using this. It should probably be better documented, but Im here if you have any question.

@Don @j.jaffeux you are absolutely awesome, guys!! :fire: