Need help? Check out our Support site, then


Twenty Fourteen: customize category archives page

  1. marieevepreaux
    Member

    Hello!

    Is there any way to customize the way a Category Archives title page looks like? On my website, I just have this awkward big white space, and the smallish, black text that reads "Category Archives: Blog" where I would rather have a custom image/banner. Any way to do that?

    Also, is there any way to add a line/spacer/separator between posts on the same Category Archive Page?

    Thanks a lot in advance,
    all you helpful, gifted people are awesome!

    The blog I need help with is leadshepherd.org.

  2. ok, so there are a lot of contributing factors to the problems you are experiencing--so I'm not totally sure we are going to get this in one go. Let's start with this.

    .content-area {
         padding-top: 0px !important;
    }

    It looks like you've added padding to the content area a couple of times, so doing this might cause problems other places. If it does, we can come at it another way, but for now it's contributing to the big white space at the top of your blog page.

    .archive-header{
         display: none;
    }

    I know you said you wanted to replace the plain text with an image or other header--and if this doesn't work we can try that. I think having just the posts on the page however might work out nicely.

    .entry-content{
        border-bottom: 2px solid black;
    }

    I'm not sure what you wanted the separation to look like exactly, but this is a place to start. It will probably show up on your homepage too, so if that's a problem let me know and we'll try something else.

  3. marieevepreaux
    Member

    Hello!

    Back working at my customization this morning!
    Two questions regarding your very appreciated tips and suggestions:

    - Any idea how i could replace the "Category Archives: Blog" text (that was succesfully hidden) with an image?

    - You are right, the border appears everywhere else. Any way to keep it solely on the category pages and not on every pages? If not, ill just lose it altogether...

    Thanks again (and a beautiful Monday to you!)

  4. Ok, these are both total guesses that I wasn't able to test properly, but we'll see what happens.

    Replace the .archive-header code with this:

    .archive-header{
         background-image: url('http://lizthefair.files.wordpress.com/2011/12/lhf-blog-header-no-tag.png');
    }
    
    .archive-header h1{
         display: none
    }

    Note: that url just goes to my blog's header. Obviously you won't want to use that long-term ;)

    for the line problem try this:

    .catagory.blog .entry-content{
        border-bottom: 2px solid black;
    }

    I don't think the second one is going to work as I don't think I've isolated the class correctly, but feel free to try it while I dig a bit more.

  5. marieevepreaux
    Member

    Seems like there is competition between those two first bits of code. When I use them both, i have nothing (but a white gap). If i get rid of the second bit, I have the text that we were trying to get rid of AND a bit of the header underneath it (I saved it like that so you can see what I mean).

    As for the line, you were right, it didnt work ;)

  6. That's interesting, and frankly not what I expected.

    Try this:

    .archive-header{
         background-image: url('http://lizthefair.files.wordpress.com/2011/12/lhf-blog-header-no-tag.png');
    height: 180px;
    max-width: 900px;
    margin: 0;
    }
    h1.archive-title{
         Display:none;
    }
  7. marieevepreaux
    Member

    Worked!
    You truly are my css fairy godmother! Thanks a lot!

  8. yay!!

    If I think of anything else to try on the visual separation of the posts--only for the category page--I'll let you know but don't hold your breath or anything, I think that one might have me stumped ;)

  9. marieevepreaux
    Member

    I suspect that this bit of code...

    /*No space on top of category archive page*/
    .content-area {
    	padding-top: 0 !important;
    }

    ... also got applied to my front page welcome page - I now have no space between the slider and the title. Any way to apply a different padding on the front page only?

  10. marieevepreaux
    Member

    Also, itd be nice to have a little padding at the bottom of the header, before the posts. Do you think I should include that in my header (and give it more vertical real estate) to avoid fussing around with some more padding issues?

  11. marieevepreaux
    Member

    (I found that changing the top padding would fix my problem both with the front page and the single post pages, but then my custom header for the blog category page would also shift... arg!)

  12. could you change the top-padding as you describe and let me see how it impacts the blog header? The blog header has a unique selector so if you can make everything else look ok with general padding, I think our options with the header will be a little more forgiving.

  13. marieevepreaux
    Member

    Added (a dramatic) 50px to let you see...

  14. we'll just give that bad boy a negative top margin and we'll be golden.

    .archive-header{
         background-image: url('http://lizthefair.files.wordpress.com/2011/12/lhf-blog-header-no-tag.png');
    height: 180px;
    max-width: 900px;
    margin: 0;
    margin-top: -50px;
    }

    If you make the margin-top the negative equivalent to whatever you set the padding at you should be good.

  15. marieevepreaux
    Member

    Woohooo! Worked!
    Thank you!

You must log in to post.

About this Topic

Tags

No tags yet.