Is there a way to remove the lock badge for some categories but not for others?

用户体验
1

Hello guys,

as the title suggests, I am looking for a way to remove the lock badge for some categories, but not for others.
I managed to do this for the category-drop-header, since I can use the category ID to only remove the lock icon for this category, instead of globally.

I did not, however, manage to remove the icon for the badge in the category overview (cf. screenshot) and in the drop-down list of categories in the search.

Do you have any suggestions for me? I’m pretty new to working with CSS and I’ve exhausted my own approaches.

Thanks a lot!

20
201229×289 43.4 KB

edit:
I read both of the following threads, but could not find a solution that worked for me:

2

I think this should do it:

// Hide the lock icon for specific categories on topic lists and hamburger menu,
// and hide the lock icon on all dropdown search results
.search-menu .results .restricted,
[href="/c/MY-CATEGORY-SLUG1"],
[href="/c/MY-CATEGORY-SLUG2"],
[href="/c/MY-CATEGORY-SLUG3"] {
    .fa-lock {
        display: none;
    }
}

Just replace the MY-CATEGORY-SLUG# part with the slugs of the categories you want to have the lock icon hidden.

Unfortunately there isn’t enough to work with in the HTML to pick and choose which categories show the lock icon in the dropdown search results with CSS, so it’s all or nothing for that part. You will need to decide if you want to show or hide the lock for all restricted categories. If you want to show it, just remove this part: .search-menu .results .restricted,

Hopefully that gets you pretty close to what you are looking for!

11 个赞
3

好的，抱歉挖坟，但我似乎无法让这个生效。我正试图隐藏我们 Lounge 的锁定图标，它的 slug 是“off-topic”。我们的 Lounge 不是默认安装的，它是一个创建的类别，我已经设置了权限，使其对非会员不可见。但我不想在那里显示锁定图标，因为会员认为它是一个锁定的类别。

我假设我应该将此添加到 CSS 代码中：

// 在主题列表和汉堡菜单中隐藏特定类别的锁定图标，
// 并在所有下拉搜索结果中隐藏锁定图标
.search-menu .results .restricted,
[href="/c/off-topic"] {
    .fa-lock {
        display: none;
    }
}

锁定图标仍然存在。我不想全局替换它，而且我喜欢在类别下拉菜单中隐藏锁定图标的想法。

4

你好，关于这个：

.category-drop [data-value="ID"] .restricted,
[href^="/c/off-topic"] {
    .d-icon-lock {
        display: none;
    }
}

将 ID 替换为“离题”分类 ID。

1 个赞
5

感谢您的回复。这在类别搜索下拉菜单中隐藏了它，这很好。但我还想在类别列表页面等地方全局隐藏该类别的锁定图标（而不是其他锁定的元素）。

1 个赞
6

我在 CSS 中输入了一个错别字；我写的是 lounge 而不是 off-topic。

1 个赞
7

这正是我想要做的。

8

太棒了！搞定了。非常感谢 :clap:

2 个赞
9

很高兴它奏效了！如果我遗漏了某个地点，请告诉我 :slight_smile:

2 个赞
10

@Arkshine
使用上面的代码示例，我得以在主页和侧边栏上移除了 2 个类别的锁定。太棒了！

但是，下拉菜单中仍然显示锁定。这两个类别在其他任何地方都没有显示锁定，仅在此菜单中。

Screenshot 2023-08-24 at 2.41.52 PM

有什么想法吗？

编辑：

我得以移除了所有类别下拉菜单中的锁定图标，但我无法弄清楚如何仅为选定的类别移除它。这是 CSS：

.badge-wrapper.bullet span.badge-category, {
    .d-icon-lock {
        display: none;
    }
}

我尝试使用与上面类似的 CSS，使用 [data-value=“ID”]，但这在此实例中不起作用。

1 个赞
12

我注意到在某些地方使用 CSS 来处理锁定图标有点棘手，因此我创建了一个主题组件，可以轻松完成此操作，它会隐藏面包屑下拉选择器、标题栏面包屑、导航侧边栏菜单以及相应聊天频道中选定安全类别的锁定图标。 :slight_smile:

2 个赞
13

感谢 @Lilly。我前几天看到了你最初的回复，今天才有时间进行一些编辑，结果发现你不仅让我的工作变得更容易，还创建了一个出色的主题组件，肯定能帮助无数想做同样事情的人。非常感谢你的时间和努力。非常感激。

1 个赞
14

不客气，也谢谢你的美言。我非常喜欢开发主题组件工具来帮助人们扩展 Discourse 论坛的功能。 :blush:

2 个赞