[SOLVED] Style a post (blog page) different than a page (cms)?
 

Hello,

I've been searching the forums but haven't been able to figure this one out. I am working on http://litteacher.com. My friend wants to add this image (http://litteacher.com/wp-content/the...ond-header.png) to the top of just the blog pages.

You can see it more clearly here in this mockup: http://web.me.com/mwfbooks/SOS/Site_...ite.blog.2.jpg. The image is appended directly to the top of the background of the center column.

This would be on the main blog page (called "Blog") and on the single post pages. I would need to keep the rest of the site, acting as a cms, as it is.

So, I guess there are really two related issues. Is it possible to add this image to the top of the center column with no spacing or padding between the image and the background of the center column? And, is it possible to only do this for the blog, both multi- and single-post, pages?

Thank you for any help or direction you can provide. I keep recommending this theme and forums to friends because of how helpful and knowledgeable the people here are.

Jason Bedell.

The Dynamic Headers plugin should do the trick.

Thank you. Which option would you recommend and, if 1, where should I add the code?


Option 1 (Recommended): Simply drop the this line of code into your theme file that controls your header (usually header.php)

Note: The location to add this code can vary widely from theme to theme and depending on your theme's css settings you may have to use Option 2 and modify the CSS of your theme **BACKUP ANY THEME FILES BEFORE MODIFYING**

<?php if(function_exists('show_media_header')){ show_media_header(); } ?>

This will automatically determine what type of media you are using and generate the appropriate code to insert it. No other coding is required on your part.

Option 2: You can use this line of code to simply get the URL of the media for a particular post or page. This will allow you to do some more advanced things and embed the media yourself if you know what you are doing.

<?php if(function_exists('dh_get_page_image_url')){ $dynamic_header_url = dh_get_page_image_url(); } ?>

You can then use the variable $dynamic_header_url however you see fit. It will contain the full path to your media file for that particular page/post, including any default media that should be shown.

Thank you again.

OK. I found another thread where Juggledad answered that question. The only other question I have about it is if it is possible to disconnect it from the header (I guess I could add a transparency to the top of the image if necessary) and connect it to the background of the center column?

It looks like I should be able to remove it with:

td#header {
padding-bottom:0;
}

What class would I add to the td#header to make it only relevant to blog pages?

Thank you.

This code works just for the blog page, but I don't know how to make it work for all the single-post pages.

Also, when I add this back in to fix the rest of the pages, it messes up what I had working on the blog page.

I am not real clear on what you are trying to accomplish but perhpas conditional php could help.

Basically, on the blog page, I need the picture that is displayed to connect (no spacing) with the center column.

I can do this by eliminating the bottom padding in the header.

The problem in doing so is that the rest of the pages look funny; the spacing just looks wrong when that padding is removed.

Can I put php in HTML/CSS Inserts?
If so, how would I structure it?

I know some PHP but I'm not sure how to structure the "on blog page" part.

setup the site the way you want it for all but the blog page, then add CSS Inserts to style the blog page and use 'body.blog' as the beginning selector.

For example, lets say you set the post body copy to display in blaxk, but you want them red on the blog page, you would use

Juggledad,

That worked perfectly. You really are brilliant at this. If it helps anyone else, I used
.
If you could, what would I put to include the single-post pages?

LMilesSW, you're help was invaluable as well. The dynamic header worked very well. Thank you both for your time.

just use 'body.single.....'

Thanks for putting up with me. :) I think you declare the thread solved.