CODEWITHSUNDEEP
htmlcssmagentoresponsive-designmedia-queries
kost
kost

Reputation: 325

A responsive design approach for Magento eshop 1.7.0.2

Hi developers and designers

I made -for first time-a custom theme with sliders,tabs and other design elements altering the default css of magento (styles.css)

How would you suggest to approach an already made magento eshop in order to transform it into a responsive eshop ?

Is that possible or I will have to change the whole css from scratch?

Upvotes: 0

Views: 384

Answers (2)

Jacqueline
Jacqueline

Reputation: 51

Magento has a theme hierarchy, so it's possible to "extend" a theme.

Magento has a fall-back strategy in case it cannot find a specific template or js/css file. It will first look in

app/design/frontend/custom_package/custom_theme/
skin/frontend/custom_package/custom_theme

If not found, then it will look in:

app/design/frontend/custom_package/default
skin/frontend/custom_package/default

And finally, it will search in:

app/design/frontend/base/default
skin/frontend/base/default

This means, if the existing theme is located in app/design/frontend/existing_custom_package/default you can create a new folder in existing_custom_package, e.g. app/design/frontend/existing_custom_package/responsive_theme and then place only the files you need to override. Of course, you would need to change the active theme from default to responsive_theme in the Admin -> System ->Configuration.

OR, if you need to keep the existing CSS untouched create your own responsive-related files, you can just add them in the existing theme. Just add the needed files to path-to-custom-theme/layout/page.xml.

Upvotes: 1

peterdotplus
peterdotplus

Reputation: 335

I've been working on a customized CSS based on the default layout, to start you should look into "CSS Media Queries". Maybe you can look at http://getbootstrap.com to get an idea of how it works, but that is an extensive example. When you learn how Media Queries work, you should be able to change parts of the current layout to be responsive.

Upvotes: 1

Related Questions