كيفية تغيير نمط الفئات؟

[Canapin (Coin-coin le Canapin)]

جرب إزالة هذا السطر:

.subcategories,

[bekircem]

أعمل على ذلك. أواجه مشاكل في التموضع. يجب أن أنقله إلى الأسفل.

[Canapin (Coin-coin le Canapin)]

هل يمكنك تزويدي برابط لصفحة التصنيفات الخاصة بك حتى أتمكن من الاطلاع عليها؟

[bekircem]

بالطبع، يرجى التحقق من تلك الصفحة.

https://discourse.zettabayt.com/categories

[Canapin (Coin-coin le Canapin)]

جرب استبدال جميع تنسيقات 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

لا يوجد كلاس .category-boxes في كود CSS الخاص بي؟

[Canapin (Coin-coin le Canapin)]

آه، فهمت الآن. لم أنتبه إلى أن كود جوهاني كان مخصصًا للاستخدام في صفحة فئة لا تستخدم النمط المربع.

إذا لم ترغب في عرض قائمة بالمواضيع تحت فئاتك المربعة، فاختر “مربع مع فئة فرعية”، وطبق تنسيقي 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;
                }
            }
		}
	}
}

يبدو هكذا:

لقد قمت بتعديل CSS الخاص بجوهاني، وأنا لست متأكدًا من مدى موثوقية تعديلاتي لأنني لا أعرف ما الذي تفعله تعديلاته الخاصة.

[bekircem]

يعمل الآن! أيضًا قمت بتغيير بعض خصائص CSS Flex. لكن لدي مشكلة واحدة. في كود @Johani، تُعرض الفئات بشكل طبيعي في التصميم للجوال. لكن كودنا لا يعمل مع الجوال. لقد راجعت كود Joe للفئات في الجوال، ما هو الاختلاف في عرض الفئات للجوال؟

[Heliosurge (Dan DeMontmorency)]

موضوع رائع!

تساءلت كيف يمكنني جعل قائمة الفئات الفرعية في عمود بدلاً من أن تكون جنبًا إلى جنب؟

العرض الحالي. أبحث عن هذا الأسلوب

• النشرات.
• Pimax Official
• خريطة الموقع

مع وجود عدد الفئات الفرعية الجديدة/غير المقروءة بجانبها.

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

لسبب ما، عندما أستخدم نفس الكود بالضبط، لا يتم توسيط النص داخل المربع. أما الصور فهي تُوسَّط. جربت إدخال النص، لكن الصور تتحرك مع النص. هل يعرف أحد ما الخطأ الذي أرتكبه؟