How to create image button in the Magento 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.

div.wp_stylish_stores_switcher div, div.wp_stylish_stores_switcher div a { height: 35px; line-height: 35px; }

The active / hover button background color

div.wp_stylish_stores_switcher div.active, div.wp_stylish_stores_switcher div:hover { background-color: #e3e3e3; }

The active link color

div.wp_stylish_stores_switcher div.active a { color: #005aad; }

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.

#store_1 a { width: 120px; /*image width*/ } #store_1 a strong { display: none; } /*inactive button image*/ #store_1 { background-image: url(logo1.gif); background-repeat: no-repeat; background-position: 50% 50%; } /*active / hover button image */ #store_1:hover, #store_1.active { background-image: url(logo1hover.gif); background-repeat: no-repeat; background-position: 50% 50%; }

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:

/*inactive button image*/ #store_1 { background-image: url(data:image/gif;base64,R0lGODlheAAjAMQAAJmamqqrq93d3czMzRETFCIkJWZnaHd4eTM1NURFRlVWV7GxsqOkpVtcXbu8vO7u7oiJiQACA////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAB4ACMAAAX/oCSOZGmeaKqugQNAjrDOdG3feA0ET+7/wKDtAZkBHI6AcHkSIGNMHHElgPQkgUF0+QhkR07tdqZUPQpXCXIMdKEMEIOMfSqnEADSl44biE1HDhB5fCQOaScQBIgGhTcBcydyA3KOI4QoAxGNI4KWNF0oDw4IVpyfdpIRdgIJnzSEA14uTw6uVq9YKQ8REVcPCYi5JzsAwiMJeybHQgJ/JQARBCICBs/DJgMHVwMOzw4F1yMPmFtFJwoRrgEGzNgi3jEtMgJfAgeuKOds9ScEEQVgvEsBSYSCSCIgwHAQAcWOQgPKqemlIMUAhJ9GiQAgYEcLLwDyMDw2oKIjcgGO/7Drte/EAXGFCD2AKaEIQwfQCNAsEeAAkwS9cKrwOe6AAgAKrjlQkOCAAQUtAyg4AIEoTxF2HiCIcK4IhFUSiEDYWmqfVKpWq0AYUGBRCQdwEkgswUsaGTEBCCDocWDaiK+NGLoNmy4Pr5Zq5tiJts9nun3RIkR6UDgs14QBEBTohfBABJwGGqaIbDXFmmgE5mwV+hWNBM/ntEYgGkCdiCuYhGIB+3pA3X2b952ZjdW2BE3gNo3bWkRTAXgnNg9WgUTAP4UFBHCWEBnnAwLPRfxLTQBA6EZVEo5I1TcBBBndN0pLM966eeVVyEmL1Ov5AAI6qcHAGpewREMRoT03yP9XCFQBVD5fCRWZMXv9k5JukKmwmS8ibIaJJhFQ+N0qR4R13V+9vEDAQRIs0AASYxmA02b5UFGEh8VxdUhQJuYzQGu3AYUHIroRaMJXxHEXAQLjABmWkMYkBNAIP0rj3hyUQFOAdBidUFIPvVyRDicMheeZErJ8RZQmAZbgxF/H1LakmJ/dplCSbD5joQg/ftVSEnMxJI0BPKBQBQJiFAChcrcpV6YaSkTjXVs0YUIEQkgGM8KSt7UjaViUkqCJjz5FeIkSAexz6BFA9eeeQhAosJkCaQDAJAQFSJSANYUJFBYCkCBQCQpQ/IXWZrmWEFpKsQErgLBdgidIGVpZ8UKDJB1VRaghBvzTy7cRKKBbJ77SxSpXiBDB0QyIHVfdCUQU2uS6TZR7W0hdziAIrPLmEM0pPkwx0MDLhPRVKgFHaSjCBI/hQg9bRuGFCR2N2/AYvjK2BUot7GDxxVsAIMYZ04Fs8g37hNbuySyrQEhoe7Us8wxTbRXOzDi7rJA7OffMRAgAOw==); background-repeat: no-repeat; background-position: 50% 50%; }

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.

Back

Go to contentsBack to previous page