3 quick steps to create your own theme in cs-cart-4.0.3

Hello readers of the rubric “Learning Sessions”.

In the last article “How to make your own filters and show them on your site in the OpenCart” we talked to you about filters implementation in the OpenCart.

Today’s CS Cart theme tutorial is devoted to the topic of own theme creation in cs-cart-4.0.3

Ok, read some pieces of advice below.

The first thing — don’t make changes in the basic theme. If you do some incorrect changes, they can go to the core files of the whole template. Thus you will have problems with recovering the whole your site. If you clone basic theme and something goes wrong with your custom theme, you can always delete this theme and clone basic theme again. The same procedure has to be done with layout and theme presets.

1. Clone Basic theme

So, first of all you should clone basic theme in admin: Design -> Themes -> press Clone theme.

In the window write name and press Save. After this your custom theme will be automatically displayed in the Front End of your site.

2. Create a new preset

For sure, you will need to change the view of your site, logo etc. So, next step is to change colors, backgrounds, fonts, store logo, store favicon.
Now you are in Design -> Themes. Press button Customize theme. After that your Front end will be opened in a Template editor. You can also see your web site in the Template editor from menu in admin: Design -> Template editor.
Above all, it would be useful to see how each preset looks. Choose some of presets in the left drop down menu PRESETS.
For example, we choose Reddish. Now you can see that your site was changed to orange color scheme.
If you press button CLOSE, situated under the button with arrow, this chosen preset Reddish will be set in your Front end.

It is ok, but you need also to change logo, favicon, colors etc. And, for sure, you need to save all your own changes and have an opportunity to switch it for some of your other theme (if you will install or buy one).
So, you should choose layout that is maximally good for you and press clone button. After that, enter your name in the appeared window and press OK.
To this moment all changes are saved in this preset. If you don’t like it you can always clone other preset and use it. Don’t forget to press button SAVE after some changes have been done.

In the preset drop down choose these items one by one: backgrounds, colors etc., make changes, and press SAVE. You can press Reset button in the bottom of each group of properties.

You should also keep in mind that in cs-cart 4.0.3 the additional field Custom CSS is appeared in the Theme editor. You can write css styles directly here. These styles will be used prior to all other styles.
So, remember that you need to have at least basic css skills. These new css styles are written to some file. You can also edit it. This file is created automatically, when you create some new preset.

3. Create new layout

Despite the fact that you can set viewing of blocks in presets, position and sort order of blocks you need to set in Design -> Layouts.
It would be better not to change Main layout also. So, in the first place you need to switch layout to layout of your theme in the left menu.
New layout is already created. It’s created immediately with the new theme cloning.

In the layout you can make settings specially for each page of your web site.
The whole layout you can see in tabs:
Default — used for all pages. Most of them include header and footer blocks which are the most common for each page.

Let’s see, for example, block Main banners on the Homepage. Each block has its own settings, type, and content. Below Main banners you can find the button Block options and press it. Then change settings in the window like you want.

In the default cs-cart template, in the Main banners block, banners from menu Marketing -> Banners are used.

We will not describe all blocks, because there are a plenty of they. You can always read about each standard cs-cart block on the official cs-cart site.

Each block can be dragged with a mouse to another place. But remember — do all changes carefully to not break the whole layout. However, if something is broken, you can set Main layout again, copy it and make changes in the new layout.

In the window choose all settings from default layout.

So, in the end you have your own theme: with theme’s files, theme’s preset and own layout.

That is all for today.
Follow our next publications.

Tonytemplates team