Magento extension store switcher

For third-party Magento themes: Download example stylishstoreswitcher.css

Copy file from the .zip to /[YourMagentoDir] / skin / frontend / default / [YourSkin] / css / webandpeople / stylishstoreswitcher / stylishstoreswitcher.css

How to create image store button

You will have to create two images for each store - one for the active button and one for the inactive button. In the example, it is logo1.gif and logo1hover.gif.

The image height is the button height.

The active / hover button background color

The active link color

Special styles for image button

Each store button has its own ID. For example, the first button has ID=store_1, the second button has ID=store_2. So you will have to create a custom CSS-style for div with ID= store_1 in the end of the stylishstoreswitcher.css file.

A useful free utility to convert an image into base 64 data URIs: Image to data URI convertor

For example, the converted image will be in the CSS instead of logo1.gif:

This is a guide on how to create image store button in the Stylish Store Switcher Magento extension. This useful Magento extension displays stylish tabs instead of a select drop down.


Go to contentsBack to previous page