In this article we will describe how to decorate your Magento theme design for Christmas holidays with minimal files modifications and schedule automatic design change.

Plus your current theme will be untouched for after-holidays time.

Step 1. Add new theme under your package.

For example:

If your theme is located here: /default/mytheme/
In this case you need to create new theme here: /default/christmas/

Step 2. Specify default theme.

Specify default theme (which should be your current undecorated Magento theme) in Magento admin -> System -> Configuration -> Design -> Themes.

Unfortunately if you already have default theme, it will be not possible to implement holiday changes this way. And you will need to create new Christmas theme with all files.

3. Schedule new design change.

Schedule new design change in Magento admin -> System -> Design.

Now the Magento store will work this way:

  • It will search for layout/template files under folder /app/design/frontend/default/chrismas/
  • If no files found, layout/template files will be taken from your current theme /app/design/frontend/default/mytheme/

It means that we can do an incremental theme patch without copying of all files.

4. Create new XML layout.

Create new file /default/christmas/layout/local.xml

Important: if you already have a file /default/mytheme/layout/local.xml, you need to copy this file to /default/christmas/layout/local.xml, otherwise you should create a new one.

Now you need to insert a following code to the XML file:

	<layout version="0.1.0">
		<default>
			<reference name="head">
				<action method="addCss"><stylesheet>css/styles-xmas.css</stylesheet></action>
			</reference>
		</default>
	</layout>

It will add new CSS decoration file to all pages of the store.

5. Create new CSS.

Now, you need to create a new CSS file in /skin/frontend/default/mytheme/css/styles-xmas.css.

That is all, now the only thing remaining to do is to insert your Christmas CSS styling in the styles-xmas.css.

Lets do a snowfall in the site background:

body {
    background: posiion: relative;
}

If you will decide to decorate your theme further, e.g. change the look of .phtml template files, you can copy any .phtml file from your current theme to Christmas one (app/design/frontend/default/christmas) and modify it in any way.

Happy Christmas and Happy New Year!