Subcategory Boxes - Replace with Pictures

Hello,

In the subcategory page, under the “box” style - we are currently able to add a picture/logo that goes to the top of the box. Is it possible to make the picture take up the whole box, and have no additional text?

For example, change: image to image

Pleae let me know if this makes sense or if you need any further clarification.

Thanks!

You should be able do this via CSS, perhaps @awesomerobot can advise on Monday?

This CSS should get you the majority of the way there, note that I’m only targeting one specific category with .category-box-fall-2017, if you want to do this for more categories you’d adjust this a bit.

.category-box.category-box-fall-2017 {
    border: none;
    box-shadow: none;
    .category-box-inner {
      border: none;
      .category-box-heading {
        padding: 0;
        h3 {
          display: none;
        }
        img {
          width: 100%; 
          height: auto;
        }
      }
      .description {
        display: none;
      }
    }
}

.category-box {
    align-self: flex-start;
}

4 Likes

Thank you very much! This will be very helpful

To apply to all categories, would we need to copy and paste the entire code multiple times, or just change “.category-box.category-box-fall-2017” to somehow include all category boxes?

If you wanted to add more subcategories one by one, you’d edit the first line like this (everything else could remain the same):

.category-box.category-box-fall-2017, .category-box.category-box-winter-2018 {

Otherwise, If you wanted all the subcategory boxes in the Past Exams category to use this layout, you’d change the CSS to this:


.category-past-exams {
    .category-box {
        border: none;
        align-self: flex-start;
        box-shadow: none;
        .category-box-inner {
          border: none;
          .category-box-heading {
            padding: 0;
            h3 {
              display: none;
            }
            img {
              width: 100%; 
              height: auto;
            }
          }
          .description {
            display: none;
          }
        }
    }
}
7 Likes

Thank you very much!

Is there a way to change the number of “boxes” per row? (ex/ from 4 to 5)?

Hello, just following up on this.

Thanks!