Magento Stack Exchange is a question and answer site for users of the Magento e-Commerce platform. It only takes a minute to sign up.
Sign up to join this community
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):
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.
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 -->
</div>
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'); }
