ThemeShaper Forums » Thematic

[closed]

Newb Layout Quest

(9 posts)
  • Started 2 years ago by fwunder
  • Latest reply from fwunder
  • This topic is resolved

Tags:

  1. fwunder
    Member

    Following http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm

    I created a 3 column fixed-width, equal height layout. Being the newb that I am and although I properly created a child theme replete with all my edits, I am quite certain I am not following the Thematic Methodology. To achieve the desired layout I edited a child version of page.php, single.php and template-page-blog.php, and of course my child style.css with a few custom functions thrown in. This was effective, but I would like to do it "correctly" and am not sure how to go about replacing the [all] styling outside of the content div. Here's a look at the code that I introduced in the child theme page templates:


    <!-- Nothing Changed Above Here -->

    <div id="container">
    <div id="container2">
    <div id="container1">
    <div id="col1">
    <?php
    // calling the widget area 'page-top'
    get_sidebar('primary-aside');
    ?>
    </div><!-- #coll1 -->
    <div id="col2">
    <?php thematic_abovecontent(); ?>
    <div id="content">

    <!-- Nothing Changed Here -->

    </div><!-- #content -->
    <?php thematic_belowcontent(); ?>
    </div><!-- #coll2 -->
    <div id="col3">
    <?php
    // calling the widget area 'page-bottom'
    get_sidebar('single-top');
    ?>
    </div><!-- #col3 -->
    </div><!-- #container1 -->
    </div><!-- #container2 -->
    </div><!-- #container -->

    <!-- Nothing Changed Below Here -->

    Posted 2 years ago #
  2. thematic already comes with a 3 column layout, what are you trying to do differently?

    Posted 2 years ago #
  3. fwunder
    Member

    Partly because I needed the code practice. Partly because I specifically wanted 3 columns of defined width and equal height based on the longest column height.

    Oh, and it's fun too! ;)

    Thanks!

    Posted 2 years ago #
  4. i've certainly been guilty of doing additional work for almost no gain, but that seems like what you are doing here.

    you can't really do equal-height columns via CSS anyway can you? i was under the impression that would need to be done w/ jquery or mock-columns, backgrounds.

    Posted 2 years ago #
  5. fwunder
    Member

    Sure you can! I'll show you in a few minutes as soon as I get it moved from my (local) development server. Works good too!

    Posted 2 years ago #
  6. fwunder
    Member

    OK, here ya go. Remember, it's a work in progress. I don't design. I take a QuarkXpress files and make Wordpress look (mostly) like it! ;)

    http://www.grafiks101.com/nature/

    See the transparent leaf thing spanning the center column and the right column? That's one of the reasons I needed equal height and width columns. I already did it with the Atahualpa theme (tables), but Thematic seems like a much more fun sandbox, so here I am!

    Thanks far all insights!

    Posted 2 years ago #
  7. fwunder
    Member

    I've seen the light!! (and felt the cold)....

    For my radical three column layout all I needed to do was add two simple functions:

    function my_stuff_before_content() {
         echo('<div id="container2">
                <div id="container1">
                  <div id="col1">');
                     get_sidebar('primary-aside');
    	    echo('</div><!-- #col1 -->
    		      <div id="col2">');
          }
    add_action('thematic_abovecontent', 'my_stuff_before_content');
    
    function my_stuff_below_content() {
            echo('</div><!-- #col2 -->
    			    <div id="col3">');
    	               get_sidebar('single-top');
    	      echo('</div><!-- #col3 -->
    		        </div><!-- #container1 -->
    		        </div><!-- #container2 -->');
    	  }
    add_action('thematic_belowcontent', 'my_stuff_below_content');

    And a little child CSS tweaking.

    Actually, it really was pretty easy since I already had the layout prototyped in static html. This old dog is learning new tricks!

    Thanks!

    Posted 2 years ago #
  8. fwunder
    Member

    Continuing with my sledgehammer approach, I just found another issue with my above code.

    I use get_sidebar('single-top'); for my right column custom navigation menu.

    Unfortunately, that widget is placed in the content div of single.php. Hmmm. I can comment it out of single.php and all is well, but I know that's not the right way.

    Any guidance? Thanks!

    Posted 2 years ago #
  9. fwunder
    Member

    Thor here! ;)

    For all the other newbs out there, I decided to revert back to the default aside placements and create a new widget area(s) to play with my new toys. So, stick a fork in this thread. It's done.

    Thanks.

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.