This presentation is devoted to the topic of own theme creation in cs-cart-4.0.3

1. 3 Quick steps to create your own
theme in cs-cart-4.0.3
Some practical pieces of advice

2. 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.

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

5. 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.

6. 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.

7. 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.

8. 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.

10. 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.

11. 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.

12. 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.

13. 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.

14. 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.
The source of this publication