Center Category Logo

Contribute UX

AI-generated summary

The discussion revolves around centering a category logo on a category page in a forum. Vonsid asks how to center the category logo above the navigation. awesomerobot explains that custom themes are required for this, which are available on the Standard plan, and provides CSS code using display: flex and align-items: center to achieve centering. Vonsid asks for documentation on CSS properties like display and flex-direction, and how to add a background color. Heliosurge recommends W3Schools and GitHub for theme components, while awesomerobot suggests the Mozilla Developer Network as a higher-quality resource. Heliosurge appreciates the recommendation.

1

Hello,

I have searched and haven’t found how I can center the Category logo that is above nav while viewing the Category page?

Thanks.

2

You mean a category page like this?

The image shows a screenshot of a webpage with a blue icon featuring an open book and a green plant growing out of it, alongside the text "Helpful resources you may need." (Captioned by AI)
The image shows a screenshot of a webpage with a blue icon featuring an open book and a green plant growing out of it, alongside the text "Helpful resources you may need." (Captioned by AI)1220×415 80.7 KB

It looks like you have a trial on our Starter plan, which doesn’t allow custom themes. You’d have to be on our Standard plan to do something like this.

With a custom theme you’d do this by adding CSS like this:

.category-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
}

to get an outcome like this:

This image shows a webpage header with a green logo, a text headline, and several navigation buttons. (Captioned by AI)
This image shows a webpage header with a green logo, a text headline, and several navigation buttons. (Captioned by AI)954×364 50 KB

4 Likes
3

Perfect! Thank you! Where can I find documentation on properties such as display, flex-direction, etc? Looking to add a BG color too.

2 Likes
4

This link may help get you started with CSS

You can also look for Customization > Theme component that do what your looking for. They can also be a good resource to look over the code in GitHub to copy code from.

2 Likes
5

The Mozilla Developer Network tends to be of better quality than W3Schools: MDN Web Docs

2 Likes
6

Awesome thanks will have to look over this one.