Magento Working with Images and Sprites

There are very few images in the responsive theme compared to the other Magento themes because CSS3 is used whenever possible to accomplish a visual effect.

Working With the Header Logo

The responsive theme enables you to specify two different logos: one optimized for small screens (narrower than 770px) and the other for large screens. Place your two logo files in


and specify the path to both logos in the Magento Admin Panel:

— Log in to the Magento Admin Panel as an administrator.

— Click System > Configuration > GENERAL > Design.

— In the right pane, click Header to expand it.

— In the Logo Image Src field, enter the path of your primary logo. For example: images/logo.png.

— In the Small Logo Image Src field, enter the path of your logo for small viewports. For example: images/logo_small.png.

— In the top right corner of the page, click Save Config.

— If prompted, flush the cache:

— Click System > Configuration > Cache Management.

— At the top of the page, click Flush Magento Cache.

Working With Sprites

The responsive theme uses two sprites: one for general icons and the other for social icons.

Both sprite images output at 1x and 2x resolutions (for high-resolution screens). Because sprite files are very difficult to edit without the source files, you should use these Photoshop files to change these sprites: RWD_icon_sprite.psd and RWD_social_icons.psd

Compass provides support for generating sprites from individual image files, but it was not used to generate sprites for the responsive theme. However, you might want to take advantage of that feature for your custom theme. Using this method requires knowledge of Compass.

Leave a Comment