ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   rkread
   Member

   Hey everyone,

   I'd like to style my post-thumbnails on my Thematic child-theme category pages differently than the default style, where the thumbnail appears on top of the post.

   What do I add/change to the following code that will enclose the thumbnail in its own <div>?

   add_theme_support('post-thumbnails');
   	set_post_thumbnail_size(128, 128, true ); // 128 pixels wide by 128 pixels tall, hard crop mode
   
   function my_post_title($title) {
   	if (is_category()) {
   		return get_the_post_thumbnail(NULL, 'thumbnail') . $title;
   	} else {
   		return $title;
   	}
   }
   add_filter('thematic_postheader_posttitle', 'my_post_title');

   Thanks very much for your help. PS, I'm a PHP newbie. Please don't assume anything. ;-)

   Posted 3 years ago #
2. 

   rkread
   Member

   Still looking for answers and help... Am I asking the wrong questions, posting in the wrong forum? Just mystified and hoping for a response from the community.

   How and where do I add a <div> to my Thematic Child theme so I can style it (in my css file) to have post excerpt text on category pages to wrap around the post-thumbnails instead of appearing underneath them?

   Assuming it's the functions.php file, what would be the code I'd need to add to the snippet I posted above?

   This is the css I have tried with the code as it is but it just isn't working:

   /* Post thumbnails*/
   
   img.wp-post-image {
   	float: left;
   	margin:0 9px 9px 0;
   	display:inline;
   }
   
   a img.wp-post-image {
   	float: left;
   	margin:0 9px 9px 0;
   	display:inline;
   }

   Posted 3 years ago #
3. 

   burgundydurango
   Member

   Howdy,
   I wound up using info from this site:
   http://www.kremalicious.com/2009/12/wordpress-post-thumbnails/

   to adjust size the thumbnails using this bit of code:
   <?php the_post_thumbnail(array( 200,200 ), array( 'class' => 'alignleft' )); ?>

   It talks about adding classes so you should be able to style them that way? I'm awful with PHP myself so I hope this helps.

   Posted 3 years ago #
4. 

   rkread
   Member

   thanks burgundydurango,

   I have checked out that site but he talks about putting code directly into template pages. I'm working with a child theme I've created where I don't touch the Thematic "parent" theme template pages--I'm just modifying one functions.php file and the .css file, so I really don't know how to use his suggestions.

   Still looking for answers...

   Posted 3 years ago #
5. 

   flick
   Member

   @rkread: I assume this is related to your other post?

   The CSS for the post-image itself looks ok to me (the newbie that I am) as the thumbnail is floated and is set to display inline.

   However, it seems taking out clear:both from the headings elements (e.g. h1 to h6 found in typography.css or you could override it in style.css) actually allows the text to wrap around the image.

   Not sure how this change will affect the rest of the site though, but at present, I haven't spotted any obvious difference when using the default theme.

   Test link: http://thematic.wpsnippets.com/?cat=1

   To override the typography.css style:
   

   h1,h2,h3,h4,h5,h6 {
   	clear:none;
   }

   p/s: Have just read an article by Ben Gremillion called Fight Div-itis and Class-itis With the 960 Grid System which suggests that we don't have to use divs all the same if we use 'semantic' code.

   Posted 3 years ago #
6. 

   rkread
   Member

   @flick, thanks so much for your response. And thank you for referring me back to my original post on that other thread--reading it all over now I think there is some info from Chris that I overlooked (oops) at the time. And thanks for the test link too-- I'll take your suggestions and report back and hopefully i can mark this issue RESOLVED.

   Posted 3 years ago #
7. 

   flick
   Member

   @rkread: I happened to come across your other post by accident and thought it was a pretty useful thread to link to. :D Personally I would like to add a class to the thumbnail as burgundydurango suggested, but haven't gotten round to testing that yet with my newbie skills. The CSS change seems to work for me but hopefully it won't have an adverse effect on the rest of the site.

   p/s: I checked the Blueprint CSS, which the default theme is based on, and it seems the clear:none is a custom change to the original Blueprint.

   Posted 3 years ago #
8. 

   rkread
   Member

   @flick, Alrighty then! this css snippet was all I needed, as you suggested:
   

   h1,h2,h3,h4,h5,h6 {
   	clear:none;
   }

   Also, checked my functions.php file against the code Chris had suggested in that other thread--I had indeed incorporated all his suggestions so turns out I didn't really miss anything, except the all-important "Still needs some styling :)" which of course it did. Note that "in front of the post title" doesn't necessarily mean "to the left of, and wrapped by, the post title" ;-)

   Thanks so much for helping me solve this issue!

   Posted 3 years ago #
9. 

   flick
   Member

   @rkread: Glad it worked for you too :) It's certainly been helpful to me as well, thanks!

   Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.