Twenty Fourteen: customize category archives page

  • Author
    Posts
  • #1942094

    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.

    #1942167

    lizthefair
    Staff

    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.

    #1942346

    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!)

    #1942347

    lizthefair
    Staff

    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.

    #1942349

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

    #1942351

    lizthefair
    Staff

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

    #1942352

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

    #1942353

    lizthefair
    Staff

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

    #1942356

    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?

    #1942357

    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?

    #1942358

    (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!)

    #1942361

    lizthefair
    Staff

    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.

    #1942364

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

    #1942365

    lizthefair
    Staff

    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.

    #1942368

    Woohooo! Worked!
    Thank you!

The topic ‘Twenty Fourteen: customize category archives page’ is closed to new replies.