CODEWITHSUNDEEP
htmlcssmagentolayout
Philip Schlenzig
Philip Schlenzig

Reputation: 11

Magento custom html/css layout - how?

I just installed magento onto a server, and previous to that made a website layout ( basic html website) which i'm aiming to implement as a main layout on the magento site.

I'm new to Magento, and i've tried working with custom wordpress layout with the use of css. Yet this project gives me the assignment to use the html/css layout and change if not delete the default magento template. I Have no idea how to even get started at this. Can anyone give me some pinpointers? if not just a link to a tutorial.

The idea is the use the layout i made and use it as a template, but with the goal of using Magento's e-shop functionalities.

thank you.

Philip

Upvotes: 1

Views: 4711

Answers (1)

peterdotplus
peterdotplus

Reputation: 335

Magento has a Design folder and a Skin folder to customize your front-end.

File hierarchy

If you set up the folder structure of your custom theme correctly, Magento will only use the files you overwrite in the new theme. If you go to Magento>app>design>frontend you will see a "base" and "default" folder, base is the uppermost folder in this hierarchy.

Design (html + xml layout)

If you want to create a new theme you start with creating a new folder in Magento>app>design>frontend and copy the files you want to change in your theme. So if your theme will change the 1column layout to start with, you'll end up with this:

Magento>app>design>frontend>[YOUR FOLDER]>default>template>page>1column.phtml

Skin (images + css)

Same goes for the Skin folder. When you want to change the main css file for your theme you'll end up with this structure:

Magento>skin>frontend>[YOUR FOLDER]>default>css>styles.css

Setting Current Package

In the Admin panel you will have to go to System>Configuration>Design>Package and set the "Current Package Name" to the name of [YOUR FOLDER].

Manage Stores

You might want to add a store view, store or website to be able to change views so you could for example show a different front-end for different countries or special offers. Make sure you set the package name to the right scope, in this case.

Upvotes: 4

Related Questions