Theme Editor User Manual by nop4you.com

Transcription

1 Theme Editor User Manual by nop4you.com 1

2 List of content: 1. Before install Installation... 3 a. Reload list of plugins... 3 b. Find plugin and install Configuration... 5 a. Editor style... 5 b. Start editing... 6 c. Made it happen... 9 d. Create new theme

3 1. Before install ThemeEditor plugin allow you to made any modifications without access to your store FTP. It was design to help store owners as well as store developers and administrators to made all necessary modification with only admin panel access. 2. Installation o o Unzip downloaded archive, copy Misc.ThemeEditor directory into [your nopcommerce website directory]\plugins. In admin panel go to Configuration -> Plugins -> Local Plugins a. Reload list of plugins Click Reload list of plugins 3

4 b. Find plugin and install Find plugin on the list and click Install. After installation, plugin create own menu position. 4

5 3. Configuration a. Editor style You may define how your editor will look like. You have few editor styles available, grouped by bright and dark themes. By default, Monokai style is checked, and it looks like sample below image: 5

6 Below example of bright theme b. Start editing To start edit your files, first you need to choose theme. By clicking edit you got access to files. First some additional explanation 6

7 In my test environment I made some modifications, to show how plugin is working, and how I may work with this editor. So first, how it is presented from my Visual Studio And how it is presented by our plugin: It looks a bit different, why? Our plugin helping, if you need to add to your theme folder and file which is not included in your current template. In that case, you need to copy from default view file (red icons). Here it is presented, all you need is to save file. New file will be added to working theme. 7

8 What is more, if you already added folder, our plugin showing rest of the files which by default are presented at the default view. Please have a look at mine Product view catalog. It has only one file, while on our plugin: I may only choose file, and save to include it to /Themes folder. 8

9 c. Made it happen If you choose any file, you will be able to see content, also will be able to save, delete, and restore file from original. Let`s do any change, and see how it is working. My test environment will show product details as below. I do not want to show price, would like to change it. Please note, for this moment, I do not have included file, which showing prices. To show prices is used default view file from /View catalog. 9

10 So first, I need to add that file to my /Themes/DefaultClean catalog. Find it on the list, click and save. There is information at the top, and you need to restart application to save copy into new place. How now it looks like from backend? I need to move it from folder, to my Visual Studio, to show it there. 10

11 After restart application, I may see as follows. Also here, _ProductPrice.cshtml file has been added. Please note, icon file has been changed. Let`s do modification. I apply change by adding new class to new span 11

12 Let`s do one more change, and apply styles. This file is included to working theme, so do not need to add. Just made change, and save. 12

13 And how it is showing by my store? Just like it should. d. Create new theme Upload of ready theme is not supported. But you may create new template, directly from your admin panel. To do that, just click Theme Editor Next, click Add new button. 13

14 Next, add all necessary fields, and add theme image. Save it. New theme has been added And it is ready to use. Please note, this template do not have any files nor css. You will need to add it. How to build own theme may find at nopcommerce documentation: 14