Page 1 of 1

Banner logo

Posted: Thu Feb 03, 2011 2:13 pm
by marchvet
I am very new to .php and setting up a wordpress site. Setup a template and wanted to add my own custom banner. In the code I set the banners name, but it centers itself.

I cant get it to align to the left or have it sized properly to fit the header section.

The code is:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title(''); ?> <?php if ( !(is_404()) && (is_single()) or (is_page()) or (is_archive()) ) { ?> at <?php } ?> <?php bloginfo('name'); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="shortcut icon" href="<?php bloginfo('template_url'); ?>/favicon.ico" type="image/x-icon" />
  <link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/css/node.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/css/defaults.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/css/system.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/css/system-menus.css?h" />

<link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/css/user.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/fusion/fusion_core/css/style.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/fusion/fusion_core/css/typography.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/fusion/fusion_core/css/superfish.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/fusion/fusion_core/css/superfish-navbar.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/fusion/fusion_core/css/superfish-vertical.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/css/acquia-prosper-style.css?h" />
<link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/design_packs/gray/gray-rtl.css" />
<link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/design_packs/gray/gray.css" />
<link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/style.css"/>
  <link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/fusion/fusion_core/css/grid16-960.css" />

  <!--[if IE 8]>
  <link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/fusion/fusion_core/css/ie8-fixes.css" />
<link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/css/ie8-fixes.css" />
  <![endif]-->
  <!--[if IE 7]>
  <link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/fusion/fusion_core/css/ie7-fixes.css" />
<link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/css/ie7-fixes.css" />
  <![endif]-->
  <!--[if lte IE 6]>
  <link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/fusion/fusion_core/css/ie6-fixes.css" />
<link type="text/css" rel="stylesheet" media="all" href="<?php bloginfo('template_url'); ?>/css/ie6-fixes.css" />
  <![endif]-->




</head>

<body id="pid-node" class="front logged-in page-node no-sidebars layout-first-main sidebars-split font-size-12 grid-type-960 grid-width-16">
  <div id="page" class="page">
    <div id="page-inner" class="page-inner">
      <div id="skip">
        <a href="#main-content-area">Skip to Main Content Area</a>
      </div>

      <!-- header-top row: width = grid_width -->
            <div id="header-top-wrapper" class="header-top-wrapper full-width">
        <div id="header-top" class="header-top-search header-top row grid16-16">
          <div id="header-top-inner" class="header-top-inner inner clearfix">

<div id="search-box" class="search-box block">
<div id="search-box-inner" class="search-box-inner inner clearfix">

</div><!-- /search-box-inner -->
</div><!-- /search-box -->


                      </div><!-- /header-top-inner -->
        </div><!-- /header-top -->
      </div><!-- /header-top-wrapper -->
      
      <!-- header-group row: width = grid_width -->
      <div id="header-group-wrapper" class="header-group-wrapper full-width">
        <div id="header-group" class="header-group row grid16-16">
          <div id="header-group-inner" class="header-group-inner inner clearfix">

                        <div id="header-site-info" class="header-site-info block">
              <div id="header-site-info-inner" class="header-site-info-inner inner clearfix">
                                <div id="logo">
                  <a href="<?php bloginfo('url'); ?>" title="Home"><img src="<?php bloginfo('template_url'); ?>/logo.png" alt="Home" /></a>
                </div>
                                                <div id="site-name-slogan" class="site-name-slogan">
                                    <span id="site-name"><a href="<?php bloginfo('url'); ?>" title="Home"><?php bloginfo('name'); ?></a></span>
                                                    </div>

                              </div><!-- /header-site-info-inner -->
            </div><!-- /header-site-info -->
                                  </div><!-- /header-group-inner -->
        </div><!-- /header-group -->
      </div><!-- /header-group-wrapper -->
      <!-- primary-menu row: width = grid_width -->
      <div id="header-primary-menu-wrapper" class="header-primary-menu-wrapper full-width">
        <div id="header-primary-menu" class="header-primary-menu row grid16-16">

          <div id="header-primary-menu-inner" class="header-primary-menu-inner inner clearfix">
            <div id="primary-menu" class="primary-menu block">
<div id="primary-menu-inner" class="primary-menu-inner inner clearfix">
<ul class="menu sf-menu"><li class="leaf first last"><a href="<?php bloginfo('url'); ?>" title="Home">Home</a></li>
<?php wp_list_pages('title_li=&depth=1&wrapper_tag=whatever');  ?>
</ul></div><!-- /primary-menu-inner -->
</div><!-- /primary-menu -->
          </div><!-- /header-primary-menu-inner -->
        </div><!-- /header-primary-menu -->
      </div><!-- /header-primary-menu-wrapper -->

      <!-- preface-top row: width = grid_width -->
Is there a way to have the logo to re-size itself in the header so it fits, no matter what browser is used?

Re: Banner logo

Posted: Thu Feb 03, 2011 3:33 pm
by greyhoundcode

Code: Select all

<div id="logo">
    <a href="<?php bloginfo('url'); ?>" title="Home">
        <img src="<?php bloginfo('template_url'); ?>/logo.png" alt="Home" />
    </a>
</div>
Can you confirm if this is the "banner" you are talking about?

Why not add a width attribute to the img element? You could also add a CSS rule at the relevant point either in an external stylesheet or within a style attribute to align the text to the left.