Today we are going to talk about how can we create and define custom package, theme, skin, layout and template for admin area of Magento?
Strangely we have this control for frontend which Magento has provided as part of their core product but not sure why Magento hasn’t done this for admin or backend. Personally we find it really strange, but nevermind, this give us opportunity to go deep level of Magento code which is always a good thing.
Let’s crack on with our step by step implementation of doing this job -:
Step 1 – Create a new module under your local folder, in our case under applocalScommerceAdminTheme
Step 2 – Register the module in etc/modules directory either in Scommerce_All.xml or Scommerce_AdminTheme.xml by using the following code
<Scommerce_AdminTheme> <active>true</active> <codePool>local</codePool> </Scommerce_AdminTheme>
Step 3 – Create config.xml under etc directory of your module applocalScommerceAdminThemeetcconfig.xml by using the following code
<?xml version="1.0" encoding="UTF-8"?> <config> <modules> <Scommerce_AdminTheme> <version>0.0.1</version> </Scommerce_AdminTheme> </modules> <global> <events> <adminhtml_controller_action_predispatch_start> <observers> <Scommerce_AdminTheme_Observer> <class>Scommerce_AdminTheme_Model_Observer</class> <method>adminTheme</method> </Scommerce_AdminTheme_Observer> </observers> </adminhtml_controller_action_predispatch_start> </events> </global> <adminhtml> <translate> <modules> <Scommerce_AdminTheme> <files> <default>Scommerce_AdminTheme.csv</default> </files> </Scommerce_AdminTheme> </modules> </translate> <acl> <resources> <admin> <children> <system> <children> <config> <children> <Scommerce_admin_theme translate="title"> <title>Admin Theme</title> </Scommerce_admin_theme> </children> </config> </children> </system> </children> </admin> </resources> </acl> </adminhtml> <default> <Scommerce_admin_theme> <package> <current_package>default</current_package> </package> <themes> <default>default</default> </themes> </Scommerce_admin_theme> </default> </config>
In the above step, the key thing to notice is the adminhtml_controller_action_predispatch_start event which we are going to call to set our package, theme, layout, skin and template when you login to admin panel of your site.
Step 4 – Create system.xml under etc directory of your module applocalScommerceAdminThemeetcconfig.xml by using the following code
<?xml version="1.0" encoding="UTF-8"?> <config> <tabs> <scommerce translate="label"> <label>Scommerce Configuration</label> <sort_order>10</sort_order> </scommerce> </tabs> <sections> <scommerce_admin_theme translate="label"> <label>Admin Design</label> <tab>scommerce</tab> <frontend_type>text</frontend_type> <sort_order>300</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> <groups> <package translate="label"> <label>Package</label> <frontend_type>text</frontend_type> <sort_order>10</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> <fields> <current_package translate="label"> <label>Current Package Name</label> <frontend_type>text</frontend_type> <sort_order>10</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </current_package> </fields> </package> <themes translate="label"> <label>Themes</label> <frontend_type>text</frontend_type> <sort_order>20</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> <fields> <template translate="label"> <label>Templates</label> <frontend_type>text</frontend_type> <sort_order>10</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </template> <skin translate="label"> <label>Skin (Images / CSS)</label> <frontend_type>text</frontend_type> <sort_order>20</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </skin> <layout translate="label"> <label>Layout</label> <frontend_type>text</frontend_type> <sort_order>30</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </layout> <default translate="label"> <label>Default</label> <frontend_type>text</frontend_type> <sort_order>40</sort_order> <show_in_default>1</show_in_default> <show_in_website>1</show_in_website> <show_in_store>1</show_in_store> </default> </fields> </themes> </groups> </scommerce_admin_theme> </sections> </config>
In the above step, we are creating our new tab (Scommerce Configuration) and creating system configuration for defining package, theme, skin, layout and template from admin panel.
Step 5 – This is the last step and also the most important step of all. Here we are going to create our observer class under Model directory of our module appcodelocalScommerceAdminThemeModelObserver.php.
This class set the package, theme, skin, layout and template for admin panel when you login to admin area of your website.
class Scommerce_AdminTheme_Model_Observer
{ protected $_currentArea = "adminhtml"; protected $_packagename = "default"; protected $_theme = "default"; const CURRENT_PACKAGE = "Scommerce_admin_theme/package/current_package"; const CURRENT_THEME = "Scommerce_admin_theme/themes"; public function adminTheme() { if (Mage::getStoreConfig(self::CURRENT_PACKAGE)){ $this->_packagename=Mage::getStoreConfig(self::CURRENT_PACKAGE); } if (Mage::getStoreConfig(self::CURRENT_THEME."/default")){ $this->_theme=Mage::getStoreConfig(self::CURRENT_THEME."/default"); } elseif(Mage::getStoreConfig(self::CURRENT_PACKAGE)){ $this->_theme=Mage::getStoreConfig(self::CURRENT_PACKAGE); } Mage::getDesign() ->setArea($this->_currentArea) ->setPackageName((string)$this->_packagename) ->setTheme((string)$this->_theme); foreach (array('layout', 'template', 'skin') as $type) { if ($value = Mage::getStoreConfig(self::CURRENT_THEME."/".$type)) { Mage::getDesign()->setTheme($type, $value); } } }
}
As you have noticed Mage::getDesign() is the main function which sets the theming for frontend and adminhtml using setArea function.
Hope this article helped you in some way. Please leave us your comment and let us know what do you think? Thanks.
