MageBridge, RHUK Milkyway and the Magento default theme

Because MageBridge doesn't make things more complicated by adding its own theming engine, theming a Magento/Joomla! site is limited to dealing with the Joomla! template and the Magento theme. This tutorial shows you how we - the Yireo team - have dealt with setting up a demo-site which combined the default Joomla! template RHUK Milkyway, and the default Magento theme.

Joomla! 1.5 by default ships with three templates: The RHUK Milkyway theme - which is enabled by default -, the Beez template and the JA Purity template. If you install MageBridge on top of this default installation and use it to connect to another website running a default Magento template, you might run into a couple of problems. At first sight, the layout looks fine. But when taking a closer look, some of the details do not fit in perfectly.

Resolving double IDs

When combining two themes in one page like MageBridge does, the first and uttermost concern is double IDs. Both Joomla! and Magento generate HTML-code and this HTML-code could be accompanied by classes and IDs, through which the HTML-elements can be styled in CSS. While double classes are not bad at all and could only cause minor glitches in the layout, double IDs are a real problem.

Each HTML-document shows a hierarchy of HTML-elements, the root of the tree being the <html>-tag itself, followed by the <head> and <body> tag. If an HTML-element is accompanied by an ID (like <body id="body">) this ID should be unique and only occur once. If it's not unique, the browser will have a problem identifying that HTML-element. To put it a bit more technical, the browser will have a problem while parsig the DOM (Document Object Model), which can be seen as an abstract representation of the HTML-document. And if DOM fails, you might get problems with search engines and JavaScript.

But by combining the HTML-output of Magento with the HTML-output of Joomla! it could happen that the same ID pops up twice, simply because Joomla! knows nothing of Magento and vice versa. The first step is to detect these double IDs. Before you start reading all the HTML-code of every page, there's an easier way: If there are double IDs on the page, this means that the so-called DOM is invalid, which means that your page is not compliant to the W3C standards. If other words, if your page is W3C-compliant, it does not contain any double IDs.

So, check your page with the online W3C Validator. If any problems occur, first make sure the individual Joomla! page and/or Magento page is 100% W3C-compliant. If that's the case, the problem lies with the combination offered by MageBridge.

What can you do about it?

The simple thing you can do about this, is modify the HTML. With Magento, all HTML-related things are to be found in the current theme, more specifically the PHTML-templates within that theme. You can start editing that to get rid of the HTML causing the errors. But beware that some HTML-elements are needed for JavaScript to function correctly.

It might be easier to solve the problem instead in Joomla!, because on MageBridge pages the HTML is a combination of the MageBridge component and/or modules displaying Magento content plus the Joomla! template. So there's a big chance you only need to edit your own Joomla! template to resolve conflicts. It that's not the case, the problem is probably caused by other Joomla! extensions (components and/or modules). If such an extension is built using the MVC-standard, you're lucky. With MVC-extensions you can move a so-called layout-file of that extension to your template and edit it there - we call these copies template overrides. Check out the Joomla! Documentation project for more information.

Getting the bullets back

One of the design-flaws is that bullets are missing. Take for instance the Joomla! Main Menu: It shows multiple menu-items in a vertical menu and these menu-items are styled by RHUK Milkyway by putting a blue bullet in front of the clickable text. As soon as you add a piece of Magento to the same page, the behavior changes and the blue bullets disappear. What just happened?

Within the Magento CSS (which is integrated by MageBridge) certain HTML-elements are styled in a certain way. So obviously as soon as Magento is added to the Joomla! page, the bullets are styled differently: List-items (<li>) are styled to not-show the bullets ("list-style"). The strange thing is that the Joomla! template is loaded after the Magento CSS-definitions, and due to the nature of CSS the template-CSS should override the Magento CSS. Well, it doesn't and we don't know the reason for this yet. We first have to find out where the Magento CSS is located exactly.

Find the reponsible CSS-file

If you open the HTML source code in the browser, you can see multiple CSS-files being loaded from Magento. Finding out which CSS-file is reponsible for the disappearing bullets is the next step. There are a couple of methods that could be used here, but we mention the quickest option only: If you are running Firefox plus the Web Developer extension (and you should), you can disable individual CSS-files quickly from the Web Developer Toolbar, while looking at the page showing the menu with the missing bullets. After a couple of tries, you will find out that the error is caused by the CSS-file "reset.css".

But removing the file "reset.css" entirely (like the Firefox Web Developer Toolbar does) also alters other elements, which is not what we want. We only want to enable the bullets, not mess around with the rest of the code. To make a change to these CSS-definitions we can follow two strategies:

  • Change the actual CSS-file within the Magento skin (which is part of the Magento theme)
  • Solve the problem in the Joomla! CSS and forget about Magento theming

The first option involves regular Magento theming. But if you're not familiar with this, you might want to go for the second strategy.

Adding Magento CSS to the Joomla! template

What we are going to do is add the Magento CSS-code of "reset.css" to the Joomla! template, and edit it there. We can open up the CSS-code in our browser, copy it and paste it in a new file called "reset.css" within the Joomla! template-directory "css". As soon as we have done that, we need to add the new CSS-file to the Joomla!-template by opening up the "index.php"-file and add something like the following:

<link rel="stylesheet" href="/templates/YOUR_TEMPLATE/css/reset.css" type="text/css" />

Make sure this line is located together with the other CSS-definions of the template, which should be all located after the <jdoc>-tag for the Joomla! header. As you might have notice the content of the file "reset.css" is now added twice to the HTML-document: One time by Magento through MageBridge, and a second time through the template.

Removing the Magento CSS

So before we go any further, we want to remove the original CSS-file. Instead of messing around with the Magento theme - which would involve XML layout updates, which can get complicated - we use MageBridge to do remove it. Within MageBridge you have the ability to disable a certain CSS-file offered by Magento. Within the MageBridge Settings page, click on Advanced Settings tab and locate the Disable CSS inputbox. Here you can enter a comma-separated list of CSS-files. Only enter the name of the CSS-file, not the complete path. So for instance you could end up with the following value: "reset.css, print.css, menu.css".

Removing the bad CSS-entry

So far, we have done nothing but moving the CSS-code around. The last and final step is to edit the copied version of "reset.css" in the Joomla! template. The culprit CSS-definition that causes the list-style to be disappear is the following:

ul,ol { list-style:none; }

While removing the list-style is fine with ordered lists (<ol>), it should not occur with unordered lists (<ul>). So we just change the line to the following:

ol { list-style:none; }

If we reload the page the bullets should appear again. Unfortunately, this does not solve the problem completely. The padding of list-items (and list-items within list-items, and so on) is also altered by Magento. This is caused by the following line:

* { margin:0; padding:0; }

But commenting out this line alters the behavior of other HTML-elements too much. What we want, is to apply the margin and padding to all elements except for unordered lists. This is still possible with CSS by changing the line like this:

:not(ul) { margin:0; padding:0; }

As you can see it involves a good knowledge of CSS to alter the existing themes. But still, the approach layed here in this tutorial requires far less time than building a complete new theme.