Customize Archive Header by Category

  • Resolved gracehough

    (@gracehough)


    5 years, 11 months ago

    Hello,

    I’m looking for how to customize the .archive-header for each category archive page I create. By default, the koji theme shows a dark grey block with “category,” the category title, and the category description. What I want to do is turn this grey block into a hero style header (same shape and size) while leaving a white (or any color) space to allow the category description to be readable. I was successful messing around with the CSS and currently display all archive header backgrounds as an image from a URL, however, I want to have a unique image for each category archive, maybe with a tinted overlay option but that concern is secondary. I scoured forums and tried small edits to the .php files and CSS that seemed to work for others with no success. I use godaddy hosting.

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Anders Norén

    (@anlino)

    Hi @gracehough,

    You can target each specific category with the category-[name] class in the body element. That way, you can add a unique background image to the archive header for each category in CSS.

    For instance, if the category slug is design, you can add the following:

    .category-design .archive-header { background-image: url( https://via.placeholder.com/1000x500 ); }

    — Anders

    Thread Starter gracehough

    (@gracehough)

    @anlino

    Thank you! That’s exactly what I needed. I’m still an amateur to CSS syntax so I had some positioning and sizing things to figure out, but this got me where I needed to go. For anyone else, I used the following CSS reference site for the other pieces. https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

    Sincerely,
    Grace

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Customize Archive Header by Category’ is closed to new replies.