Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 1 of 2
Logo position/size change, and main.xml confusion
 
paul@moodandmind.com
Member
 
Avatar
Total Posts:  65
Joined:  2008-01-13
 

First let me say, I have scoured the forums, read the design guide, and used firebug.

I am a designer, not a coder, and I am just wanting to tweak the default template a bit.

However, I cannot for the life of me figure out how to change the position and size of the logo image.

Please know that I tried really hard to figure this out on my own before posting to the forum, and please forgive my ignorance on this subject if the answer was easy.

Also, \the wiki and knowledge base makes reference to main.xml in /layout and there is no such file in the latest release. This is very confusing and needs to be updated.

Thanks for your help and understanding.

Also, if anyone is interested in what I’ve done so far with my template, feel free to take a peek at the URL below.

Paul Sturgis
http://www.moodandmind.com

 
Magento Community Magento Community
Magento Community
Magento Community
 
ad2joe
Member
 
Avatar
Total Posts:  60
Joined:  2007-08-31
 

Hello,

You’ll need to edit boxes.css -> h1#logo and config.xml for file name.

Thanks, Joe.

 
Magento Community Magento Community
Magento Community
Magento Community
 
paul@moodandmind.com
Member
 
Avatar
Total Posts:  65
Joined:  2008-01-13
 

Thanks guys - that did the trick!

 
Magento Community Magento Community
Magento Community
Magento Community
 
battosai
Jr. Member
 
Total Posts:  13
Joined:  2008-01-21
 
paul@moodandmind.com - 16 January 2008 03:49 PM

First let me say, I have scoured the forums, read the design guide, and used firebug.
lso, \the wiki and knowledge base makes reference to main.xml in /layout and there is no such file in the latest release. This is very confusing and needs to be updated.

I just ran into the same problem several days after this message was posted.  One document refers to main.xml and another refers to default.xml, and both are apparently no longer part of the configuration.  It took about an hour for me to figure that out, and I think about everyone who reads the documentation is going to hit the same problem.  That’s a lot of total time wasted when you sum it up.

I can’t find any documentation for the project other than the Wiki, some miscellaneous articles, a knowledge base, and this forum.  Because there is no real documentation, figuring out simple things means digging, guessing, and hacking.  I’m brand new, and I couldn’t find the administration page, for instance, so I thought I’d paste “admin” to the end of the URL.  Voila.  It was a good guess based upon prior experiences with CMS.  It’s also probably in a Wiki entry, KB article or something, but without structure, it’s hard to find.  Consequently, Magento probably takes many times longer to set up than it should.  We really need a document that is one-stop shopping.  It should go from A-Z, from install to setting up everything in a new site. I’d volunteer to help with the document, if I can first get the knowledge of how to use the product.

As a programmer, I always recommend writing the documentation first, code later. In a collaborative effort, if someone contributes code, the documentation should be changed before it gets merged into the code base. This virtually eliminates undocumented features and out-of-date documentation.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Scott
Guru
 
Avatar
Total Posts:  333
Joined:  2007-08-31
Northwest Ohio
 

Yeah, the documentation is still here or there, hit or miss. More on design than programming, but at the same time, neither serves as the Magento bible, aka How to do Everything with Magento. But I figure that as time goes on, the docs will improve and become more exhaustive.

I know the team is making a good effort to document everything they can, as time allows. But admittedly, people get more excited about seeing the product than reading the docs (I believe I speak for at least most people). At the same time, the team is excited about releasing the product to, and since they are the most knowledgable, they will be the ones to answer these questions when they arrise on the forums.

So in that sense, Paul, you are absolutely in the right to have posted the question, and now there is at least a little documentation on it now (here in this forum thread) wink

 
Magento Community Magento Community
Magento Community
Magento Community
 
NueBe
Member
 
Total Posts:  65
Joined:  2007-09-30
Tres Cantos - Madrid - Spain
 

I use it to define the logo position.

The logo is a png file. The logo is crossing the header continer. i use this css to define the css:
.header-top #logo { margin: -35px 0 -50px 0;}. If you need other position you can use padding, margin float, left top ...

 
Magento Community Magento Community
Magento Community
Magento Community
 
magbuzz
Member
 
Total Posts:  32
Joined:  2008-03-22
 

I too want to replace the logo.gif with logo2.gif
Screencast says change in design>default>templates>page.html> header.phtml

Looks like things have changed in my version 0.9.17740

Just need to find the place to rename this file.

Thanks,
Where is the best place to find current instructions on this version 0.9.17740?

This thing looks great ...just gotta get under the hood and...................

 
Magento Community Magento Community
Magento Community
Magento Community
 
ikuzyk
Magento Team
 
Avatar
Total Posts:  60
Joined:  2007-08-09
Ternopil, Ukraine
 

You can find file here:

/app/design/frontend/default/default/template/page/html/header.phtml
Hope its help.
 
Magento Community Magento Community
Magento Community
Magento Community
 
magbuzz
Member
 
Total Posts:  32
Joined:  2008-03-22
 

Thanks for that fast response. This is my page. I don’t see where it goes in here.
<?php
/**
* Magento
*
* NOTICE OF LICENSE
*
* This source file is subject to the Open Software License (OSL 3.0)
* that is bundled with this package in the file LICENSE.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/osl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to so we can send you a copy immediately.
*
* @category design_default
* @package Mage
* @copyright Copyright (c) 2004-2007 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
* @license http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
*/
?>

