Copy a TemplaVoila Template

In the How-To we are just showing  the process of how to copy an existing template so you can modify  the copy instead of the original.

As long as you're only editing CSS stylesheets and images, this should be all you need to do. Once you get into editing the actual template HTML, you'll have to learn some of the ins and outs of mapping template files.

In this example, we will copy the Template files and then modify the .css file. Many changes in the Frontend display can be made by modifying the CSS file without modifying the Template file itself.

1. Begin by copying the file folder and the contents of the template you want to modify. In this case, we'll modify the Welcome Hearts - 2 Column, Green template.
2. You can copy the files in two different ways. You can use the Filelist module and copy the files and folders one at a time.However, this is an impractical way to copy so many files. A more efficient way is to use an FTP client. There are many free and low-priced FTP clients available on the web. In this How To we will use the free program WinSCP.
3. The TemplaVoila templates are located in the directory fileadmin/tv-templates.
4. In the WinSCP dashboard, the left window is the file directory on the local computer. The right window is what it will look like when you have logged into your TYPO3 website.
5. The Welcome Hearts - 2 Column, Green template is found in the template1-sub2green directory. Right click on the directory and "Drag" it to the left window to copy it onto your local computer.
   
   To find the corresponding file name for a template, refer to the WEC Getting Started Manual.
6. Next, rename the file folder so you won't get confused later.
7. Next, change the files that you want to modify.
   
   In our example, we've decided we want to remove the underlining from the "Breadcrumb" trail, so we modified the style.css file.
8. Once you've modified and saved your files on your local computer, upload the whole directory into the tv-templates directory (in the right window). One way to do this is to right click on the file and select "Copy." Then scroll down to the root of the directory in the right window, right click and select "Paste."
9. Once the directory has been copied, then log back into the TYPO3 Backend.
10. To activate your modified files, use the List Module and open the General Storage Folder.
11. Now, make a copy of the Welcome Hearts - 2 Column, Green template object (TO).
12. Click on the Copy icon and then paste the record beneath the existing file.
13. Now, rename the original record so that it remains in its orignial state. Click on the Edit icon and rename the page.
14. Now, edit the new Welcome Hearts - 2 Column, Green record.
15. First, change the Template's File Reference to the template you copied in the tv-templates directory.
16. Next, change the title so you remember you've changed the record.
17. Now, change your site's template by clicking on the WEC Config Module, find the modified template, and select it.
18. Finally, clear the caches to ensure your modified template is available in the Frontend immediately.
19. To view your changed template, click on the Page Module, select the page from the Page Tree, and then click the View Page icon.
20. As you can see, the underline has been removed from the Breadcrumb trail.
    
    A successful modification!