ThemeShaper Forums » Thematic

[closed]

Equal height columns with Thematic

(13 posts)
  • Started 6 years ago by BrightBold
  • Latest reply from bluejpro
  • This topic is resolved
  1. This is my first WordPress theme so forgive me if I'm missing something. I want to put different backgrounds on the content and sidebar, so I need to columns to appear equal heights. I was surprised that there doesn't seem to be a container for the sidebar that holds both the "primary" and "secondary" main-aside divs and thus no way to style them together as a single block.

    It seems that the best solution for my current situation is to use the faux columns technique, which will effectively solve my problem. But I'm curious about what appears to be the lack of a sidebar container in WordPress. Is this something that can be added to a theme (and if so, Ian, have you considered it?), or is it just not in WordPress and so has to be worked around?

    (Or if I'm totally off-base and there's a better solution to my problem, I'd love to hear that too!)

    Kelley

    Posted 6 years ago #
  2. Faux Columns are probably your best bet.

    A containing div around the two sidebars … maybe. I don't know. I'd have to think about it. ;)

    Posted 6 years ago #
  3. Thanks - faux columns is working well so far. I will post a link in the examples thread when I get a little further along.

    Posted 6 years ago #
  4. Aah, but it sounds like you're saying a containing div is possible, so it could be done (even if you didn't want to be the one to do it)?

    Posted 6 years ago #
  5. Sort of. I'm thinking about it.

    Posted 6 years ago #
  6. him
    Member

    sorry to bother you both, Ian and Brightbold...

    I'm having the same problem. I want the main and side column in different colors but the side column gets short while the main column runs down and breaks the neat right-left color division. Also im not much of a CSS geek, so could u help me - what do i need to change? where do i change?

    thanks already,
    him

    Posted 5 years ago #
  7. lindathep
    Member

    Hi,
    I wonder if there is a solution for the equal heights of the div's" thematic_sidebar" and "container".
    In other words, I have the same question as BrightBold who started this topic.

    Tnx!

    Posted 5 years ago #
  8. Hi,

    this blog entry should help: Equal Height Columns with jQuery.

    Chris

    Posted 5 years ago #
  9. lindathep
    Member

    Hi Chris,
    Thanks for your answer but I am still struggling with the code. This thread was helpful > http://forums.themeshaper.com/topic/vertical-divider-between-p2-and-p3-recent-posts but is still unsolved.
    I tried your solution (script in function) etc. because I want div's container and primary to have the same length.
    At this point I don't know where I have to hook/add the function to. thematic_content() doesn't seem to work.
    This is what I used:

    //script equal heights
    function equalheight_script() { ?>
    <script type="text/javascript">
    jQuery.noConflict();
    function equalHeight(group) {
    tallest = 0;
    group.each(function() {
    thisHeight = jQuery(this).height();
    if(thisHeight > tallest) {
    tallest = thisHeight;
    }
    });
    group.height(tallest);
    }
    jQuery(document).ready(function() {
    equalHeight($("#content"));
    equalHeight($("#primary"));
    });
    </script>
    <?php }
    add_action('thematic_content','equalheight_script');

    Your help is much appreciated!

    Posted 5 years ago #
  10. Hi,

    sorry .. took me a while to figure out the window load thing ..

    function my_scripts() { ?>
        <script type="text/javascript">
        jQuery.noConflict();
        function equalHeight(group) {
            tallest = 0;
            group.each(function() {
                thisHeight = jQuery(this).height();
                if(thisHeight > tallest) {
                    tallest = thisHeight;
                }
            });
            group.height(tallest);
        }
        jQuery(window).load(function() {
            equalHeight(jQuery("#content,#primary"));
        });
        </script>
    
    <?php }
    add_action('wp_head','my_scripts');

    But it still doesn't work reliable. The calculated height is a bit weird.

    Chris

    Posted 5 years ago #
  11. lindathep
    Member

    Hi Chris, sorry for this late answer and thanks for your solution.
    One remark, using
    "jQuery(window).load(function() {
    equalHeight(jQuery("#content,#primary"));"
    didn't do the trick, the site didn't load at all.

    I replaced it with
    "jQuery(document).ready(function() {
    equalHeight(jQuery("#content,#primary"));"
    and that works excellent!

    Thanks so much.

    Posted 5 years ago #
  12. Thanks for posting this

    I am desperately trying to get #content and #primary to have same height also. Not working in current Thematic - any help?

    Posted 3 years ago #
  13. Oh my that was easier to solve than I thought.

    In my case using #secondary instead of #primary created equal height columns and allows a background image behind #page to extend all the way to the footer:

    function my_scripts() { ?>
        <script type="text/javascript">
        jQuery.noConflict();
        function equalHeight(group) {
            tallest = 0;
            group.each(function() {
                thisHeight = jQuery(this).height();
                if(thisHeight > tallest) {
                    tallest = thisHeight;
                }
            });
            group.height(tallest);
        }
        jQuery(document).ready(function() {
    	equalHeight(jQuery("#content,#secondary"));
        });
        </script>
    
    <?php }
    add_action('wp_head','my_scripts');

    This solves the problem of the background image looking cut off on pages where the sidebar is longer than the content area.

    Thank you Chris the Moderator and lindathep for posting this function.

    (it's awesome)

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.