Editing an Existing Theme - Locating the XML

Question

Sorry for the beginner question but I'm completely stuck, otherwise I wouldn't ask. I'm determined to learn Magento correctly and need pointing in the right direction before I can continue.

I'm editing an existing theme that was installed by another developer, I was looking to only do some CSS but it's apparent that I need to modify the structure of the layout.

Please see the website below:

dev.best-brilliance.com/?___store=ebay&___from_store=default

I've changed the logo but need this to be in the middle of the page like in this mockup below:

According to the Magento guide that I read I should be able to identify the location of the XML file by enabling template hints, however this doesn't seem to be the case. Here is a screenshot of the page with template and block name hints enabled:

The path for the header is frontend/ultimo/bb/template/page/html/header.phtml but this a PHP file. The block name is Mage_Page_Block_Html_Header which apparently should be the XML file but I cannot find this anywhere within my FTP folders. There's no reference to where this is located and I've searched through many of the folders to try and locate it. As far as I'm aware, once I open this file I will be able to modify the structure of the layout and achieve a central logo.

Could somebody please tell me what I'm doing/thinking incorrectly here and give me some advice on how to correctly find what I need to? Thank you so much for your time.

Answer 1

Sure! Here are couple things that I think you could understand better.

• Blocks. Blocks are an integral part of Magento's "view" system in the MVC design pattern, along with templates and layout XML. Blocks are PHP classes that provide data and rendering functionality to templates. They end in .php. A block doesn't make a page look a certain way (templates and skin files), or tell Magento what templates and blocks to include on a page (layout XML); its job is to provide data to a template and manage the template. You seem to have blocks and layout XML mixed up.

• Layout XML. Layout XML is often the trickiest part of Magento for a new front-end developer to grasp. It seems to be pretty unique to Magento; although I'm not absolutely sure of that, I've never heard of it elsewhere. Layout XML tells Magento what blocks to include/display on certain pages. Layout files end in .xml, and are stored in a theme's app/design/[area]/package/theme/layout/ directory. Layout XML is pretty complex at first. One of the tricky parts is that it doesn't actually provide true page layout, at least that the user sees (CSS usually does that). The "layout" tasks it handles are related to determining which blocks to output for which URLs, and in what order (this doesn't have much to do with the order in which the user can see them on the frontend). To get a quick introduction to layout XML, read MageBase's tutorial on it (part one is found here). To really learn the Magento layout system, read the book No Frills Magento Layout by the always-awesome Alan Storm.

• Templates. These are assigned to a block that inherits Mage_Core_Block_Template, and rendered when the system calls the block's toHtml() method. They end in .phtml.

• Skin files. These are frontend assets for a Magento theme, such as JavaScript, CSS, and images. They are stored in the skin/ directory. They handle formatting the HTML properly, pretty much just like all other CSS in the world :)

So, now that you have a bit more of a grasp on the fundamentals, how can you put these things together to solve your problem? Well, first of all, the issue isn't with the block, as it just provides data to the template. The issue likely isn't actually with the layout file, as the layout file is most likely just telling Magento to spit out the logo on every page, not where to position it.

So, what does that leave us with? Templates and skin files. In your specific case, the block template likely isn't contributing to the issue, but that's often a good place to look in issues like this one because they contain the actual HTML that is sent to the user. I'd guess that this is related to some CSS, and could be fixed by changing the styling on that element and on the others surrounding it (parents, siblings).

A few other random, miscellaneous tips as you begin your front-end Magento journey:

• Magento's template and block hints are very powerful. I couldn't imagine doing much with Magento without them, but they do have one major drawback, in that they typically mess up the display structure of the page due to adding in all those extra elements that aren't planned for.

• I'm suggesting that you start trying to accomplish what you want to by looking at the CSS. Don't let that dissuade you from eventually taking a look at the template though, and it may be a good idea to overwrite the template (in a custom theme) to avoid messy HTML.

Hope this helps. Welcome to the Magento community. If you have any other questions, feel free to ask in the comments or open other questions.