3 quick steps to create your own theme in cs cart-4.0.3
Download as PPT, PDF1 like2,820 views
1. To create a custom theme in cs-cart, first clone the basic theme to avoid modifying core files. Then create a new preset to customize colors, fonts, and other design elements before saving it. 2. Next, create a new layout by cloning the default layout and rearrange blocks as needed. Settings for individual pages can be customized in different layout tabs. 3. Making a new preset and layout allows full customization while keeping the original templates as backup if needed. The process involves cloning, customizing presets and layouts, and saving changes.
3 quick steps to create your own theme 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
Editor's Notes
- #7: This presentation was made on the base of the blog post - http://tonytemplates.com/blog/?p=364