Custom HTML Skin - Converting an existing site design into a HTML skin
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.
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:
Clone the HTML to your local disk
Make sure that you have Homebrew installed and then run the command to install wget:
brew install wget
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
Re-link all assets
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.
Learn about DPG page layouts
View this article 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
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.