Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

Category page grid layout.


  #1  
Old Jun 25, 2013, 12:44 PM
sky captain's Avatar
sky captain
 
57 posts · Sep 2009
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?
  #2  
Old Jun 25, 2013, 07:44 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Jun 26, 2013, 03:04 AM
juggledad's Avatar
juggledad
 
23,671 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
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
  #4  
Old Jun 26, 2013, 10:20 AM
sky captain's Avatar
sky captain
 
57 posts · Sep 2009
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.
  #5  
Old Jun 26, 2013, 11:25 AM
juggledad's Avatar
juggledad
 
23,671 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Quote:
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.
  #6  
Old Jun 26, 2013, 01:29 PM
sky captain's Avatar
sky captain
 
57 posts · Sep 2009
Ok. So far, I've updated my column CSS as

Code:
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.
  #7  
Old Jun 26, 2013, 01:31 PM
sky captain's Avatar
sky captain
 
57 posts · Sep 2009
Found some promising things to finesse under
Code:
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;
}
  #8  
Old Jun 26, 2013, 01:54 PM
sky captain's Avatar
sky captain
 
57 posts · Sep 2009
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 */

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;
}
  #9  
Old Jun 26, 2013, 02:04 PM
sky captain's Avatar
sky captain
 
57 posts · Sep 2009
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.
  #10  
Old Jun 27, 2013, 10:43 PM
Tim F
 
66 posts · Jul 2009
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?
  #11  
Old Jul 3, 2013, 10:30 AM
sky captain's Avatar
sky captain
 
57 posts · Sep 2009
Looks good, Tim. Did you use Juggledad's multi-column template?
  #12  
Old Jul 5, 2013, 12:39 AM
Tim F
 
66 posts · Jul 2009
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">
<?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>
  #13  
Old Jul 5, 2013, 03:34 AM
juggledad's Avatar
juggledad
 
23,671 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
@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'
  #14  
Old Jul 5, 2013, 05:08 AM
Tim F
 
66 posts · Jul 2009
Quote:
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.

Last edited by Tim F; Jul 5, 2013 at 05:13 AM.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Grid layout for archive Vanessa_S Atahualpa 3 Wordpress theme 7 Mar 9, 2013 04:04 AM
How can I center, in grid layout, pictures with captions on a page... Masselyn Center area post/pages 0 Nov 18, 2010 09:30 AM


All times are GMT -6. The time now is 04:57 PM.


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