Is it possible to change dropdown names?

Dev
1

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:

image
image1210×442 45.9 KB

2

Pretty much all text can be customised:

image
image1129×733 17.5 KB

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

image
image1099×333 7.88 KB

2 Likes
3

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:

5 Likes
4

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

3 Likes
5

Oh sorry, scan read!

Yes, they are global.

1 Like
6

Oh go on :wink: :wink:

7

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.

5 Likes
11

Hello :wave:

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

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

Screenshot 2023-08-23 at 14.35.00
Screenshot 2023-08-23 at 14.35.00746×303 9.71 KB

Which will looks like this.

Screenshot 2023-08-23 at 14.35.31
Screenshot 2023-08-23 at 14.35.31707×190 6.9 KB

Adding subcategory Tag title

Screenshot 2023-08-23 at 14.37.50
Screenshot 2023-08-23 at 14.37.50727×174 5.45 KB

Screenshot 2023-08-23 at 14.38.40

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

Screenshot 2023-08-23 at 17.38.21

Screenshot 2023-08-23 at 17.38.53

8 Likes
12

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

2 Likes
13

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 :medal_sports::bowing_man:.

And your component works without a single JS line…

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

1 Like
14

Please tell me GPT4bot helped you write that :laughing:

4 Likes
15

100% yes, I’m afraid.

2 Likes
16

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;
  });

Screenshot 2023-08-23 at 18.47.33

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.

6 Likes
17

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

3 Likes