How to change categories style?

Try removing this line:

.subcategories,
1 Like

I am working on it. I am having problems with positioning. I have to take it to the bottom.

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

Of course, please check that page.

https://discourse.zettabayt.com/categories

Try replacing all your CSS by this:

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

It will look like this:
image

2 Likes

There is no .category-boxes class in my CSS code?

Ah, I see. I didn’t notice that Johani’s code was meant to be used on a category page which doesn’t use the boxed style.

If you don’t want to have a list of topics under your boxed categories, select “box with sub-category”, and apply my CSS.

If you want to have a list of topics under your boxed categories, my code won’t work, but I can try to make it work.

2 Likes

Thank you for the great support. I will try to give subcategories class to padding-top. Also I am planning to try recreate that category component with CSS Grid. :slight_smile:

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

It looks like this:


I modified Johani’s CSS and I’m not sure how reliable my modifications are since I don’t know what all his own modifications do.

2 Likes

It works now! Also i am changed some CSS Flex property. But i have one problem. In @Johani’s code, categories are normally listed in mobile design. But our code is doesn’t work for mobile. I am checked Joe’s code for the mobile categories, what is the difference for listing categories for mobile? :frowning:

Awesome topic!

Was wondering how would I make subcategories list in a column vs side by side?

Current view. Looking for this style

  • Bulletins.
  • Pimax Official
  • Site Map

With beside Subcategory New/unread count.

For some reason, when I use the exact same code, the text is not centered in the box. The images are however. I tried entering the text, but the pictures are moving with with the text. Does anybody know what I am doing wrong?