Magento theming is complicated, it involves knowledge of XML-layouts, PHTML-templates and ofcourse CSS and general webdesign concepts. But sometimes a simple modification of the MagentoTM Default Theme might be sufficient. This video tutorial takes you through the steps to modify the Magento Default Theme.
Never modify core files
Magento is complex, and complex software may contain bugs. The Magento Community Edition ships with a separate application - the MagentoConnect manager - which allows for easy upgrades through a couple of mouse-clicks. But if you have modified the original files, these files might be updated again, which will also delete all your changes. To prevent this, the general rul "Never modify core files" should be applied.
Magento ships with a wonderful theming concept (referred to as parent/child theming) which allows for changes to be implemented without modifying the original. In this case, the Magento Default Theme serves as parent theme while you can create your own subtheme. For this to work, you will need to configure the right directories and also configure these directories to be used within the Magento Configuration.
Configuring the subtheme
To actually use your own subtheme, you will need to modify the Magento Configuration - within the Magento Admin Panel under System > Configuration > General > Design. Modifying images or CSS, means you have to change the name "default" to the name of your own subtheme for Skin.
Advanced stuff
Besides modifying images and CSS stylesheets, there's a lot more to do with Magento themes. For instance, if you want to display a certain block (for instance the shopping cart) on extra pages, or if you want the left column to be a right column instead. These changes involve changes in XML-layouts which is quiet more complicated. With our YireoTM tutorials you will find most knowledge you need, it just requires you to study it.
Tutorials on Magento theming
- Video: Magento Developer Toolbar
- Video: Add CSS to a single Magento CMS page
- Video: Custom column layout
- Video: Dynamic product image to Static Page
- Video: Replace Magento Checkout Button image with CSS
- Build your own Magento override-module
- Set the default direction or ordering for Magento category-pages
Tutorials on MageBridgeTM theming
- MageBridge Design Guide
- MageBridge, RHUK Milkyway and the Magento default theme
- Creating template overrides to support MageBridge
- MageBridge and module chromes
- Working with JavaScript in MageBridge
- Theming-options in MageBridge
- Template override of fixes.php
- Working with JoomlArt templates
- MageBridge combined theming
- MageBridge template helper
- Using RocketTheme add-ons for MageBridge
- Video: MageBridge addon Rockettheme theme
- Applying XML Layout Updates in MageBridge - (1) Overview
- Applying XML Layout Updates in MageBridge - (2) CMS Page
- Adding custom Magento scripts to the Joomla! page
- Switch between Magento theme and Joomla! template
- Using YOOtheme patches for MageBridge
- MageBridge template overrides
- MageBridge FAQ: Theming
