Change the CSS for every different languages that are divided by the views scope

magento.stackexchange https://magento.stackexchange.com/questions/7467

  •  16-10-2019
  •  | 
  •  

Question

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.

Was it helpful?

Solution

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'); }
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top