ThemeTuner is a Magento extension for designers and non-technical users to alter the look and feel of a Magento theme using an intuitive user interface.
Its main purpose is to enable Magetno admins to make changes to the visual design of the site without any knowledge of code or use of programmers. Although you can basically design completely new theme, it is most useful for smaller changes and tweaks. It helps you save a lot of time and/or money (if you outsource your programming).
What’s added to Magento
- New layer of stylesets to system called “tunes”.
- In short “Tune” is a sub-version of theme. That means that all the themes can have an unlimited amount of tunes as theme variations.
- New section to Magento admin panel called “ThemeTuner”
- Overview board with all the themes and tunes on current Magento installation.
- Overvew of what theme/tune is used on live store(s) and option to change these settings.
- Ability to build several tunes per theme.
- Theme/tune editor with feature rich styling tools
- Adds new elements to “System > Configuration > Design > Themes” to easily select the themes and tunes to be used for a selected store view.
Common usage process
Each time you start styling you use some existing theme as a starting point. In many cases it is Magento Default theme but it can be any Magento theme you might have. When you have made desired changes you might want to save the tune to either start using it or continue your work later on. If you want to switch the tune on for your live store then you should select the store you want in System > Configuration and choose theme and tune you want to associate the store with.
Adding new Tune
When you have installed Magento and ThemeTuner you already have 4 themes to start the work with. You can also install 3rd party themes to use as a base.
To add a new tune go to admin and choose Themetuner, where you will see a list of themes available on your Magento installation. Choose a theme you want to use as canvas for your new tune and click “add tune”.
On the next screenshot you can see that there are 4 themes and “default” theme has 2 tunes:
The above screenshot also indicates that you are able to see if any of the tunes is used on any of your live stores and what content is attached to it. Attached Content feature is very useful if the tune is not live but you want to build it and test it on actual store data (categories, products, cms pages etc).
PS! If you start a new store then it’s recommended to add content first so you are able to move around on different pages (product page, cart page etc.) and see all different elements of the site you are about to design.
Using ThemeTuner editor
When you enter editor there are two different modes:
- Edit mode – This mode is the main designing mode. You can select any element on the page and change the style of that element using the controls at the bottom of the screen. In general you can change all possible Cascading Style Sheet (CSS) elements (fonts, margins, paddings, colors, borders, background images etc.). By default “edit mode” is selected when ThemeTuner editor is launched.
- Navigation mode – This mode enables you to move around the site so you could design all the different pages on your Magento store.
When you click on an element in edit mode a toolbar will open at the bottom of the screen:
- CSS class selector / element selector – This pane shows which HTML element you have selected displaying their class attributes. You can change specific CSS classes and their combination to manage more complicated situations. This feature is meant for more advanced users.
- Style edit panel – This is where you define new styles. This is very self-explanatory and best understood if you just try different options to see what effect they have on selected elements.
- In addition to style changes we have also implemented an option to change your site logo right there inside ThemeTuner.
- For better image management we have implemented Magento media manager into ThemeTuner to simplify the way you would be able to upload and change background images.
- For better color selection experience we have built in color memory. That means that when you start changing some elements’ color, the pallet will pop up with list of colors used across site so you could easily use same colors again and again without memorizing the color codes.
- When you change margins or any other numeric values in “Style edit panel” you are able to use your arrow keys to make small adjustments and fine-tune it to perfection.
Associating themes with stores and switching tunes live
In addition to regular theme/tune management board under “Themetuner” menu we have also built better Theme and Tune selector under “System > Configuration > Design > Themes”. In default Magento you have to fill in the theme name by hand and you may not know what themes you even have available but with ThemeTuner you get dropdown listing all Themes and Tunes associated with the Theme.
You are simply able to choose a store view from Current Configuration Scope, select a Theme and Tune and your newly designed Tune has been switched to live and visible in the frontend of your store.
Use cases ideas
Some ideas for what ThemeTuner is a great help for:
- Seasonal specials
- Define Christmas or Easter specific design additions beforehand quickly and easily in ThemeTuner and use them for the period you need. It might be a good idea to keep the tune in case you might want to use the same tune as a base the next year.
- Product & Brand Campaigns
- You can make special designs or small design tweaks to brand pages or specific products to better attract customers and endorse your campaign. This can be done by using “CSS Class selector” and using page specific CSS classes. Different categories and different products can have endless amount of different styles.
- Customizing template themes from 3rd parties
- One of the fastest and less expensive ways to get started with your store is to use premade templates that can be bought all over the internet. You can use these themes and edit them with ThemeTuner so they look completely bespoke with no fear that someone else has the same design.
- Building sub stores (color changes)
- This is one of the most common use cases. If you already have your own theme designed especially for you and you want to run several stores or sub store. You can easily make just small tweaks like change color theme and logos. It the quickest and less expensive solution for doing this.
- Testing different solutions and color schemas
- You can build several color versions of your site and test on users before deciding what you want use for the store you come public with.
- Fast prototyping
- Showing and trying out new ideas have never been quicker and simpler.
- You can basically test and explain your design ideas during meeting in few minutes. It is extremely impressive and time saving.