Category page grid layout.
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.
|
Quote:
|
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. |
Quote:
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
Code:
body.page-template-template_multi_column_custom_query-php .mccq_column1 {width: 25%;} 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
Code:
div.post, div.page { |
Here's the CSS inserts I arrived at. I also had to go into the page itself and tell it 5 columns.
Code:
/* to set up columns on category pages */ |
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.
Code:
<table cellpadding="5" cellspacing="5" border="0" width="580px"> |
@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' |
Quote:
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. |
All times are GMT -6. The time now is 05:32 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.