I'm working on a talent agency site which has hundreds of models and actors, each with their own page. I'd like the category pages to display in a grid -- that's been a major hassle. I settled on Juggledad's multi-column template, but it's not quite as compact as I'd like.

Here's a sample:
http://nymodeltalent.com/site/women2/

So my questions...

1) I was thinking of shrinking the titles of each excerpt. First, I had trouble doing that. (Isn't it H1 in css/html inserts? Couldn't get it to work.) But if I do that, won't it affect the titles on the actual individual pages? That would be bad.

2) Is there a way to make each box the same height, so the gutters don't show so much? Variations in picture height and length of peoples' names cause different heights, and it's ugly.

3) If I reduced the margins around each excerpt, it might be better looking, but wouldn't that reduce the margins in individual pages too much?

I would play with using the WP Gallery function perhaps along with the JetPack module for galleries. There is also another plugin for linking an individual image to a page or whatever.

1) I was thinking of shrinking the titles of each excerpt. First, I had trouble doing that. (Isn't it H1 in css/html inserts? Couldn't get it to work.) But if I do that, won't it affect the titles on the actual individual pages? That would be bad.

2) Is there a way to make each box the same height, so the gutters don't show so much? Variations in picture height and length of peoples' names cause different heights, and it's ugly.

3) If I reduced the margins around each excerpt, it might be better looking, but wouldn't that reduce the margins in individual pages too much?

you can target your SS by making the CSS Selector specific for that page by begining all the CSS with 'body.page-template-template_multi_column_custom_query-php' - this will effect any page you use teh template on or you could use 'body.page-id-3084' to target that one page

lmilesw: You're talking about creating a gallery, then manually linking each picture to the model's page? I think that'll be a last resort, since I have close to 200 models, and there's updates all the time. I'm trying to get this to automate based on categories.

juggledad: What do you mean by SS? Are you talking about making changes in the Add HTML/CSS Inserts area? That sounds promising, but I might need some example code to get me started. I'm not fluent in CSS -- I do most of my coding by copy/paste and trial and error.

What do you mean by SS?

fat fingers, should be CSS

you can use the FireBug extension in Firefox to see the css being applied and change it on the fly to see what you need to use.

Ok. So far, I've updated my column CSS as

body.page-template-template_multi_column_custom_query-php .mccq_column1 {width: 25%;}
body.page-template-template_multi_column_custom_query-php .mccq_column2 {width: 25%;}
body.page-template-template_multi_column_custom_query-php .mccq_column3 {width: 25%;}
body.page-template-template_multi_column_custom_query-php .mccq_column4 {width: 25%;}

That's an improvement over naming EACH of my category pages one by one. (That was 14 individual category pages.

So I'm trying Firebug -- I've heard great things about it, but never been able to understand it. For one thing, the rollover function seems to give me only HTML results, not CSS. So now I'm left with 1000 lines of code to sift through. Starting by looking for H1 and H2 functions to change -- so far so good!

Any idea what to look for to reduce the padding in each box? It would be nice to fit in 5 columns.

Found some promising things to finesse under

div.post, div.page {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 10px solid #E5E5E5;
    border-radius: 10px 10px 10px 10px;
    display: block;
    margin: 10 10 10px;
    padding: 10px 0px 10px 10px;
}

Here's the CSS inserts I arrived at. I also had to go into the page itself and tell it 5 columns.

/* to set up columns on category pages */

body.page-template-template_multi_column_custom_query-php .mccq_column1 {width: 20%;}
body.page-template-template_multi_column_custom_query-php .mccq_column2 {width: 20%;}
body.page-template-template_multi_column_custom_query-php .mccq_column3 {width: 20%;}
body.page-template-template_multi_column_custom_query-php .mccq_column4 {width: 20%;}
body.page-template-template_multi_column_custom_query-php .mccq_column5 {width: 20%;}

/* to reduce size of page h2 name links */

body.page-template-template_multi_column_custom_query-php  div.post-headline h1, div.post-headline h2 {
    font-size: 1.0em;
    margin: 0;
    padding: 0;
}

/* to reduce padding around model post excerpts */

body.page-template-template_multi_column_custom_query-php div.post, div.page {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0px solid #E5E5E5;
    border-radius: 0px 0px 0px 0px;
    display: block;
    margin: 0 0 0px;
    padding: 10px 0px 0px 20px;
}

In looking at some of my pages, I may have to go back to 4 columns. Some long names and wide photos still make 5 columns troublesome.

I have a similar setup on my site - example: http://www.luckydragonstudio.com/category/all/
Don't know if it's any different to what you've already sorted out but I'm happy to pull out the code if it might be any use?

Looks good, Tim. Did you use Juggledad's multi-column template?

I use this script for my loop/grid - it can go in the center column contents or in a custom archive.php. Not sure if its a downgrade from JDs template! You can change cols_per_row to any number, control column width with the TD setting, and add or remove any post parts.

 <table cellpadding="5" cellspacing="5" border="0" width="580px">
<?php
$col = 0;
$cols_per_row = 3;
while (have_posts()) : the_post();
  if($col == 0) echo '<tr>';
  ?>
  <td width="170px" class="column'<?php echo $col; ?>" style="vertical-align: top">
<!-- This is the post bits -->
<?php the_excerpt(); ?>
<br clear="left"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
  </td>
  <?php
  if($col++ >= $cols_per_row){
	$col = 0;
	echo '</tr>';
  }
endwhile;
?>
</table>

@sky captain: FTI - it looks like Tim F is running version 3.6.4 where you could add php to the center area option, but that had to be removed due to WP restrictions.

The example code is 'in general' the same as what is in the mccq template, the template 'has more'

Originally Posted by juggledad

@sky captain: FTI - it looks like Tim F is running version 3.6.4 where you could add php to the center area option, but that had to be removed due to WP restrictions.

And a very sad loss that was - I've never upgraded for that reason. Although in the example I posted before I just created a new file called archive.php by copying the contents of atahualpas index.php and then inserting the script for my new loop where the default atahualpa loop was.

For interests sake here's an example on my other blog, I used the same script but changed which post parts are displayed to include the excerpt and cut it down to 2 columns.