Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Montezuma Theme (http://forum.bytesforall.com/forumdisplay.php?f=53)
-   -   [SOLVED] Montezuma css grid ... am I 'getting' it? (http://forum.bytesforall.com/showthread.php?t=19247)

Michael4fm Jan 3, 2013 11:15 AM

[SOLVED] Montezuma css grid ... am I 'getting' it?
 
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? :confused:

juggledad Jan 3, 2013 11:29 AM

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">

Michael4fm Jan 3, 2013 11:49 AM

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.)

jerryc Jan 3, 2013 12:46 PM

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.

Michael4fm Jan 3, 2013 01:28 PM

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 ...

http://www.play.s-t-u-f-f.net/wp-con.../01/theory.gif

... and this is the practice ...

http://www.play.s-t-u-f-f.net/wp-con...1/practice.gif

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

Michael4fm Jan 3, 2013 01:39 PM

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!

juggledad Jan 3, 2013 02:36 PM

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

jerryc Jan 3, 2013 02:39 PM

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>
       


Michael4fm Jan 3, 2013 03:13 PM

@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


All times are GMT -6. The time now is 09:43 AM.

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