How to adjust the location of the category logo, name and description displayed on the main page?

UX
1

Hi all,

Could you provide a guide to adjust the location of the category logo, name and description displayed on the main page?
I have tried find various ways in discourse forums, but I have not succeeded yet.

The link below is a forum I am developing.

I want to adjust the category logo and name position of the main page as follows.

q1_css.png1091×135 12.1 KB

Our theme is based on the Material Design Theme and is in use with some modifications.

The category css currently applied is as follows.

.category-name {
  // empty
}

.category-logo {
  clear: both;
  display: block;
  max-width:48px;
  padding: 8px 0px 0px 0px;
}

How can I change the position of the category logo / name … , please guide the CSS code for me.

2

Here is the current image applied the category css I mentioned.

q1.png1190×950 64.3 KB

1 Like
3

That one was a little tricky since the category-name parent div doesn’t have a class, but I believe you should be able to do it like this:

.category-list .category .category-name{
    float:right;
    width: 90%;
}

.category-list .category .category-name + div{
    width: 10%;
}

I added a few other identifiers on there to increase the specificity since those are pretty generic class names that could be used elsewhere and might inadvertently effect the layout. Let me know if that doesn’t work for you.

EDIT: I realized my original CSS was only working in conjunction with my other CSS, I believe this should work vanilla.

8 Likes
4

Thank you very much for your help, rewphus.

The css code you attached works fine(:heart_eyes:), but for categories that do not have a logo image, the category description and name look strange. (mixed)

I have come to the conclusion that I need to modify the template to create the category layout I want, and I have decided to maintain my current category layout. :slight_smile:

2 Likes
6

@rewphus,
I want to know CSS code that adjusts only one image size among category logo images.
I guess the css class selector(.) can be used to modify the image size of a particular category, but I do not know how to implement it.

Does anyone have an idea?