Re-Skinning Your CMS Website

DMXReady has developed this Skinning Tutorial to show you how to wrap CMS Suite with Professional Bootstrap themes from Wrapbootstrap. It does require getting into the html code of the web page-since every skin designer does things slightly differently, there is no way to fully automate the process. But with the step-by-step instructions below, you should have no problems doing it yourself - and you'll find that the results are well worth the effort!

Step 1: Download & Install Your Theme/Template

Now that you have found a Theme/Template you like, follow the instructions below.

1. Download your Theme/Template.
2. UnZip, extract, or otherwise move these files to the folder "/cmsv3/skins/ " folder on your hard drive. For example, if you downloaded a template called "mytheme" the folder would be: c:\My Documents\My Website\cmsv3\skins\mytheme
   

Step 2: Convert Your Theme/Template Into A Skin

These are the general steps to convert your Theme/Template into a skin. Please note that every Theme/Template is different, so adjust these instructions accordingly.

1. Locate the index.html file that came with your template. For example: c:\My Documents\My Website\cmsv3\skins\mytheme\index.html
2. *Create a new file called "cms-mytheme.asp" inside the folder /cmsv3/skins/mytheme/ (*Make sure you use the prefix "cms-" when naming your skin)
3. Create a copy of the index.html and rename "cms-mytheme.asp"(*Make sure you use the prefix "cms-" when naming your skin)
4. Save and upload your changes

Step 3: Re-Build Your Skin Using the CMS Include File Objects

Your CMS website uses Include File Objects to dynamically display database content. Simply copy and paste the include file object snippet into your template. You can place things like your header, your navigation bar, and your footer wherever you want on your page.

1. Open your newly created master template file "/cmsv3/skins/cms-mytheme.asp" in code view.
2. Familiarize yourself with the template layout and CSS architecture
3. Copy and paste the following line at the very top of the file.
   
   <!--#include file="plugins/cms/templates/inc_dmxready_engine.asp" -->
   
   
4. Continue to locate the dummy/placeholder content inside the code and replace with a dynamic content block (see chart below).
   
5. Replace the contents between the specific <div> container (i.e. header, search, content, navigation, footer) with the appropriate include file object snippet.
6. Save, upload the entire skins folder to your web server using your FTP software.

Step 4: Fine Tune

1. Preview your newly skinned CMS website by pointing your web browser to: http://www.yourdomain.com/cmsv3/cms-mytheme.asp
2. Preview the original index.html template by pointing your web browser to: http://www.yourdomain.com/cmsv3/skins/mytheme/index.html
3. Open both files in code view and compare the 2 templates for differences in the css markup.
4. Add any missing CSS markup to the code block templates or style page your content using built-in WYSIWYG editor using the original index.html file as your guide.

Note: To incorporate styles/features from your template you will need to add your html markup directly to your CMS page content using the WYSWYG editor.

Step 5: Publish Your New Skin

To make your newly skinned master template your website home page:

1. Place a file called index.asp at the root of your domain (same location as your existing home page)
2. Open the file and remove all code
3. Add the following code block at the top of the page:
   
   <% Server.Execute("/cmsv3/cms-mytheme.asp") %>
   
   
4. Save and upload to your server
5. That's It! .... your newly skinned CMS website will automatically display when browsing to your domain www.yourdomain.com
   
   

Anatomy of Master Template

Data Objects & Include File Templates