How to change categories style?


(Stefan Arlevski) #1

Hello everyone,
Does anyone know how to customize Categories as it is on print screen I have attached? Thank you


(Joe) #2

What does the rest of the page look like?


(Bhanu Sharma) #3

Seems like he posted that snippet from community.revolut.com


(Joe) #4

You can start with this as a “base” and build on it.

.categories-and-latest {
  flex-direction: column;
}

.category-list .category-description,
.category-list .subcategories,
.category-list tr .topics,
.category-list th {
  display: none;
}

.category-list tbody .category {
  border: none;
  width: 100%;
  display: block;
  height: 100%;
  padding: 0;
  box-sizing: border-box;
}

.category-list tbody tr[class] {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin: 20px;
  border: 1px solid black;
  text-align: center;
  line-height: 200px;
}

.category-list tbody {
  text-align: center;
}

Of course this is very rough and hard coded but should help you get started.

Result:


(Stefan Arlevski) #5

Yes, you are right. I take it from revolut.


(Stefan Arlevski) #6

Thank you. Can this code be added via admin panel or it should be added in the code? Sorry for noob question. :slight_smile:


(Bhanu Sharma) #7

You can either create a child component in themes and then add it to the CSS section or add it directly to the CSS section of the current theme.


(Joe) #8

No worries, everyone is a noob at one point or the other, @itsbhanusharma answered your question above.

Don’t hesitate to ask if you need more help.


(Stefan Arlevski) #9

I did it! :slight_smile:
Any tips how can I add some beauty to it?)


(Joe) #10

Great :ok_hand:

Discourse allows you to add category logos. You can set a logo for each category

First go to the category page, then edit the category settings, from there you set a category logo:

Then you probably want to remove the line-height: 200px from the code above as it won’t be needed if you use logos.

You would end up with something like this…


(Stefan Arlevski) #11

My last result, we are almost there:


Any ideas how can I make logos centered? :slight_smile:


(Erlend Sogge Heggen) #13

We do eventually plan to support box styling in parent categories and not just in sub-categories:


(Joe) #14

There many ways to center things with CSS. I had a bit of time so I decided to revise the code to something a little bit more presentable.

Here’s what I ended up with:

And here’s what the code looks like:

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

And like @erlend_sh pointed out, it’s only a matter of time before this makes its way to core. :+1:


Most “traditional” or classic forum Category listing