--- title: "Converting an existing site design into a HTML skin" canonical_url: https://support.digitalphotogallery.com/articles/article/65fe9276-080c-11e6-8390-16474ff850f4 short_url: https://dpg.support/aupx category: "Guides > Teams > Using DPG for collaborative galleries > Gallery Set Up > Custom HTML Skin" locale: en updated_at: 2017-11-21T22:43:49Z source: Digital Photo Gallery Support --- # Converting an existing site design into a HTML skin ![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/9d8158dc-884e-11e7-891c-8ef06f2f9be6/948_support.jpg?generated=20170823230435) If you are running an event and you want to exactly match the style of your DPG site to an existing site design, you can clone the HTML of the main site to turn it into a skin which can be used with DPG. > 💡 **Tip:** Creating a custom skin is entirely optional, for most users the best path is to use our easily customisable templates. The HTML skin consists of a full page of your HTML code, with DPG inserts added to pull in the gallery and other required code from DPG into the areas that you want it to be displayed. Many people choose to write the HTML skin for the DPG site themselves, basing it on the code from the main site. In this tutorial however we'll show you a quick way of converting an existing design into a DPG skin. In this guide we'll be using: * [macOS](https://www.apple.com/uk/macos/) * [Homebrew](https://brew.sh/) * [Sublime Text](https://www.sublimetext.com/) * [Amazon S3](https://aws.amazon.com/s3/) * [Transmit](https://panic.com/transmit/) > 💡 **Tip:** If you don't have a developer on your team but would like a custom HTML skin we can provide this service at an additional cost. Contact support@digitalphotogallery.com for more details. ### Clone the HTML to your local disk Make sure that you have [Homebrew](https://brew.sh/) installed and then run the command to install wget: ``` brew install wget ``` ![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/8e31f748-883e-11e7-b38a-2e80af156eae/932_support.jpg?generated=20170823211352) Create a new folder, cd to it and use the following command to clone the assets from the website that you are integrating with: ``` wget -U firefox -p -k -H http://www.targetdomain.com/ ``` ### Upload assets to your own server or CDN ![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/5b12d95c-8840-11e7-b107-2e80af156eae/933_support.jpg?generated=20170823212010) Upload your cloned assets to somewhere accessible online, in this example I am using [Transmit](https://panic.com/transmit/) with [Amazon S3](https://aws.amazon.com/s3/). > 💡 **Tip:** If you have full control of the main site and you have predictable asset locations then you can link to those assets rather than cloning them. ### Re-link all assets ![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/0cecdf36-8843-11e7-b6b5-8ef06f2f9be6/935_support.jpg?generated=20170823213924) When you ran the wget command it will have downloaded the HTML of the page that you targeted. Locate that file on your local disk and in the code find and replace any linked assets with their new address. Test the local page periodically in a browser to check your progress. ![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/ec34ed24-8842-11e7-8e52-2e80af156eae/934_support.jpg?generated=20170823213838) Chrome development tools showing there are still some assets that are missing. Fix all of these kinds of errors before moving to the next step. ![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/126897d6-8846-11e7-bb5d-2e80af156eae/937_support.jpg?generated=20170823220101) While you are re-linking assets you may also want to remove any unused tracking code. ![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/ffd38102-8846-11e7-9377-8ef06f2f9be6/938_support.jpg?generated=20170823220739) Once there are no more errors check the domain that assets are coming from to make sure no assets are being served from an address you don't have control of. [Download: galleryexamplenodpgcode.zip](http://media.digitalphotogallery.com/hyqelgcvfopo/downloads/galleryexamplenodpgcode.zip) — Example file at this stage. ### Learn about DPG page layouts ![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/dbd8e748-b299-11e6-af80-56388aee727f/284_support.jpg?generated=20161124230145) View [this article](https://support.digitalphotogallery.com/articles/article/07414412-b299-11e6-89d4-be279144b405) to learn how to get the current DPG insert code and find out how to apply your HTML code to your DPG gallery. ### Convert the downloaded HTML into a skin ![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/6d209b5a-8847-11e7-9f0e-2e80af156eae/1586_support.jpg?generated=20170823221702) Now that you have a perfect copy of the original page you can start editing it to add in the DPG inserts. ![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/d3e312f2-884a-11e7-96b9-2e80af156eae/944_support.jpg?generated=20170823223506) Add in the DPG inserts for header. ![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/98ca44f6-884a-11e7-86f6-8ef06f2f9be6/942_support.jpg?generated=20170823223329) Remove the content HTML and replace with the DPG content insert. ![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/b6c45848-884a-11e7-a58a-8ef06f2f9be6/943_support.jpg?generated=20170823223418) Add inserts to the end of the page. ![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/b4f5b7ea-884b-11e7-b9d7-2e80af156eae/946_support.jpg?generated=20170823224119) Create your page layout in DPG. ![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/0be209a6-884b-11e7-aabd-8ef06f2f9be6/945_support.jpg?generated=20170823223622) Test your layout on a single page. Once you know that it works correctly, apply it to all pages. ![](https://cache.media.digitalphotogallery.com/hyqelgcvfopo/images/5726386e-884c-11e7-92c6-8ef06f2f9be6/947_support.jpg?generated=20170823224906) You now have a full working DPG site which matches your main website. Finally, add any links from your main site to point to the new photo gallery. [Download: galleryexamplewithdpgcode.zip](http://media.digitalphotogallery.com/hyqelgcvfopo/downloads/galleryexamplewithdpgcode.zip) — Finished code from this example.