Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)
-   -   How to align thumbnails left of post title on homepage (http://forum.bytesforall.com/showthread.php?t=4997)

tmd_2008 Dec 23, 2009 02:05 PM

How to align thumbnails left of post title on homepage
 
I would like to know how I can align the thumbnails left of the post title on the homepage. I currently use Thumbnails for Excerpts. It functions fine, but it displays the thumbnail below the post title. Is there a solution to this problem? Or does anyone have a better plugin for using thumbnails on the homepage? My main issue is getting the thumbnail to align left of the post title on the homepage. Thank you in advance for your help. Website: http://purdueboilerup.com.

thebeersoapcompany Jan 11, 2010 05:32 PM

Hi,

Did you ever find a solution to this problem? I am currently using the same plugin and have ran into the same problem.

tmd_2008 Jan 13, 2010 09:20 AM

No I have not found a solution yet. I occasionally search the web, but haven't found the solution to my issue. Fortunately, it's not a must-fix, but I still would like to figure it out as soon as I can. Let me know if you or someone else finds the answer. Thanks.

WendyCholbi Apr 14, 2010 05:19 PM

I would also like to know how to do this. I tried floating the headline box right, which did bring the headline down, but didn't give the exact desired effect.

If I figure it out I'll post here.

An example (not using Atahualpa -- just for illustration purposes, though I'm examining their source code to see if I can adapt Atahualpa's loop code or css) is http://www.mamamia.com.au/

lmilesw Apr 14, 2010 07:31 PM

This isn't an exact fix as it doesn't take into account if the title has two line or one but maybe it will give you something to work with. Just put the following in the Atahualpa CSS inserts box.
HTML Code:

div.post-headline h2 {
display:block;
margin-left:80px !important;
}
.post img {
float:left;
margin-top:-60px !important;
}


WendyCholbi Apr 15, 2010 11:49 AM

Excellent, thank you Larry, this was the boost I needed to get me thinking in a different direction.

My thumbnails are going to be 150px wide and 100px tall, so I've currently got this version of the code you suggested:

Code:

div.post-headline h2 {
display:block;
margin-left:170px;
}
div.post-bodycopy img.wp-post-image {
float:left;
margin-top: -30px;
}

Which works perfectly for post headlines that are one line (and doesn't appear to affect the placement of the image in the full post, which is good).

For post headlines that run over to two lines (and who knows, maybe three), I'll have to noodle around some more. I'm thinking I may have to venture into the realm of absolute and relative positioning, though that may open several new cans of worms. Good thing I like playing with code!

Or, hmm, I could ask the client to try and keep to a character limit on post titles. Would simplify things for me, but not for the client. Heh.

I'm not quite ready to post a link here, since the site is for a client and is still in development. When it launches, I will definitely give the URL.

lmilesw Apr 15, 2010 11:55 AM

What's the URL? I would love to see how it worked.

paulae Apr 15, 2010 12:23 PM

In Wordpress 2.9.2, you don't need a plugin to use thumbnails, and they automatically appear to the left of the title and excerpt on the front page.

lmilesw Apr 15, 2010 12:49 PM

I just tried what you suggested Paula but he thumbnail doesn't float to the left of the title of the post just the text. WendyCholbi and the others wanted to float the image to the left of both the title and text.

paulae Apr 15, 2010 12:55 PM

Ah. I see what you mean. I think it looks nicer under the title, personally.

WendyCholbi Apr 15, 2010 01:40 PM

Larry is right, in my case the client has requested that the thumbnails appear on the left, with the post title, excerpt, and "read more" link to the right of the thumbnail image. I don't have a big personal preference here, and I figured it couldn't hurt to learn how to position the thumbnail differently, for future clients.

I didn't clarify before, but I'm not using any thumbnail plugins, just WP 2.9.2's built-in thumbnail feature and Atahualpa's options. If there's a plugin that will do the trick, I'll happily use it, but this situation seems to call for careful CSS rather than a plugin. I think :)

Client will probably be launching next week -- fingers crossed -- and I'll share the URL then.

Thanks Larry and Paula for the helpful suggestions, and I'll update this thread when I've got a final version...or if I run into more tangles.

lmilesw Apr 15, 2010 01:42 PM

Another solution that might be easier is to add the following code to CSS inserts. This will hide the title.
HTML Code:

div.post-headline h2 a:link, div.post-headline h2 a:visited, div.post-headline h2 a:active, div.post-headline h1 a:link, div.post-headline h1 a:visited, div.post-headline h1 a:active { display:none; }
Then just put the title as part of the post
Now you can float the image left or use the thumbnail feature.


All times are GMT -6. The time now is 03:49 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.