[title sub="Written by Jean Gosselin"]Composr Supplementary: Making a new theme[/title]

[box="Potentially Outdated Tutorial"]This supplementary tutorial might be outdated as it was written for a previous version of Composr CMS (version 10).[/box]

This document presents an illustrated step-by-step tutorial on making a new theme.

This tutorial was written for version 8, so specific CSS changes are no longer accurate. It therefore cannot be followed exactly anymore.
However it is still very useful to see the exact steps taken to make a theme, start to finish.

[contents]decimal,lower-alpha[/contents]

[title="2"]Making a new theme[/title]

We will make a new theme, Paradise.

[img]data_custom/images/docs/sup_making_a_theme/making_a_theme.jpg[/img]

Files needed for this tutorial:
[media]data_custom/modules/docs/documents_paradise.zip[/media]

The [tt]replacement-code-css.png[/tt] was extracted using a diff tool to assist your manual edit of the CSS files.

[title="2"]How to copy and adjust an existing theme[/title]

Continuing on with the Paradise theme, we can make a new theme Jungle, by just copying it. This is useful if you like an existing Composr theme and want to modify it without making the changes directly on top of the original theme.

[img]data_custom/images/docs/sup_making_a_theme/copying_a_theme.jpg[/img]

Here are the images used:
[media]data_custom/modules/docs/documents_jungle.zip[/media]

[title="2"]See also[/title]

 - [page="_SEARCH:tut_themes"]Themeing your site[/page]
 - [page="_SEARCH:tut_designer_themes"]Designer themes, implementing a clean-room design[/page]
 - [page="_SEARCH:tut_releasing_themes"]Releasing a theme[/page]
 - [page="_SEARCH:tut_theme_lifecycle"]Theme Lifecycle[/page]
 - [page="_SEARCH:sup_chrome_tools"]Using Chrome development tools to help with themeing[/page]

{$SET,tutorial_tags,themewizard,core_themeing,core_primary_layout,core_html_abstractions,core_form_interfaces,core_abstract_interfaces,core_abstract_components,Design & Themeing,novice}{$SET,tutorial_add_date,May 2012}{$SET,tutorial_summary,An illustrated step-by-step tutorial on making a new theme.}[block]main_tutorial_rating[/block]
