Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

[SOLVED] Montezuma css grid ... am I 'getting' it?


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Jan 3, 2013, 11:15 AM
Michael4fm's Avatar
Michael4fm
 
35 posts · Nov 2011
Manchester, UK
Love this theme ... so much I want to convert several sites to it! (Partly cos the 'two tone' effect works really well with sub-domains, and partly just cos I'm sad like that.)

1st problem I'm having is with the grid concept. Trying to get 'postformat' for each excerpt to be 9 columns wide, then a 3 column 'widget' ... for each post.

Have changed index.php to have a 12 column width for each 'postformat' sub-template. On the 'postformat' template the actual 'blurb' is 9 columns, which works, then - if I understand the grid concept correctly - there should be a 3 column 'space' for me to put something in. 9 column bit works fine, or whatever no. of columns I set it to, but the remaining 3 columns are beneath instead of 'next to'. I'm working off-line on a wamp server, but I've recreated the issue here: http://www.play.s-t-u-f-f.net

Have wrapped the main 'postformat' blurb in a 9 column div then have a 3 column div. Tried various locations for this 2nd div, but all have the same result. Any suggestions? Or am I just totally not understanding how this 'grid' concept should work?
  #2  
Old Jan 3, 2013, 11:29 AM
juggledad's Avatar
juggledad
 
21,677 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Quote:
1st problem I'm having is with the grid concept. Trying to get 'postformat' for each excerpt to be 9 columns wide, then a 3 column 'widget' ... for each post.
Reset both index.php and postformat.php
in index.php change the line
HTML Code:
	<div id="content" class="cf col8">
to
HTML Code:
	<div id="content" class="cf col9">
and the line
HTML Code:
	<div id="widgetarea-one" class="col4">
to
HTML Code:
	<div id="widgetarea-one" class="col3">
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #3  
Old Jan 3, 2013, 11:49 AM
Michael4fm's Avatar
Michael4fm
 
35 posts · Nov 2011
Manchester, UK
Thanks for such a swift reply, Juggledad.

Won't that give me effectively two columns? One with post excerpts in and one as a sidebar (effectively, the standard, just a slightly narrower 'excerpt' column and a slightly wider sidebar?)

What I'm trying to achieve is that each excerpt has an individual widget area to the right of it. (That widget area will have a 'random' pic, so should be different for each post). That way there is no 'whitespace' as there would be if I only put two widgets in the 'standard' sidebar, but set the page up to display 10 posts, or a dozen widgets but set to display three posts per page.

My question is partly about achieving this particular objective, and partly (er .. 'thereby') to check I've understood the basic concept.

(Sorry, I may have mis-spoken or misdirected with the term 'postformat'. I meant the post information contained in the 'standard' postformat is nine columns of a row, then a three column widget area to the right of it, for each post in the loop.)

Last edited by Michael4fm; Jan 3, 2013 at 12:11 PM. Reason: Saw a typo. Too anal to let it ride.
  #4  
Old Jan 3, 2013, 12:46 PM
jerryc
 
367 posts · Oct 2012
Florida
As long as the column widths in a row add up to 12, you arrange them however you want.

You can even use nested grids.
  #5  
Old Jan 3, 2013, 01:28 PM
Michael4fm's Avatar
Michael4fm
 
35 posts · Nov 2011
Manchester, UK
Thanks jerryc ... the theory seems to be what I think it is ... unfortunately the reality doesn't seem to match. I guess I'm just getting something wrong somewhere, but I can't work out what!

This is the theory of what I'm trying to achieve ...



... and this is the practice ...



I assume I'm just putting a div somewhere wrongly, but everything seems right logically.

Last edited by Michael4fm; Jan 3, 2013 at 01:32 PM.
  #6  
Old Jan 3, 2013, 01:39 PM
Michael4fm's Avatar
Michael4fm
 
35 posts · Nov 2011
Manchester, UK
Thought it might be helpful to actually put up the code I'm using:

index.php =

HTML Code:
<!--<div id="container">-->

<?php get_header(); ?>

<div id="main" class="row">

	<div id="content" class="cf col12">
		
		<?php bfa_content_nav( 'multinav1' ); ?>
		
		<?php bfa_loop( 'postformat' ); ?>
		
		<?php bfa_content_nav( 'multinav2' ); ?>
		
	</div>
	
</div>
	
<?php get_footer(); ?>

<!--</div>-->
postformat.php =

HTML Code:
<div id="post-<?php the_ID(); ?>" class="cf col9">

	<h2>
		<span class="post-format"></span>
		<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" rel="bookmark"><?php the_title(); ?></a>
		<?php bfa_comments_popup_link( '0', '1', '%' ); ?>
	</h2>

	<?php bfa_thumb( 620, 180, true, '<div class="thumb-shadow"><div class="post-thumb">', '</div></div>' ); ?>
	
	<div class="post-bodycopy cf">
	
		<div class="post-date">		

			<?php c2c_the_category_image(' ','','gif','/wp-content/uploads/cats/'); ?>				
		</div>

		<?php bfa_excerpt( 55, ' ...' ); ?>
		
	</div>

	<div class="post-footer">
		<a class="post-readmore" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
		<?php _e( 'read more &rarr;', 'montezuma' ); ?></a>
		<p class="post-categories"><?php the_category( ' &middot; ' ); ?></p>
		<?php the_tags( '<p class="post-tags">', '', '</p>' ); ?>
	</div>
	
</div>

<div id="widgetarea-index" class="col3">

	<?php dynamic_sidebar( 'Widget Area INDEX' ); ?>

</div>
I've probably got something wrong or forgotten something that is staring me in the face ... but I've looked and looked but I'm blowed if I can spot it!

Last edited by Michael4fm; Jan 3, 2013 at 01:43 PM. Reason: Spotted a possible culprit .. changed code but didn't work!
  #7  
Old Jan 3, 2013, 02:36 PM
juggledad's Avatar
juggledad
 
21,677 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
In order to break up the postformat area you would have to define the first div with a class 'row', then you can add columns to the inneer div's

HTML Code:
<div id="post-<?php the_ID(); ?>" <?php post_class( 'cf row' ); ?>>

	<h2>
		<span class="post-format"></span>
		<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" rel="bookmark"><?php the_title(); ?></a>
		<?php bfa_comments_popup_link( '0', '1', '%' ); ?>
	</h2>

	<?php bfa_thumb( 620, 180, true, '', '' ); ?>
	
	<div class="post-bodycopy cf col9">
	
		<div class="post-date">		
			<p class="post-month"><?php the_time( 'M' ); ?></p>
			<p class="post-day"><?php the_time( 'j' ); ?></p>
			<p class="post-year"><?php the_time( 'Y' ); ?></p>				
		</div>

		<?php bfa_excerpt( 55, ' ...' ); ?>
		<div class="post-footer">
			<a class="post-readmore" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
			<?php _e( 'read more &rarr;', 'montezuma' ); ?></a>
			<p class="post-categories"><?php the_category( ' &middot; ' ); ?></p>
			<?php the_tags( '<p class="post-tags">', '', '</p>' ); ?>
		</div>
	
	</div>

	<div id="widgetarea-one" class="col3">
		<?php dynamic_sidebar( 'Widget Area in-post' ); ?>
	</div>

</div>
Hovever there will only be one widget area for all posts
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support

Last edited by juggledad; Jan 3, 2013 at 02:38 PM.
  #8  
Old Jan 3, 2013, 02:39 PM
jerryc
 
367 posts · Oct 2012
Florida
Try this:


HTML Code:
...

<div id="main" class="row">

	<div id="content" class="cf col9">

                [your content]

	</div>
	
	<div id="[sidebar or whatever]" class="cf col3">

                [your sidebar]

	</div>
	
</div>
	
  #9  
Old Jan 3, 2013, 03:13 PM
Michael4fm's Avatar
Michael4fm
 
35 posts · Nov 2011
Manchester, UK
@Juggledad: Many thanks ... that seems to have worked. In the example at http://www.play.s-t-u-f-f.net I've just used text, but on the real thing I'll use the dynamic widget area creator code. Although the widget area is the same one for each iteration of the loop, the contents should be randomly generated each time, so effectively it'll actually show different things.

@jerryc: Thanks for the suggestion. I think it's the same one as Juggledad, just expressed in a simpler format.

Trick seems to be that I need to redeclare the "row" in the 'postformat.php' template. Thought it just got carried over after having been declared in 'index.php' ... obviously not.

Armed with that information I'm off to see what else I can break

Many thanks both. Do I need to mark this as 'resolved'? Can't see how to do it. Oh well .. if it's still open tomorrow I'll take a closer look!

Later: (A few seconds!) OK, worked it out, I'll mark it closed. :D

Last edited by Michael4fm; Jan 3, 2013 at 03:18 PM. Reason: WQorked out how to 'close' the thread ... thought I should say so.

Bookmarks

Tags
css, grid, montezuma, postformat.php

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
4 columns grid view bender57 Center area post/pages 10 Feb 27, 2013 02:00 PM
Trying to build a grid of images. studentofstone Atahualpa 3 Wordpress theme 2 Jan 27, 2012 08:40 PM
Image grid on a page Craig Atkinson Center area post/pages 1 Sep 22, 2011 07:36 AM
image grid thekjub9 Center area post/pages 1 Jun 1, 2011 05:14 AM


All times are GMT -6. The time now is 11:07 PM.


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