Mastering Magento’s templates in five easy steps [part 2]

Magento front-end customization can feel daunting for beginners. In this series on mastering Magento, we explore 5 lessons that can help kick-start you into Magento front-end development. Previously, in part 1, we discussed how to get started with Magento, including Magento installation, package and theme setup, and theme customization. Read on as we delve into layout and style customization together!

[series_block]
This post is part of a series on mastering Magento:

• Mastering Magento’s templates in five easy steps [part 1]
• Mastering Magento’s templates in five easy steps [part 2] (current)

[/series_block]

Index of lessons:

1. Magento Installation (part 1)
2. Setting up package and theme (part 1)
3. Theme Customization (part 1)
4. Layout Customization 
   
5. Styles Customization

Lesson 4: Layout Customization

Description: Removing the Poll Survey from the “right sidebar”

Steps

1. Go to the app/design/frontend/your-package/your-theme  and create a folder for layout. This folder will store all the XML files, so the final URL will be app/design/frontend/your-package/your-theme/layout .
2. Now we need to copy the poll.xml from app/design/frontend/base/default/layout and paste it in the layout folder that you just created in your theme folder.
3. Open up the poll.xml and type <remove name=”right.poll” /> . This will remove the whole poll block.
4. Refresh your home page and you should see that the poll is removed.

Lesson 5: Styles Customization

Description: Creating your new stylesheet to declare new styles

Steps:

1. Go to the root folder of your Magento folder and from there, go to the skin/frontend/default/default/ and copy all folders and files to  skin/frontend/my-package/my-theme, which you created in Lesson 2.
2. Open styles.css, make CSS changes, and view the results!

For more information please visit:
http://info.magento.com/rs/magentocommerce/images/MagentoDesignGuide.pdf

Happy Magento development!

Questions or comments on Magento? Please feel free to share them below and Pixafy’s certified expert Magento developers will answer them!