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

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

If you fall into this group, you will likely need to convert the design on your own (or hire a designer to do this for you if you wish), or you might consider "starting over" as it may be less work than converting a deeply customized design. You may be able to use parts of the instructions below as general tips for your own conversion, but for the most part you will be on your own as there is simply no way to account for every different way the design can be customized.

Something to keep in mind is that we spent roughly 2 months working on overhauling the default design, to make the design responsive and "mobile/tablet friendly" in the latest version. If your customizations are deep enough, you can expect to spend a similar amount of time or possibly even more in order to make your own design responsive.

These instructions were made for sites that already have an "update friendly" template set, meaning that minimal work is required for "normal updates" and it is not just a complete copy of the default templates. If your template set was originally created using the Create Main Template Set tool within the admin at Design > Template Sets, you should be fine.

If the template set was originally created by making a full copy of the default templates of the original version using FTP or other means, you will need to follow the Make your Template Set Update Friendly tutorial before beginning this one.

If you aren't sure, check your template set, if it has "system", "module" or "addon" folders in it with a complete copy of all the sub-folders and files in them from the default template set, when very few (if any) of them are actually customized, then yes you will need to follow those instructions linked above.

Note: Be sure to read Make your Template Set Update Friendly instructions along with the instructions below before you begin, so you can get an idea of just how much work lies ahead of you. For many it will probably be a lot faster to start over using a new template set created from the new design and re-applying customizations, than trying to convert an existing deeply customized design.

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¹²⁾ <