Layout problems with the Branding and Header blocks

Fixing this isn't as easy as removing the branding div if there is no content. Wrapping the div in an if ($page['branding']) like this...

  <?php if ($page['branding']): ?>
	<div id="branding">
	  <?php print render($page['branding']); ?>
	</div><!-- /#branding -->
  <?php endif; ?>

works for individual nodes, but not the frontpage...

This is related to the cm_slideshow CSS. On okv.se the branding block shows up in the HTML, but overridden with height: auto. But the red border, for example, is from the branding div.

I think this partly depends on the order of the blocks. channelaustin.org, for example, has another block order, but apparently an older version of cm_slideshow without the CSS that is causing errors on amherstmedia.org...

In case we want the default site, when installing the easy starterkit, to look like okv.se, some of the CSS from the OKV sub-theme to cm_theme_zen at okv.se should probably be transferred to cm_theme_zen instead. I paste that CSS here for now:

#header {

  background: #eeeeee;

  .logo-block {
    float: left;
    margin: 1em 2em;

    #logo {
      img {
        max-width: 12em;
      }
    }
  }
}


#block-system-main-menu {
  padding: 0.8em 0 0.8em 0;
  // float: left;
}

.js {
  #menu {
    li {
      &.active-trail {
        background: #666666;
        color: #eeeeee;
        border-radius: 0.5em;
      
        a {
          color: #eeeeee;
        }

        li {
            a {
              color: #6d6e71;
            }
        }
      }

      &:hover {
        border-radius: 0.5em;
      }
      &.expanded:hover {
        border-radius: 0.5em 0.5em 0 0;
      }
    }
  }
}

#menu {
  ul {
  li {
    a {
      padding: 0.8em 1.4em;
    }
    &.expanded > a {
      padding-right: 2.2em;
    
      &:after {
        padding: 0.9em 1.4em;
      }
    }
  }
}
}

#block-search-form {
  margin: 1.5em 2em 0 0;

  input[type="text"] {
    background: #ffffff;
  }

  .form-submit {
    background: #ffffff;
  }
}

.login-block {
  margin: 0.3em 0;

  ul.login-menu {
    li {
      float: left;
      margin-left: 1em;
    }
  }
}


.breadcrumb {
  padding: 0.3em 0;
}


#branding {
  border-top: 4px solid $line;
}

.region-header {
  border-bottom: 4px solid $line;
}

.breadcrumb {
  border-bottom: 2px dotted $line;
}

.front { 
  #branding {
    height: auto;
  }
  #main {
    margin-top: 0;
  }
}


#footer {
  border-top: 4px solid $line;
  border-bottom: 4px solid $line; 
}

As said, some of these issues are related to how the blocks are being used. Originally I worked on cm_theme_zen for channelaustin.org and later adjusted some custom parts on okv.se. I'll make a separate post about this.

I think we should fix this in a similar way to #2054019: Remove drop shadow on specific images. using drupal_add_css to dynamically add the CSS that removes the display of this region is it doesn't contain any content.

Fixes for this:
http://cgit.drupalcode.org/cm_theme/commit/?id=a1bcc4f5fd7d7c3adbc7f2b6e... (removing branding-spacer div and branding-spacer CSS, which means there's no div that adds that extra 6em)
http://cgit.drupalcode.org/cm_theme/commit/?id=48636fe726b0c021de9db059b... (adding bottom-border to header instead of branding div, so that it shows also on other pages than front)
http://cgit.drupalcode.org/cm_slideshow/commit/?id=61b16ab913699a772ae2c... (removed the negative top margin of cm_slideshow)

With these commits I consider this issue fixed, but please test.

Btw, I have since learnt how to refer commits to issues and the one who started the issue...

In https://www.drupal.org/node/2188071#comment-9376005 the fix was committed to version 7.x-3.x. That version was not added to the page as a release. Was that a mistake or are we supposed to use the 3.x version now for testing?