Maybe try using a different theme that is closer to what your designer wants. Then the editting will be far less.
http://wordpress.org/extend/themes/
http://codex.wordpress.org/Using_Themes/Theme_List
Thread Starter
joedan
(@joedan)
Thanks, but it’s not a matter of changing themes… it’s a matter of separating the various items that make up a post (headline, image, content, dateline, etc)… and then assembling them to achieve the desired result. The problem is that the image is contained with the content so one has to do a little CSS magic and that’s the part I’m stuck on. Alternatively, I could find the area in the WP code where “the_content” is created and fiddle with it. (That’s a real last resort for me)
I’m not quite certain from the jpg image you posted what it is you want to achieve. Are you saying you always want images to be at the top right?
From what I can see looking at your source code,
I’m guessing that if you add this to the stylesheet and fool with the stylespecs, you’ll be able to achieve what it is you want:
.post h2 {/*stylespecs*/} //headline of post
.post small {/*stylespecs*/} // dateline
.post .entry {/*stylespecs*/} // whatever is in the post
.post .entry img {/*stylespecs*/} // image in post
.post .postmetadata {/*stylespecs*/} // 'posted in' details at bottom of post
Given the structure you have (with the image contained within the post content), I can only think of a kind of lame approximation of the effect you want (abbreviated slightly):
<div class="post" id="post-14">
<div class="post-header">
<h2>Let it snow.</h2>
<p class="post-date">December 6th, 2005
</div><!-- End .post-header -->
<div class="entry">
<img src="snowy-ch.jpg" class="photo-r" />
We got our first dose of snow over night.
[...]
</div><!-- End .entry -->
[...]
</div><!-- End .post -->
Give the post-header either (1) a fixed width that looks ok or (2) a right margin that will leave room for all (most?) of your images:
.post-header{
width: 16em;
/* OR */
margin-right: 200px;
}
Then pull the image up with a negative margin —
.post .photo-r{
float: right;
margin-top: -1.5em; /* fiddle with this value */
}
— but that will put it only roughly in the right spot — it would depend on whether the post title wraps to more than one line.
Thread Starter
joedan
(@joedan)
Thanks all. I had thouht about the negative “top” margin to shift the content up to the same horizontal as the headline. But that seems like things will break easily when the headline is too large or the visitor ups the size of their font display.
Does anyone have a thought on how to get the image into the post without it being embeded in the text of the post? (All the image plugins I see seem to put the image in the body of the post)
I guess as a last resort, I’m going to have to find the place in WP where “the_content” is created and cram the headline into “the_content” somewhere. (I guess alternatively I should really create my own custom “joe_content” modeled after “the_content” and leave “the_content” alone so I don’t break other stuff.
Anyone know specifically where “the_content” is created?
Thread Starter
joedan
(@joedan)
Oh yeah… forgot to answer some questions…. Yes the solid color box in the designers sample is supposed to represent an image. Problem with proposed solutions is that I can’t set the right margin of the headline since the images are of different sizes. Thanks ~joe
