Come cambiare lo stile delle categorie?

[Canapin (Coin-coin le Canapin)]

Prova a rimuovere questa riga:

.subcategories,

[bekircem]

Ci sto lavorando. Ho problemi con il posizionamento. Devo spostarlo in basso.

[Canapin (Coin-coin le Canapin)]

Puoi fornirmi un link alla tua pagina delle categorie così posso dare un’occhiata?

[bekircem]

Certo, controlla quella pagina.

https://discourse.zettabayt.com/categories

[Canapin (Coin-coin le Canapin)]

Prova a sostituire tutto il tuo CSS con questo:

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

Così apparirà:

[bekircem]

@Canapin

.category-boxes

Nella mia CSS non c’è la classe .category-boxes?

[Canapin (Coin-coin le Canapin)]

Ah, capisco. Non avevo notato che il codice di Johani era destinato a essere utilizzato su una pagina di categoria che non utilizza lo stile in riquadro.

Se non desideri avere un elenco di argomenti sotto le tue categorie in riquadro, seleziona “box con sottocategoria” e applica il mio CSS.

Se desideri avere un elenco di argomenti sotto le tue categorie in riquadro, il mio codice non funzionerà, ma posso provare a renderlo funzionante.

[bekircem]

Grazie per il grande supporto. Proverò ad aggiungere una classe padding-top alle sottocategorie. Inoltre, ho intenzione di provare a ricreare quel componente di categoria con 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;
                }
            }
		}
	}
}

Così appare:

Ho modificato il CSS di Johani e non sono sicuro di quanto siano affidabili le mie modifiche, dato che non so cosa facciano tutte le sue modifiche personali.

[bekircem]

Funziona ora! Ho anche modificato alcune proprietà CSS Flex. Ma ho un problema. Nel codice di @Johani, le categorie sono normalmente elencate nel design per dispositivi mobili. Il nostro codice invece non funziona per i dispositivi mobili. Ho controllato il codice di Joe per le categorie mobili: qual è la differenza nell’elenco delle categorie per i dispositivi mobili?

[Heliosurge (Dan DeMontmorency)]

Ottimo argomento!

Mi chiedevo come potrei creare un elenco di sottocategorie in una colonna invece che affiancato?

Vista attuale. Cerco questo stile

• Bollettini.
• Pimax Ufficiale
• Mappa del sito

Con accanto il conteggio delle sottocategorie nuove/letture non effettuate.

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

Per qualche motivo, quando uso esattamente lo stesso codice, il testo non è centrato nella casella. Le immagini, invece, lo sono. Ho provato a inserire il testo, ma le immagini si muovono insieme al testo. Qualcuno sa cosa sto sbagliando?