I have a menu generated by Magento category. And every link is an image. Here is a screenshot of what it looks like (it's in french):

Image menu

I was wandering how can I code my CSS so that when it's another language the background-image changes?

I though there was way to define a class or id when creating a category but I did not see anything.

1 Answer 1


In the template you could assign a class name to necessary elements based on:

$code = Mage::app()->getLocale()->getLocaleCode();

So you might end up with something such as:

<?php $code = Mage::app()->getLocale()->getLocaleCode() ?>
<div class="menu <?php echo $code ?>-image">
    <!-- Your menu stuff -->

And then you can simply assign correct images in your CSS:

.fr_FR-image { background: url('fr-image.png'); }
.en_US-image { background: url('en-image.png'); }

If you'd prefer, you could build a simple helper to assign a more desirable class name using strtolower() and/or str_replace() as potential suggestions (or just do it all in your template, but that can be sloppy). Something like:

<?php $code = Mage::app()->getLocale()->getLocaleCode() ?>
<?php $class = strtolower(str_replace('_', '-', $code)) ?>
<?php // fr-fr-image, en-us-image, etc ?>

Alternatively, depending on how you have your CSS scoped, you may want to simply add the locale code to the <body> element (using above method), that way you will be able to scope any locale specific CSS based on that. You'd end up with something like:

<body class="cms-index-index cms-home fr-fr">

And the CSS could follow:

.fr-fr .my-menu-image { background: url('fr-image.png'); }
.en-en .my-menu-image { background: url('en-image.png'); }
  • 1
    Precisely the answer I was formulating. Great work.
    – philwinkle
    Sep 3, 2013 at 0:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.