<div class="header-top-container">
<div class="header-top">
<h1 id="logo"><a href="<?php echo $this->getUrl('') ?>"><img src="<?php echo $this->getLogoSrc() ?>” alt="<?php echo $this->getLogoAlt() ?>"/></a></h1>
<p class="no-display"><a href="#main"><strong><?php echo $this->__('Skip to Main Content') ?> »</strong></a></p>

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

<div class="quick-access">
<strong><?php echo $this->getWelcome() ?></strong><br/>
<div class="shop-access">
<?php echo $this->getChildHtml('topLinks') ?>
</div>
<?php echo $this->getChildHtml('store_language') ?>
</div>

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

 
Magento Community Magento Community
Magento Community
Magento Community
 
i960
Guru
 
Avatar
Total Posts:  633
Joined:  2007-10-01
Bakersfield, CA
 
magbuzz - 25 March 2008 09:16 AM

I too want to replace the logo.gif with logo2.gif
Screencast says change in design>default>templates>page.html> header.phtml

Looks like things have changed in my version 0.9.17740

Just need to find the place to rename this file.

Thanks,
Where is the best place to find current instructions on this version 0.9.17740?

This thing looks great ...just gotta get under the hood and...................

It’s in the Admin area.  Log into admin, then go to System --> Configuration --> Design, and then expand the section labeled ‘Header’. From there you can change the file name and alt text of the logo.  The actual file is stored in /skin/frontend/default/default/images/ so I would just upload your new file there.

 
Magento Community Magento Community
Magento Community
Magento Community
 
magbuzz
Member
 
Total Posts:  32
Joined:  2008-03-22
 

Wow! That was easy!
Thanks lots
Where is best place to learn to modify default template?

I started by looking at the screencasts ...Maybe there is a better place......
m

 
Magento Community Magento Community
Magento Community
Magento Community
 
i960
Guru
 
Avatar
Total Posts:  633
Joined:  2007-10-01
Bakersfield, CA
 

You could try the Designers Guide here: http://www.magentocommerce.com/design_guide

I don’t know how up to date it is with the current version though.  I’m waiting for 1.0 and more finalized documentation before I dig too deep into Magento.

 
Magento Community Magento Community
Magento Community
Magento Community
 
_Lobo_
Member
 
Total Posts:  35
Joined:  2008-04-10
 
Igor Kuzyk - 25 March 2008 09:23 AM

You can find file here:

/app/design/frontend/default/default/template/page/html/header.phtml
Hope its help.

thank you you save my life! smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
DailyLunatic
Member
 
Avatar
Total Posts:  39
Joined:  2007-11-07
Oklahoma City, OK
 

I too am having difficulties getting my logo where I would like it.  I’m trying to have the logo all the way to the top, and all the way to the left.

...and yes, I have cacheing turned off.  smile

Tried zeroing all margin calls I could find in the boxes.css for h1#logo, but it didn’t budge.

Looked in header.phtm but did not see anyting.

Please help.  I know I’m not a coder, or a designer, but putting your logo on the page would seem pretty basic.

Image Attachments
margin issue.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
rimamkt
Jr. Member
 
Total Posts:  21
Joined:  2009-10-05
 

Here is the easiest way to replace the logo, change size etc. This approach only requires CSS updates and you do not have to tinker with the backend. Plus, this feature gives an additional layer of protection to your logo (Prevents direct download of logo). If you have a faster/easier way please post!

How to change your Mangeto default website logo in 5 minutes or less

1) Upload your logo to folder: magento/skin/frontend/default/default/images/ - Yes, .jpg, .png, .gif files are fine too!
2) Create a 1px, transparent .gif file, clear.gif. Upload it to folder: magento/skin/frontend/default/default/images/
3) Backup the original logo file. Rename logo.gif to logo-backup.gif
4) Rename the transparent gif to logo.gif
5) Edit CSS. Open magento/skin/frontend/default/default/css/boxes.css and traverse to line #375 and replace the h1#logo styles to the following:

/* Logo */
h1#logo {
   
float:left;
   
margin:3px 0 10px 12px;
   
backgroundtransparent url(../images/MyNewVeryCoolLogo.pngno-repeat;
   
}
h1
#logo img {
   
width:255pxheight68px;
   
}
.page-popup h1#logo { display:none; }

6) Edit CSS . Open magento/skin/frontend/default/blue/css/boxes.css and traverse to line #360 and replace the h1#logo styles to the following:

/* Logo */
h1#logo {
   
float:left;
   
margin:3px 0 10px 12px;
   
backgroundtransparent url(../images/MyNewVeryCoolLogo.pngno-repeat;
   
}
h1
#logo img {
   
width:255pxheight68px;
   
}
.page-popup h1#logo { display:none; }

Notes:
- You have to specify the image logo width and height or the link reference will not work.
- The “magento/” is the root folder of your store. FYI.
- Margin issues are caused because Magento uses two directories to manage layout. Meaning, you have to change the margin styles on both template theme files.

Good luck!

 
Magento Community Magento Community
Magento Community
Magento Community
 
mimimama
Jr. Member
 
Total Posts:  11
Joined:  2009-08-23
 

hi, I have issue about logo position. I am using modern theme now. My logo is a round, and is bigger than default. But when I upload my logo, the site navigation bar and the middle portion drop down. Can you help me how to fix it?

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 1 of 2