Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Resizing and Aligning Images on the Homepage WordPress

  • SOLVED

I would like to take the images that are displayed on the home page and rearrange them exactly like this:

http://www.simpsonscottphotography.com/

I dont' want to change how they function, only to re-format them into this size and order.
Can you tell me how to do this?!

Thanks
melissa

If you are offering to do any sort of custom coding, can you please quote your price? Otherwsie if you can offer a starting point I'm pretty good at figuring out stuff.

Answers (3)

2010-10-28

Nick Parsons answers:

Actually, this is a pretty easy fix. Put the following at the bottom of style.css (or anywhere in one of your stylesheets, for that matter) -

.home .featured.post {
border-color: #FFFFFF;
border-style: solid;
border-width: 0 0 5px 5px!important;
height: 150px!important;
width: 150px!important;
}

.home .featured .post-content p{
display: none;
}
.home .featured .post-content h4{
width: 140px;
font-size: .75em;
}

2010-10-28

Pippin Williamson answers:

What do they look like right now?

We can't help you if you don't provide a comparison (what you have now).

But I'll start by saying that you will need to use CSS and floats to do this.


Pippin Williamson comments:

This is going to require a lot of custom coding, which I'd be more than happy to help you do, but it's going to cost more than $10.

Feel free to email me from my profile page if you'd like my assistance.


Pippin Williamson comments:

I would expect it to take me between 1-2 hours at $45 / hour.

If you want to do it yourself, then essentially what you will need to do is make each of the images on the home page a set size, such as 100px x 100px. I'm not entirely sure how the Auto Focus theme works, but in some way or other, it has each of the images on the homepage set to a different specific size.

You will also need to take into account the descriptions, which are currently contained inside of either a div or a span. You will need to make these show only when the mouse hovers over the image. The descriptions will also need to be positioned such that they are on top of the images, rather than next to.

If you can manage all of that, then you're on a good start.


melissamcmahon comments:

Ok. I'll think about whether or not that might be over my head and I'll get back to you by tonight.
Thanks

2010-10-28

Chris Lee answers:

I would recommend using timthumb script for this.

http://code.google.com/p/timthumb/

I can just set this up for you.


melissamcmahon comments:

when you say set it up, do you mean install the timthumb? What are you asking over and above the $10.00


Chris Lee comments:

You have email?

email me at iam (at) chrisjlee (dot) net