ThemeShaper Forums » Thematic

[closed]

Styling index page differently from post page

(6 posts)
  • Started 2 years ago by jameskyle
  • Latest reply from jameskyle
  • This topic is resolved

  1. jameskyle
    Member

    I'm trying to create a photo blog where only the post title is shown on the main page, with the background image on each post relevant to the post content. Here's my edits to the default thematic styling so far...


    #content {
    }

    .hentry {
    width: 260px;
    float: left;
    height: 270px;
    padding: 5px 5px 5px 5px;
    }

    .entry-content {
    visibility:hidden;
    }

    .entry-utility {
    visibility:hidden;
    }

    .entry-meta {
    visibility:hidden;
    }

    This removes all but the post title from the post and sets it into two columns. When I click on one of them however, the styling carries over. Can I set it in the CSS so that the meta, content and utility areas are only hidden in the index page or is there another way to do this?

    Posted 2 years ago #

  2. Jonny Janiero
    Member

    ideally, you would create this via functions, templates.
    if you are not confident with such... and want to hide the elements using css...
    you need to take advantage of the dynamic css classes

    for example ...

    body.home .hentry {
width: 260px;
float: left;
height: 270px;
padding: 5px 5px 5px 5px;
}

body.home .entry-content {
visibility:hidden;
}

body.home .entry-utility {
visibility:hidden;
}

body.home .entry-meta {
visibility:hidden;
}

    the class body class 'home' relates to elements on your home page.
    some others,
    body.single (single post)
    body.category (category page)
    there are many, if you look in the extensions in thematic it shows all the dynamic classes created. you can also see them using firebug for firefox.

    it is better to remove things rather than hiding them on a page, but as i said, if this is something you feel you cannot do, use the classes.
    theres plenty of resources and forum posts on how do pretty much anything with thematic. brew a coffee and get reading.

    hope this helps

    Posted 2 years ago #

  3. jameskyle
    Member

    That worked out great, exactly what I was looking for. I'm not sure but I don't think I could use CSS to make the background image for the content divs on the index page the featured image of the post it represents, as that'd need to be some kind of background-image=featured-image statement. Does anyone know a function that'd do this?

    Once I have this sorted then it's just a matter of messing about with the layout and typography, I'll hassle the forum no more. :)

    Posted 2 years ago #

  4. jameskyle
    Member

    In retrospect it seems I'd be better styling the posts page individually rather than the index, since this way posts would be normal when viewed but be in the 300px squares I want in every other page (archives, search, category views, etc.) I'll make those changes, but if anyone can help with making all but the single post page .hentry div background that of the featured image I'd appreciate it.

    Posted 2 years ago #

  5. jameskyle
    Member

    Okay, here's how far I am with what I'm trying to do.

    I've added the following CSS:

    /* My edits */

    #content {
    background-color:#00FF00;
    width: 620px;
    }

    /* Make every instance of posts into a little box */
    .hentry {
    width: 300px;
    margin-right: 10px;
    margin-bottom: 10px;
    float: left;
    background-color:#9933FF;
    height: 300px;
    padding: 0px 0px 0px 0px;
    }

    .entry-title {
    width: 300px;
    background-color:#999999;
    }

    .entry-content {
    visibility:hidden;
    }

    .entry-utility {
    visibility:hidden;
    }

    .entry-meta {
    visibility:hidden;
    }

    /*Special case for single posts pages */

    .single #content {
    width: auto;
    }

    .single .hentry {
    width: auto;
    margin 0px 0px 0px 0px;
    float: none;
    background-color:#FFCC99;
    height:auto;
    padding: 5px 5px 5px 5px;
    margin: 0px 0px 0px 0px;
    }

    .single .entry-title {
    width:auto;
    background-color:transparent;
    }

    .single .entry-content {
    visibility:visible;
    }

    .single .entry-utility {
    visibility:visible;
    }

    .single .entry-meta {
    visibility:visible;
    }

    /* Basic unordered post )page) with exceptions */
    .page-template-template-fullpage-php .hentry {
    width: auto;
    margin 0px 0px 0px 0px;
    float: none;
    background-color:#FFCC99;
    height:auto;
    padding: 5px 5px 5px 5px;
    margin: 0px 0px 0px 0px;
    }

    .page-template-template-fullpage-php .entry-title {
    width:auto;
    background-color:transparent;
    }

    .page-template-template-fullpage-php .entry-content {
    visibility:visible;
    }

    .page-template-template-fullpage-php .entry-utility {
    visibility:visible;
    }

    .page-template-template-fullpage-php .entry-meta {
    visibility:visible;
    }

    /* Full page width template exceptions */
    .page .hentry {
    width: auto;
    margin 0px 0px 0px 0px;
    float: none;
    background-color:#FFCC99;
    height:auto;
    padding: 5px 5px 5px 5px;
    margin: 0px 0px 0px 0px;
    }

    .page .entry-title {
    width:auto;
    background-color:transparent;
    }

    .page .entry-content {
    visibility:visible;
    }

    .page .entry-utility {
    visibility:visible;
    }

    .page .entry-meta {
    visibility:visible;
    }

    Now I just need to make the .hentry areas of all but those posts with exceptions (listed in the CSS above) have either a background image that's the post's featured image.

    Posted 2 years ago #

  6. jameskyle
    Member

    Since my subsequent question is different from that posted originally I'll just mark this as resolved. If I have any future problems I'll start a new thread. Seems like the right thing to do.

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.