Updating a Website From a New Template Download

Moving content from your old website into a new web template

Option #1:
Moving old content into a new template
Because most new templates are either a responsive design, are HTML5 code, or include a mobile sub-website, updating is best done by transferring only plain text and some images from the old site to the new one.

• Keep It Organized: When I do updates of this type I have the old website inside one folder, and have the new website inside a new separate folder.
  
  
• Getting Started: Do the steps on the new template "help.html".
  
  Keep in mind that you are really re-doing your entire website. HTML and CSS code from old templates should not be copied into new templates.
  
  
• Files: Other than images you can not copy over any files from the old template to the new template folder. Even copying over images may not be possible due to image size differences.
  
  
• Copying Text Content Tip: Open one of the html pages from your old website in a web browser. Copy any section of text, right in the browser window, paste this text into a plain text editor like Notepad to "clean" it. Select and copy that text, then you can paste this "cleaned" text into the source code in the new template html pages. This keeps the text clean so you do not copy over any old code.
  
  
• Time: Estimates are that updating will take 1 to 1.5 hours per page. Be patient and just do one page at a time and eventually the site will be completed. You'll have a shiny new website when you are done that'll be even better than your old one!
  
  When we updated this support site to be responsive, it took 4 months to do 498 pages for an average of about 1 hour per page.
  
  
• Testing: You can create a folder in your hosting login and upload the new template into this folder for testing. Plus this makes a backup of your updates.
  
  
• Keep it Responsive: For editing tips using a responsive template see Editing Responsive and Mobile Templates
  
  
• Make Backups: Periodically backup your entire new website folder on a thumb drive so you don't lose any of your work!
  
  

Option #2:
Updating your current webpages - advanced users
If your website is using a template that is perhaps only one or two revisions back (most templates are updated yearly), you may be able to use the following method to update. Make extra backups if you plan to use the methods outlined below.

In general, method #1 outlined above is the better solution.

Responsive notes:
If the new template you will be using is a responsive design, and your old website is not, the following setup details may not be the best approach for updating. See section above.

Check for your model updates:
Be sure to check on ALL updates for your template model that were done after your purchase date. Your original download will already have all updates included prior to your purchase date. Click here to check for updates. Find your purchase date and read up from there on the page.

Before you start:
Make a backup of your current site before you start. This way if you make any errors you still have your current site. Most template updates are for better compatibility in mobile devices and tablet computers.

Important: If your template header.js copyright is different than the downloaded template update you can not copy over any files from the new template into the old template. It is best to re-do your website and copy over only plain text and images from the old template. In all cases re-doing your website is the recommended action.

If you only need better webpage printing:
Additionally, if you are updating just for better webpage printing you may want to see the setting up your template for better printing support page instead.

Best Solution 1:
Depending on how many items were updated, it's best to re-do your website with the new download so you do not miss any updates. If this is not possible you can update your existing pages or just a few areas. See below.

Best Solution 2:
Download the updated template, create a new folder for the new model. Copy the contents from your old site between the "MAIN TABLE" or "CONTENT TABLE" notes. Do this for each HTML page on your site creating new HTML pages if needed. With an update it's best to use all new .js files and re-do the "menu.js" if you need to. Do not copy over any of your old files. Only the contents of your pages. If you made many changes to the CSS files, compare the old and new ones and edit where required.

Solution 3 advanced users:
In this case you will just be using some select code from the new model and copying this into your old website folder.

1. Backup your old site template folder first!!
2. Copy over the new .css file or compare the old and new CSS files. Most updates include some changes to the CSS code. (see notes below)
3. Copy over all .js files including the "menu.js".
4. Copy over all .swf files and the flash.txt.
5. Copy over all .fla files in your flash folder over.
6. Copy the code from the header areas from the top of each new HTML page into your old HTML page usually up till the "MAIN TABLE" or "CONTENT TABLE" notes. (You can compare old and new templates and in some cases skip this step)
7. Copy the code from the footer areas from the bottom of each new HTML page into your old HTML page usually after the "MAIN TABLE" or "CONTENT TABLE" notes. (You can compare old and new templates and in some cases skip this step)
8. Test all your pages. If there is a problem you should have a backup so you can start over.

Notes for solution 3:
In some cases you can skip copying over the CSS files if you have made many changes in this file. You will need to then check the code in the update against the old code to make sure you have not missed any code. The usual update in most CSS files is an area for printing. Another common update in Allwebco templates is in the "menu.js". If updating a "menu.js" also be sure to cross check old and new code in the CSS files.

Solution 4 - notes for advanced users:
In some cases you may only want to copy over the updated areas. With any select update always make a backup of the old site first and always compare the old and new CSS file code. Most updates to the "menu.js" include an update in the CSS file. CSS menu code is at the bottom of the CSS files on all newer models.

Test! Test! Test!
Always test in at least two browsers. Internet Explorer and either Firefox, Safari or Google Chrome.




Related Topics:
Check for template updates