logo background for logos with transparency [#431898]

Hi. Abessive is a very nice theme. Thank you for creating it. I have added the capability of putting a block of a customizable color directly behind the logo. I have a logo that has transparency on top of this block so that the logo easily matches the rest of the color scheme. Please consider adding this to your theme. If you have any questions, please let me know. Thank you.

In abessive_settings.php, I added the line with "abessive_settings.php":

function _abessive_default_settings() {
  return array(
    'abessive_background_color' => '#F0F0F0',
    'abessive_border_color' => '#000000',
    'abessive_content_background_color' => '#FFFFFF',
    'abessive_logo_background_color' => '#000000',
    'abessive_left_width' => '200',
    'abessive_right_width' => '250',

In page.tpl.php, I added the "logo-background" div:

          if ($logo || $site_title) {
            print '<h1><a href="'. check_url($base_path) .'" title="'. $site_title .'">';
            if ($logo) {
              print '<img src="'. check_url($logo) .'" alt="'. $site_title .'" id="logo" />';
            }
            print $site_html .'</a></h1>';
          }
        ?>
        </div>
        <div id="logo-background">
          <?php
            if ($logo) {
              print '<table></table>';
            }
          ?>
        </div>

        <?php if (isset($primary_links)) : ?>
          <?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>

In style.css, I added the "#logo-background" style (for a 60x60 logo; maybe this should be customizable on the theme form as well):

#logo-floater a {
  line-height:90px;
  position:relative;
}
#logo-floater img {
  float:left;
  padding:10px 15px 0 10px;
}
#logo-background {
  background-color:#FF0404;
  width:60px;
  height:60px;
  margin:10px 10px;
}

#header .content {
  height:85px;
}

In template.php, I added the "abessive_logo_background_color" case:

          case 'abessive_content_background_color' : $css .= '.block .content, #center .content, #header .content, #footer .content { background-color:'. $custom_setting .'} '; break;
          case 'abessive_logo_background_color' : $css .= '#logo-background { background-color:'. $custom_setting .'; }'; break;
          case 'abessive_r2' : $css .= 'div.r2 { background-color:'. $custom_setting .'; }'; break;

In theme-settings.php, I added the "abessive_logo_background_color" $form:

  $form['abessive_background_color'] = array(
    '#type' => 'textfield',
    '#title' => t('Background Color'),
    '#description' => t('What colour should the body background behind all the containers be? Default: %val', array('%val' => $defaults['abessive_background_color'])),
    '#default_value' => $settings['abessive_background_color'],
    '#size' => 7,
    '#maxlength' => 7,
    '#prefix' => '<div class="container-inline">',
    '#suffix' => '</div>',
    '#attributes' => array('class' => 'form-item-use-colorpicker'),
    '#element_validate' => array('abessive_validate_hex_field'),
  );

  $form['abessive_logo_background_color'] = array(
    '#type' => 'textfield',
    '#title' => t('Logo Background Color'),
    '#description' => t('What colour should the background directly behind the logo be (for a logo with an alpha color)? Default: %val', array('%val' => $defaults['abessive_logo_background_color'])),
    '#default_value' => $settings['abessive_logo_background_color'],
    '#size' => 7,
    '#maxlength' => 7,
    '#prefix' => '<div class="container-inline">',    '#suffix' => '</div>',    '#attributes' => array('class' => 'form-item-use-colorpicker'),
    '#element_validate' => array('abessive_validate_hex_field'),
  );

  $form['abessive_border_color'] = array(
    '#type' => 'textfield',
    '#title' => t('Border Color'),

Comments

Comment #1

Rtalian CreditAttribution: Rtalian commented 13 April 2009 at 03:17

I forgot to mention that I also added "z-index:1;" as below in style.css:

#logo-floater {
  position:absolute;
  z-index:1;
}

Comment #2

Rtalian CreditAttribution: Rtalian commented 13 April 2009 at 22:21

I found two problems with my changes and have the corrections here. First, in style.css, the "#logo-floater img" and "#logo-background" both needed to be moved down by 2px. They were not lining up with each other properly at only 10px (changed first elements of padding and margin from 10px to 12px):

#logo-floater img {
  float:left;
  padding:12px 15px 0 10px;
}
#logo-background {
  background-color:#FF0404;
  width:60px;
  height:60px;
  margin:12px 10px;
}

My additions also broke the primary links (they were hidden underneath the logo background). This was resolved by simply moving the logo-background div in page.tpl.php below the code for the primary and secondary links:

          if ($logo || $site_title) {
            print '<h1><a href="'. check_url($base_path) .'" title="'. $site_title .'">';
            if ($logo) {
              print '<img src="'. check_url($logo) .'" alt="'. $site_title .'" id="logo" />';
            }
            print $site_html .'</a></h1>';
          }
        ?>
        </div>

        <?php if (isset($primary_links)) : ?>
          <?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
        <?php endif; ?>
        <?php if (isset($secondary_links)) : ?>
          <?php print theme('links', $secondary_links, array('class' => 'links secondary-links')) ?>
        <?php endif; ?>

        <div id="logo-background">
          <?php
            if ($logo) {
              print '<table></table>';
            }
          ?>
        </div>

        <?php print $header ?>
      </div>
      <div class="r5"></div><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div>
    </div>

Comment #3

nusakan CreditAttribution: nusakan commented 23 June 2009 at 10:00

Hello !
I like the abessive theme too and I am considering using it for one of my sites. But I have been looking for ways to (optionally) add a standard banner 768x90 or 468x60) in the header region, to the far right of the region, nicely aligned with the logo on the left. I am a complete newbie regarding themes and php, but I wondered if your code could be adapted to go in that direction.
Thanks in advance if you can consider the idea.