WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Different CSS on posts and archive page (3 posts)

  1. e9designs
    Member
    Posted 1 year ago #

    Hi, I am making a theme for a client on my test domain at
    http://test4.e9designs.com
    It is a custom child theme based on the Genesis theme.

    The client wants TWO headers on each page. The top header has the blog's title, but the background images rotate depending on the category the visitor is viewing. With the use of the "Unique Headers" plugin, I've got that working.

    The second header is visible on all pages except index. It will have the category title, and again, the background images should rotate depending on which category it is.

    I have NOT been able to figure this out, so I cheated and just uploaded a background image into the code, like this:

    /* Category Headers
    ------------------------------------------------------------ */
    
    body.single-business div.post {
    	background: url('http://test4.e9designs.com/wp-content/uploads/2013/02/business-large.png') no-repeat center top;
    	padding: 0px 0px 164px 0px;
    }
    
    body.single-wisdom div.post {
        background: url('http://test4.e9designs.com/wp-content/uploads/2013/02/wisdom-large.png') no-repeat center top;
    	padding: 0px 0px 164px 0px;
    }
    
    body.single-nature div.post {
        background: url('http://test4.e9designs.com/wp-content/uploads/2013/02/nature-large.png') no-repeat center top;
    	padding: 0px 0px 164px 0px;
    }

    On the posts, I used the "Ambrosite Body Class Enhanced" plugin to help me define classes for each category in the CSS. Maybe I didn't need it, but I'm still learning, and this seemed to work.

    On the category archives pages, I went into the Category section of the dashboard and just added an image to the Archive Intro Text of the Category Archive Settings.

    The problem, which you can see an example of at
    http://test4.e9designs.com/category/business/
    is that there is a huge white space under the 2nd header, before the post content begins.

    It looks just fine on the post pages, as you can see at
    http://test4.e9designs.com/sample-post-with-headlines/

    Here is the offending code:

    #content .post {
        border-bottom: 1px solid #DFDFDF;
        margin: 0;
        overflow: hidden;
        padding: 174px 20px 15px;
    }

    I am *sure* there is a better way to do this, but I just can't figure it out.

    Even worse, I don't like that all these images are coded into the CSS style sheet, because my client was really hoping to be able to make these changes himself, through the media library. However, I think it's getting beyond my skills, unless I could find a plugin to solve the problem.

    Can anyone advise? Thank you *so* much!
    ~Anne

  2. paulwpxp
    Font hero
    Posted 1 year ago #

    You are using a commercial theme framework, you shouldn't be doing this kind of hack. Most theme frameworks provide hooks for this kind of thing already.

    I would suggest asking this directly to the theme's support forum. They will tell you to put the image(s) via this whatever_before_post_title hook

    You can also continue with the method you are using, you would just need to apply that padding with specific class and the problem will go away.

    Anyway, the forum here is not for supporting commercial theme.

  3. e9designs
    Member
    Posted 1 year ago #

    Thank you so much! I didn't know this, and it sounds like there's going to be a good solution to my problem. I really appreciate it. I'll head over to Genesis to ask.

Topic Closed

This topic has been closed to new replies.

About this Topic