Main body color, and side bar color different

[StacieB]

I have been playing with the BG color customization in all the stacks and cannot seem to find a way to achieve the main body being one color and the side bar another. I want this effect seen in the screen shot, with NO WHITE between the colors.

Please help - I have spent all day on this!!!

[ruenel]

Hello There,

Thanks for writing in! Setting a custom background color for the main content and the sidebar will need a custom css code. Perhaps you need to add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

/* -------------------------------------------- */
/* Custom background colors */
.x-main,
.x-sidebar {
    padding: 30px;
}

.x-main {
    background-color: black;
    width: 75%;
}

.x-sidebar {
    background-color: yellow;
    width: 25%;
}
/* -------------------------------------------- */

This will work perfectly if your main content and the sidebar has the same height. And if they do not have the same height, you will face another challenge as as shown here:

To resolve the height issue, you will need to add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb)

(function($){
  $(window).on('load resize', function() {
    
    if ( $(window).width() > 980 ){

      var max = 0;

      $(".x-sidebar, .x-main").css('height', 'auto');
      $(".x-sidebar, .x-main").css('min-height', '0');

      if( $(".x-sidebar").height() > max ){
          max = $(".x-sidebar").height();
          console.log(max);
      } 

      if( $(".x-main").height() > max ){
          max = $(".x-main").height();
          console.log(max);
      }

      console.log(max);

      $(".x-sidebar, .x-main").css('min-height', max);

      }

  });
})(jQuery);

Hope this helps.

[StacieB]

This worked great - thank you!

[XSupport]

On behalf of my colleague, you’re welcome.