如何更改类别样式？

[Canapin (Coin-coin le Canapin)]

尝试删除这一行：

.subcategories,

[bekircem]

我正在处理这个问题。我在定位方面遇到了困难，需要将其调整到底部。

[Canapin (Coin-coin le Canapin)]

Can you provide me a link to your category page so I can have a look?

[bekircem]

当然，请查看该页面。

https://discourse.zettabayt.com/categories

[Canapin (Coin-coin le Canapin)]

尝试用以下 CSS 替换您所有的 CSS 代码：

.category-boxes .category-box .logo.aspect-image img, .category-boxes-with-topics .category-box .logo.aspect-image img {
    width: 150px;
    height: auto;
}
.category-boxes .category-box, .category-boxes-with-topics .category-box {
    background-color: #F2F2F2;
}
.category-boxes .description {
    display: none;
}
.category-boxes .subcategories {
    padding-top: 1em;
}

效果如下：

[bekircem]

@Canapin

.category-boxes

我的 CSS 代码中没有 .category-boxes 类？

[Canapin (Coin-coin le Canapin)]

啊，我明白了。我没注意到 Johani 的代码是用于不使用方框样式的分类页面的。

如果您不想在方框分类下显示主题列表，请选择“带子分类的方框”，并应用我的 CSS。

如果您希望在方框分类下显示主题列表，我的代码将无法生效，但我可以尝试使其生效。

[bekircem]

感谢大家的大力支持。我会尝试为子类别添加 padding-top 的类。此外，我计划尝试用 CSS Grid 重新构建该类别组件。

[Canapin (Coin-coin le Canapin)]

.categories-and-latest {
	flex-direction: column;
}

.category-list {
	thead,
	.topics,
	.category-description {
		display: none;
	}
    

	tbody {
		text-align: center;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

		tr {
			display: inline-block;
			width: 250px;
			min-height: 250px;
			margin: 0.75em;
			border: 1px solid rgba(0, 0, 0, 0.1) !important;
			border-left-color: transparent;

		}

		.category {
			padding: 1.25em 0;
			border-width: 0;
			display: block;
			width: 100%;
			height: calc(100% - 2.5em);
			position: relative;
			background: #f2f2f2;
            display: flex;
            flex-direction: colum;
            flex-wrap: wrap;
            align-items: center;
			.category-logo {
				float: unset;
				margin: 0 auto;
			}


			h3 {
				a[href] {
					display: flex;
					flex-direction: column;
					width: 250px;
                    order: 1;
                    .category-text-title {
                        justify-content: center;
                    }
				}
			}

			&:after {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				content: "";
				z-index: 1;
				box-sizing: border-box;
				pointer-events: none;
				border-left: 6px solid;
				opacity: 0.35;
				border-color: inherit;
			}
    
            .subcategories {
                .category-name {
                    margin-top: 0;
                }
                .badge-notification {
                    display: none;
                }
            }
		}
	}
}

效果如下：

我修改了 Johani 的 CSS，但由于不清楚他原本做了哪些修改，因此不确定我的修改是否可靠。

[bekircem]

现在可以工作了！另外，我修改了一些 CSS Flex 属性。但我遇到了一个问题。在 @Johani 的代码中，分类在移动端设计中会正常显示。但我们的代码在移动端无法正常工作。我检查了 Joe 的代码中关于移动端分类的部分，移动端列出分类的方式有什么不同呢？

[Heliosurge (Dan DeMontmorency)]

太棒的帖子！

我在想，如何让子类别列表垂直排列而不是并排显示？

当前视图。我希望实现这种样式：

• 公告
• Pimax 官方
• 网站地图

并在旁边显示子类别的新增/未读数量。

[londonstuff.meli]

@Johani

.categories-and-latest {
	flex-direction: column;
}

.category-list {
	thead,
	.topics,
	.subcategories,
	.category-description {
		display: none;
	}

	tbody {
		text-align: center;

		tr {
			display: inline-block;
			width: 250px;
			height: 250px;
			margin: 0.75em;
			border: 1px solid rgba(0, 0, 0, 0.1) !important;
			border-left-color: transparent;

		}

		.category {
			padding: 0;
			border-width: 0;
			display: block;
			width: 100%;
			height: 100%;
			position: relative;

			> div {
				height: 100%;
				background: #f2f2f2;
			}

			.category-logo {
				float: unset;
				margin: 0 auto;
			}

			.category-name {
				margin-top: 1.25em;
			}

			h3 {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);

				a[href] {
					display: flex;
					flex-direction: column-reverse;
					width: 250px;
				}
			}

			&:after {
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				content: "";
				z-index: 1;
				box-sizing: border-box;
				pointer-events: none;
				border-left: 6px solid;
				opacity: 0.35;
				border-color: inherit;
			}
		}
	}
}

不知为何，当我使用完全相同的代码时，文本无法在方框中居中显示，但图片可以。我尝试输入文本，但图片会随着文本移动。有人知道我在哪里做错了吗？