Como alterar o estilo das categorias?

[Canapin (Coin-coin le Canapin)]

Tente remover esta linha:

.subcategories,

[bekircem]

Estou trabalhando nisso. Estou tendo problemas com o posicionamento. Preciso levá-lo para a parte inferior.

[Canapin (Coin-coin le Canapin)]

Você pode me fornecer um link para sua página de categorias para que eu possa dar uma olhada?

[bekircem]

Claro, por favor, verifique aquela página.

https://discourse.zettabayt.com/categories

[Canapin (Coin-coin le Canapin)]

Tente substituir todo o seu CSS por este:

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

Ficará assim:

[bekircem]

@Canapin

.category-boxes

Não há a classe .category-boxes no meu código CSS?

[Canapin (Coin-coin le Canapin)]

Ah, entendi. Não percebi que o código do Johani era destinado a ser usado em uma página de categoria que não utiliza o estilo em caixa.

Se você não quiser ter uma lista de tópicos sob suas categorias em caixa, selecione “caixa com subcategoria” e aplique meu CSS.

Se você quiser ter uma lista de tópicos sob suas categorias em caixa, meu código não funcionará, mas posso tentar fazê-lo funcionar.

[bekircem]

Obrigado pelo ótimo suporte. Vou tentar aplicar a classe de padding-top às subcategorias. Também estou planejando recriar esse componente de categoria usando 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;
                }
            }
		}
	}
}

Fica assim:

Eu modifiquei o CSS do Johani e não tenho certeza de quão confiáveis são minhas modificações, já que não sei o que todas as próprias modificações dele fazem.

[bekircem]

Está funcionando agora! Também alterei algumas propriedades CSS Flex. Mas tenho um problema. No código do @Johani, as categorias são listadas normalmente no design para dispositivos móveis. Mas nosso código não funciona para dispositivos móveis. Verifiquei o código do Joe para as categorias em dispositivos móveis; qual é a diferença na listagem das categorias para dispositivos móveis?

[Heliosurge (Dan DeMontmorency)]

Tópico incrível!

Estava me perguntando como faria para listar as subcategorias em uma coluna, em vez de lado a lado?

Visualização atual. Procurando por este estilo:

• Bulletins
• Pimax Official
• Mapa do Site

Com a contagem de novas/não lidas da subcategoria ao lado.

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

Por algum motivo, quando uso exatamente o mesmo código, o texto não fica centralizado na caixa. As imagens, no entanto, ficam. Tentei inserir o texto, mas as imagens se movem junto com ele. Alguém sabe o que estou fazendo de errado?