Create your first template / theme

To create your first template / theme there are few easy step to follow :

• select a model or a blank template / theme
• edit the styles and the layout
• install the template / theme
• save your work

Select a model or a blank template / theme

Go in the Template Creator CK interface,

from Joomla : admin menu >> components >> Template Creator CK

from Wordpress : admin menu >> Template Creator CK

You will get the list of templates / themes with the toolbar at the top :

in Joomla :

in Wordpress :

To create your first template, click on the New button and you will start the job. Template Creator CK ask you what to do :

• create a template / theme from a model : it will import the design and all the positions and you will be able to edit it as you want
• create a blank template / theme : you can select a base layout and then start from scratch to create all the design and add the positions you want

Create a template / theme from a model

You can navigate thourgh the themes, you can click on the Details button to get more infos and also check some demos.

If you want to use one of these themes to start your joomla template / wordpress theme, you can click on the Load button and Template Creator CK will import it automatically.

NOTE : if you get any problem to load the theme, you can install it manually.

Create a blank template / theme

If you don't want to start from a model, you can create your own joomla template / wordpress theme from scratch. You will start with a base layout and a default "blank" style.

Here is the selection of the base layout :

Just select the one that is the closest to your needs. You can then edit what you want after this selection : add, move or remove anything.

You can start to edit your styles and layout.

Edit the styles and the layout

Once you have selected the layout or model to start with, you can edit your layout and setup the styles.

Edit the styles

For each block, column row, wrapper that you have in your template, you can put your mouseover it and a toolbar will appear. This toolbar have all the needed features to edit your items. You can click on the pencil icon to edit the styles

You can edit the styles in 3 different ways

• put your mouse over the block to show the toolbar, and click the Edit the styles icon in it
• go in the left panel in the Create mode and click on the cog icon of your item
• use the context menu with the right click of your mouse in the item, and you can use the menu to Edit the styles

All the options will appear in the left panel, you can setup the colors, margins, the columns, etc ...

Once you have setup your styles on an item, you can click on the Apply button to force the styles to apply if needed, or simply edit something else. You don't need to close the panel before editing another item.

Edit the layout

You can move the items by using the icon in the toolbar (that appears on mouseover).

You can remove the items, using one of the 3 ways to edit : mouseover, right click or left panel

You can add an item from the left panel, in the Create mode. Click on the Add an item button to open the panel with all available blocks that you can drag and drop into your joomla template / wordpress theme.

Install the template / theme

Once you are ready (or you can also do that immediately after the layout selection), you will need to install your joomla template / wordpress theme for the first time.

You can do that in 2 ways :

• left panel >> actions >> Install
• bottom toolbar >> Install (this is a shortcut)

The message will tell you that the template has been installed correctly.

Now your template / theme is installed in your website. You can use it like any other template / theme

in Joomla : go in the templates list, you will see it listed. You can also select it an set it as default template to apply it to every pages of your websites (see the Joomla documentation for more infos)

in Wordpress : you can go in the appearance menu >> themes, you will see your new theme listed here. You can activate it to apply it to every pages of your websites (see the Wordpress documentation for more infos)

Save your work

Once you have worked with your template / theme, you must save it into Template Creator CK. This means that your changes will be saved for a future use. This is not related to the install / copy method that updates the files in your website.

To understand :

• Install + Copy / Apply changes : it will update your template / theme files in your website. It does not save your work
  For Joomla : in ROOT/templates/YOUR-TEMPLATE
  For Wordpress : in ROOT/wp-content/themes/YOUR-THEME
• Save : it will save your work into Template Creator CK. This is stored in the database of the component, it does not update the files

 This is important to understand because you can make some changes in the interface without applying them to your template / theme immediately. These are 2 different processes.