Wie ändert man den Kategorien-Stil?

[Canapin (Coin-coin le Canapin)]

Versuchen Sie, diese Zeile zu entfernen:

.subcategories,

[bekircem]

Ich arbeite daran. Ich habe Probleme mit der Positionierung. Ich muss es nach unten bringen.

[Canapin (Coin-coin le Canapin)]

Könntest du mir einen Link zu deiner Kategorie-Seite geben, damit ich mir das ansehen kann?

[bekircem]

Natürlich, bitte überprüfen Sie diese Seite.

https://discourse.zettabayt.com/categories

[Canapin (Coin-coin le Canapin)]

Versuchen Sie, Ihr gesamtes CSS durch Folgendes zu ersetzen:

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

Es wird dann so aussehen:

[bekircem]

@Canapin

.category-boxes

Es gibt keine .category-boxes-Klasse in meinem CSS-Code?

[Canapin (Coin-coin le Canapin)]

Ah, verstehe. Ich habe nicht bemerkt, dass Johanis Code für eine Kategorien-Seite gedacht war, die den Boxen-Stil nicht verwendet.

Wenn du unter deinen boxenartigen Kategorien keine Liste von Themen haben möchtest, wähle „Box mit Unterkategorie

[bekircem]

Vielen Dank für die großartige Unterstützung. Ich werde versuchen, padding-top der Unterkategorien-Klasse hinzuzufügen. Außerdem plane ich, diese Kategorienkomponente mit CSS Grid neu zu erstellen.

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

So sieht es aus:

Ich habe Johanis CSS geändert und bin mir nicht sicher, wie zuverlässig meine Änderungen sind, da ich nicht weiß, was all seine eigenen Änderungen bewirken.

[bekircem]

Es funktioniert jetzt! Außerdem habe ich einige CSS-Flex-Eigenschaften geändert. Aber ich habe ein Problem. Im Code von @Johani werden Kategorien im mobilen Design normalerweise aufgelistet. Unser Code funktioniert jedoch nicht für Mobilgeräte. Ich habe Joe’s Code für die mobilen Kategorien überprüft – was ist der Unterschied bei der Auflistung von Kategorien für Mobilgeräte?

[Heliosurge (Dan DeMontmorency)]

Tolles Thema!

Ich habe mich gefragt, wie ich eine Liste mit Unterkategorien in einer Spalte statt nebeneinander anzeigen lassen kann?

Aktuelle Ansicht. Ich suche nach diesem Stil:

• Bulletins.
• Pimax Official
• Sitemap

Daneben die Anzahl der neuen/ungelesenen Unterkategorien.

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

Aus irgendeinem Grund wird der Text bei mir nicht zentriert, wenn ich exakt denselben Code verwende. Die Bilder werden jedoch zentriert. Ich habe versucht, den Text einzugeben, aber die Bilder bewegen sich dann mit dem Text. Weiß jemand, was ich falsch mache?