A css solution to an archive page issue?

  • Unknown's avatar
    jenbokoff · Member ·

    Is there any way to remove “Category” from archive pages? I want my blog page to only display items in the “Jeneralist” category, so I’m using an archive page. I’d like the title of that page to be “Jeneralist” but it will only display “Category: Jeneralist” (see: https://jenbokoff.com/category/jeneralist/)

    I did get one css workaround, but it removes the whole title, which doesn’t look nearly as good as having the clear, bold title. For reference, that is:
    .archive .page-title {
    display: none;
    }

    .post-meta .post-category {
    display: none;
    }

    .page-title .meta-single li {
    display: none;
    border-bottom: none;
    }

    Is there anything else I can try? Thank you!

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Hi @jenbokoff, changes like this fall outside the scope of the CSS support we offer here.

    But you’d be welcome to hire a designer if needed, or try tinkering with :after to add category names back to those specific pages.

  • Unknown's avatar
    slantedplanet · Member ·

    Hello Jen, Hello @supernovia!

    I had success with this CSS on Jen’s Jeneralist page.

    /* add Jeneralist text just before of the page title */
.category-jeneralist h1.page-title::before {
  content: 'Jeneralist';
  color: #00856f;
  font-size: 150%;
  letter-spacing: 0px;
}

/* make the standard page title text invisible */
.category-jeneralist h1.page-title {
	color: transparent;
}


    @supernovia    ’s reply inspired the idea to add Jeneralist using the CSS ::before psuedo-element.

    The font-size and letter-spacing declarations are optional. That is just me amusing my inner-designer and including other settings that can help you customize the appearance of that title. You can adjust the values as you like or omit those two declarations completely.

    There are other non-CSS solutions that scale better if you eventually need to make adjustments for multiple categories. For one category and a CSS-only constraint, this code should produce the customized title you wanted.

    Please let us know if it works for you.

  • Unknown's avatar
    jenbokoff · Member ·

    Ahhhh thank you so much @slantedplanet! This is so exciting. It works perfectly and was such a smart hack. Thank you thank you! (And, I always appreciate inner-designer voices.)

    And @supernova, thanks too for your comment that set this in motion! I might ultimately hire a designer at some point down the road for some other things, but this solution is perfect for my needs right now.

  • The topic ‘A css solution to an archive page issue?’ is closed to new replies.