<tip c w>THIS IS A WORK IN PROGRESS - don't go following these instructions just yet, we're still working on them! We'll have this tutorial finished for you by the time 7.3 final ships.</tip>

These instructions are meant to be followed for sites updating from versions before 7.3.0 that wish to keep their existing design, but would like to make it use newer RWD techniques to make it more "mobile / device friendly" like the new default design does in 7.3 and higher.

Compatible Design Warning: If your design first started from versions prior to 7.0, or if your design is very deeply customized, these instructions may not work for you. You may be able to use some of the steps as general tips, but most of the instructions are specifically geared for designs that still match the basic structure of more recent versions of the software. If you find that you do not have a lot of the templates that the instructions are referring to, you may fall into this category. If your design is one of these, you can still try to follow along as I said, to use these as general tips, but for the most part you may be on your own.

For Update Friendly Template Sets Warning: These instructions were made for sites that originally used the Create Main Template Set tool within the admin at Design > Template Sets. If the template set was originally created by making a full copy of the default templates of the original version, you will need to follow the Make your Template Set Update Friendly tutorial before beginning this one. If your design falls into this category, more than likely it will be faster to start over than trying to convert your existing design. Of course you can still go this route, be sure to read that tutorial and this one first before you begin so you can get an idea of just how much work lies ahead of you. You've been warned! Note: If you aren't sure how your template set was made or whether it is "update friendly" yet or not, check the file "external/css/theme_styles.css", the first line. If the first line starts with "@import" you are likely already "update friendly". If it does not on the other hand, you will likely need to follow that tutorial first to make your template set update friendly.

1. First, make a backup of your template set so that you have a copy of all the files, in case anything goes wrong during these instructions. You can do that in your admin panel at Design > Template Sets, by clicking on the download button next to the template set. Or just download using FTP. <
2. In your custom template set¹⁾, delete the following folders using FTP²⁾:
   • system/ <
   • module/ <
   • addon/ <
   • external/js/ (The JS sub-folder only, do not delete the entire external folder) <

<

1. In your custom template set³⁾, in the folder external/css/, delete all the files except for theme_styles.css, primary_theme_styles.css⁴⁾, and secondary_theme_styles.css⁵⁾. <
2. In your custom template set⁶⁾, edit the file external/css/theme_styles.css and look at the top of the file. Does the first line have something that looks like this on it?

   /* $Rev:12345$ */

   The number will be different. If it DOES have that line at the top, then replace the line with the below, filling in the "Rev number" in your file for # below:

   @import url('../../../default/external/css/theme_styles.css');
    
   /*
    * Leave first line of this file intact to make software updates easier!
    * 
    * File manually copied using Rev: #
    */

<tip c h>Note: The most important part of what you are adding to the theme_styles.css file, is the first line, the one that starts with "@import…". The lines below that are "CSS Comments", they do not have any affect on the actual "styles" of your website, they are there for information purposes⁷⁾.</tip> <

1. In your custom template set⁸⁾, look to see if you have the file external/css/primary_theme_styles.css. If you do, follow step #4 above, but for the primary_theme_styles.css file. In the text you replace, use this instead of what is listed in that step:

   @import url('../../../default/external/css/primary_theme_styles.css');
    
   /*
    * Leave first line of this file intact to make software updates easier!
    * 
    * File manually copied using Rev: #
    */

<

1. In your custom template set⁹⁾, look to see if you have the file external/css/secondary_theme_styles.css. If you do, follow step #4 above, but for the secondary_theme_styles.css file. In the text you replace, use this instead of what is listed in that step:

   @import url('../../../default/external/css/secondary_theme_styles.css');
    
   /*
    * Leave first line of this file intact to make software updates easier!
    * 
    * File manually copied using Rev: #
    */

<

1. For most sites, you are almost finished! If, however, you know that you have customized one of the files that you deleted in one of the steps above, you have a little more work to do. For each system, module, or addon template you have customized:
   1. Copy the customized template back into your cleaned up custom template set, re-creating the folder structure for the parent folders. Only copy customized templates!¹⁰⁾ <
   2. If you are following these instructions after an update, check to see if the customized template needs compatibility changes for the version you have updated to. You can find general tips for doing that in Geo Updates & Customized Templates. <
   3. For every software update you perform in the future, you will need to keep your customizations updated. The most likely time you will need to adjust your customized templates, is during a feature release¹¹⁾. The linked page has more information about the "best way" to do this.

<

1. In the admin at Design > Template Sets, make sure the template set you have just "cleaned up" is set to be used. Then test it by going to the front side and making sure everything looks correct. Test the main parts: register a test user, place a test listing, view the listing make sure it displays correctly for your site. Don't forget to delete the test listing once you are done with it. Most of the time, no style adjustments are needed, but it is still best to double check¹²⁾ <