Subcategory Boxes - Replace with Pictures


(Fellowship Forums) #1

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!


(Jeff Atwood) #2

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


(Kris) #3

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


(Fellowship Forums) #4

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?


(Kris) #5

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

(Fellowship Forums) #6

Thank you very much!

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


(Fellowship Forums) #7

Hello, just following up on this.

Thanks!