asked on

Magento Site Logo resizing help in header file

Hi

I need some help restyling the header page on my magento website. I need to add a logo image that is 596w x 107h

I think it is because I am also removing some addition divs that I don't want to be displayed. I am removing the welcome message and the search box within the header, when I remove these and add upload the longer logo image everything gets pushed down.

the website is www.babybuntings.co.uk

the header code is below

<?php
/**
 * Magento
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     base_default
 * @copyright   Copyright (c) 2010 eCommerce web developers. (http://www.ecommerce-web-developers.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/**
 * @var Mage_Page_Block_Html_Header $this
 */


?>
<div class="header-container">
  <div class="header">
        <?php if ($this->getIsHomePage()):?>
        <h1 class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1>
        <?php else:?>
        <a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a>
        <?php endif; ?>
        <div class="quick-access">
            <div class="top-header"><div class="welcome-msg"><?php echo $this->getWelcome()?></div>
            <?php echo $this->getChildHtml('topLinks') ?>
            </div>
            <div class="clear"></div>
            <div class="bot-header">


            <div class="header-cart">
				<div class="cart-left"></div>
				<div class="cart-mid">
					<div class="cart-img"><img src="<?php echo $this->getSkinUrl("images/cart-bag.png") ?>" alt="" /></div>
					<div class="cart-cnt">
					<?php $cart = Mage::getModel('checkout/cart')->getQuote()->getData();
						if(isset($cart['items_qty'])){ ?>
						<a href="<?php echo $this->getUrl('checkout/cart') ?>"><span><?php echo (int)$cart['items_qty']; ?></span><?php echo " Item(s)"; ?></a>
						<?php } else { ?>
						<span><?php echo '0'; ?></span><?php echo " Item(s)"; ?>
						<?php } ?>
					</div>
					<div class="c-checkout"><button type="button" title="<?php echo $this->__('Checkout') ?>" class="button btn-chkout" onclick="setLocation('<?php echo $this->getUrl('checkout') ?>')"><span><span><?php echo $this->__('Checkout') ?></span></span></button></div>
				</div>
				<div class="cart-right"></div>
			</div>
			<?php echo $this->getChildHtml('topSearch') ?>

            </div>
            <?php //echo $this->getChildHtml('store_language') ?>
        </div>
        <?php echo $this->getChildHtml('topContainer'); ?>
    </div>
</div>
<?php echo $this->getChildHtml('topMenu') ?>

Open in new window

I can upload the image and show you what happens if you think you can help

Chris Stanyon

Change the width of the quick-access and top-header DIVs. You can find the rules at lines 502 and 545 of styles.css. Something like 300px should do it:

.header .quick-access {
    float: right;
    width: 300px;
}

.header .top-header {
    float: right;
    width: 300px;
}

Open in new window

k4rm4

ASKER

Ok I will try... I had actually changed .header .quick-access but didnt change the .top-header.

I will try them both now

k4rm4

ASKER

OK I have changed it - if you look at the site you will see what happens.

Previously I have removed the welcome message and the search box from the header.php (as I want to remove these anyway) to see if it fixes it, but it doesn't. I may be removing to much code from the header page, but I don't think I am.

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

k4rm4

ASKER

OK I have removed them both and it pushes them more down... this is the issue I have been having. Please have a look...

I removed the below lines of code

<?php echo $this->getChildHtml('topSearch') ?>

<div class="top-header"><div class="welcome-msg"><?php echo $this->getWelcome()?></div>

Open in new window

k4rm4

ASKER

sorted it... i was removing <div class="top-header"> as well.... it now works fine! cant believe I have been removing the whole line everytime I have tried! get me the class dunce hat!

Thank you once again for your help

Chris Stanyon

Looking good :)

k4rm4

ASKER

thanks, just need to sort the hover over on the top nav... when I hover over, it moves to the right and I don't want it too... I have messed with the CSS but cant find where or why it does what it does...

k4rm4

ASKER

This is why we have experts! Once again, problem solved