CSS (Guru?) to troubleshoot theme

The *simplest* solution would be to make that sidebar a tiled background, and just apply the background to the content-area. Then, no matter what is longer (the sidebar or the content) the sidebar color will go all the way down.

That’s the easiest thing to do.

I have a “sticky footer” tutorial on my site that’s old, but it still works (just used it on a site not too long ago), and you can use straight CSS instead of images. The example uses 3 columns, but it’s pretty simple to take it down to 2.

Though CSS can probably offer a cleaner solution, personally, I use jQuery to equalize the height of the widget sidebar with the main content container.

You’re already jQuery UI for your datepicker calenders so I can’t think of a valid reason to not make further use of jQuery.

I’ve previously documented the necessary code here: https://thematictheme.com/forums/topic/equal-height-for-widget-column-and-container-column/#post-2000

The code is added to functions.php.

Note that in the provided example, #primary refers to the sidebar and #container refers to whatever your main content container is called. Change these ids to match your own code.

Also note that I’ve wrapped the jQuery in conditional tags to limit the equalization to specific pages (mainly those where the sidebar is present). Since all your pages have a sidebar, you can probably delete that aspect of code…

…delete these lines:

// Use WordPress conditional tags to target specific blog pages onyly…
if(is_home() || is_single() || is_archive() || is_search() ){

…and this line:

} // end if is_home

Hmm, both good options.. I was hoping to avoid having to many images on the page but it looks like currently that is my only option is to just tile the bg and artificially put a shadow on some of the inner elements like on the left of the footer and reservation area background.

Dominor, your approach did seem like the better option but I could not get it to work, even after several revisions. Below is what I ended up using on my last attempt.

I would love to be able to tackle this via CSS but it looks like until I find a better solution that the tiled background would be the way to go..

JQuery Attempt:

// Equal height for #primary and #container.
// jQuery code from: https://web.enavu.com/tutorials/equal-column-height-with-jquery/
// Modified for Thematic by https://www.dominornovus.com

function equal_height_primary_and_container() {

?>
<script type="text/javascript">
jQuery$(window).load(function(){
//#container and primary need to have the same class. Add class to each:
jQuery("#content-area.wrap div#sidebar.fltleft ul.xoxo, #content-area.wrap div#content.fltright").addClass("equal_height");
//set the starting bigestHeight variable
var biggestHeight = 0;
//check each of them
jQuery('.equal_height').each(function(){
//if the height of the current element is
//bigger then the current biggestHeight value
if(jQuery(this).height() > biggestHeight){
//update the biggestHeight with the
//height of the current elements
biggestHeight = jQuery(this).height();
}
});
//when checking for biggestHeight is done set that
//height to all the elements
jQuery('.equal_height').height(biggestHeight);
});
</script>
<?php

} 

add_action('wp_head', 'equal_height_primary_and_container');

Refer to these lines in your attempted code:

//#container and primary need to have the same class. Add class to each:
jQuery("#content-area.wrap div#sidebar.fltleft ul.xoxo, #content-area.wrap div#content.fltright").addClass("equal_height");

Bear in mind that you’re equalizing the height of just two areas (i.e. #sidebar and #container). The jQuery height calculation has broken because you’ve targeted more than two elements.

Change the above code to:

//#container and #sidebar need to have the same class. Add class to each:
jQuery("#container, #sidebar").addClass("equal_height");

Another way of putting it, based on the original block of code I linked to, you’re simply replacing #primary with #sidebar.

All of this assumes that you’re applying the background image to #sidebar.

To confirm that it works, first check that #sidebar and #container have the .equal_height class added to them by viewing your source code. Secondly, apply your background image to #secondary via CSS and confirm that it stretches the same vertical height as #container.

One thing to consider: The backgrounds (images or colors) of any elements contained in #sidebar (such as ul.xoxo), can potentially block out the background of #sidebar. Simply put, disable the backgrounds of any elements inside #sidebar when testing.

Thanx guys, I ended up just using images which does the trick in the mean time until I can figure out a simple solution via CSS.

Other forum volunteers can’t diagnose the problem without seeing it.

Thanks Andrew but the link is in the first post and as I mentioned in the last post, I got it worked out with just using images like Doodlebee suggested, so I’m not sure what your asking for here..

Thanks for looking though ??

I thought you were still looking for a solution via CSS, but as the thread is resolved, nevermind.