• (folder) PageTemplateSample - The main folder should also be the name of the Template Set
  • (folder) html
    • Contains the HTML files for the page types within the template set.  Each file represents one page type.
  • (folder) images
    • Contains any images the page types might use.
  • (folder) Previews
    • Contains the preview images and thumbnails for the page types.  This helps the customer determine the difference between the page types, when adding pages.  Also helps people see different themes in the Main TalkSpot system, but would rarely apply in the custom sense.
  • (folder) themes
    • Contains the CSS files used for page formatting.  Technically, this is optional.  However, it is best if almost all formatting go into the CSS.  Of special note is the CSS for the menu blob.  Without the CSS for the menu blob within the themes folder, the menu blob will not work, requiring all site navigation to be built into the HTML and/or added via links and images through the text blob.  The CSS should be used for almost everything but the most basic HTML.  As a designer, use your discretion.
  • (file) PageTemplateSet.xml
    • This is the file containing all the important names and markers for the system to interact with the template sets.  We'll go deeper into this, at a later point in this website.

It is assumed that you should be aware of the function and properties of everything listed above, with the exception of the XML file and a few requirements the system may have.

With this particular configuration ANYTHING can be created that can be built into a standard HTML based website, including flash, animated and transparent images, JavaScript, etc.

The idea, however, is to allow great flexibility and variety editable content areas, through the addition of well thought out docking zones.

1. Open the PageTemplateSet.xml and find every instance of the term or string 'PageTemplateSample' and replace it with 'CustomRicardo001'.
   1. Find and Replace is a good way to handle this, for those that have the option within their editors.
2. Save the XML file.
3. Then, rename your HTML file names accordingly.
   1. PageTemplateSample_Home.htm to CustomRicardo001_Home.htm
   2. PageTemplateSample_Universal.htm to CustomRicardo001_Universal.htm
4. Open the CustomRicardo001_Home.htm file and and do a find (Ctrl-F) 'ppp' and replace 'Whatever you would like.  Your name, perhaps.  Some text, unique to you.'. This is computer geek talk for saying, find the text 'ppp' and replace it with your name, a favorite saying, a favorite song, or anything that isn't 'ppp'.  This step is purely optional and only intended to show you how to modify the HTML and to see where the changes take place.
   1. Also some notes about the HTML files:
      1. At the top of all the HTML files is a line reading, '<base href="http://localhost/aspx/blob2/pagetemplates/General01/html/">'.  Replace 'General01' with 'CustomRicardo001'.
      2. Just beneath the <base> tag, add the following line, '<link href="../themes/RedGradient.css" rel="stylesheet" type="text/css" />'
      3. Now, remove the entire <base> tag and paste it into notepad, or some other place.  You'll want it back in the file in a moment.
      4. Save the HTML file.
      5. Open the HTML file in a browser window.  You can drag and drop the file into the browser and it should display.  You will see a burgundy colored website with a variety of code-like things that indicate the location of the docking zones.  This is the perfect state for modiying the file and tweaking the HTML and/or the CSS.  The file will not display with the <base> tag and is why this was removed.
      6. Now, replace the <base> tag in the file.
      7. Remove the <link> tag.  The file will not work on TalkSpot's system WITH the <link> tag or WITHOUT the <base> tag.  This is why you're replacing the <base> tag and removing the <link> tag.  You're getting ready to put the file on the system.
5. Save the HTML file.
6. For clarification purposes, create 4 very simple images.  This is only for your benefit, but it's important to do.
   1. Home_RedGradient.jpg - A 100 x 100 image, containing the color red and text with your name.
   2. Home_RedGradient_lg.jpg - A 480 x 480 image, containing the color red and text with your name.
   3. Home_YellowGradient.jpg - A 100 x 100 image, containing the color yellow and text with your name.
   4. Home_YellowGradient_lg.jpg - A 100 x 100 image, containing the color yellow and text with your name.
7. Copy these new images over the 4 exactly named files in the "Preview" folder.
8. Start at the top-most level and "Zip" the folder and it's contents into a file called "unzipCustomRicardo001.zip".  The file MUST be a zip file and it must have the word, all lower case, "unzip" added to the front of the filename. 
   1. So: unzip+TemplateSetName+.zip
9. Now, go to the website you built in step 1 and log in.  You should've received an email explaining how to log in.  With this method, log into your website as the administrator.
10. Once you're logged in, wave your mouse over the toolkit in the top-right corner of the screen.
11. In the toolkit (top-right), look for the file and document manager.  From there, choose "Upload All Files".
12. On the right, in the "Create New Directory" box, you MUST type the directory name "PageTemplates" (with an uppercase P and an uppercase T.  Press the green check mark.
13. Click the Browse ... button on the top-left. 
14. Navigate to your zip file and select it.
15. Click the "Upload" button, near the bottom-left corner of the box.
16. Click "Done".
17. Go in the toolkit to the main file manager (TOOL KIT > File and Document Manager > Manage Files (Move, Rename, Delete).  You will know you're there, when the top of the page says, "Manage your files and folders (Upload, Rename, Move, Delete)"
18. Look at the URL in the location bar and notice that it says "filemanagerrename", towards the end.  Replace this word with "settolocalcustomsite" and press Enter.  
19. Now, select the name of your Template Set and press "Submit.

That's it!

From here, you have a functional working TalkSpot site with 2 themes, 2 page types and 2 CSS menu display options.  As you change your HTML, CSS or anything else and upload into your folder, your site will change.  This way, you can modify this site to anything you like.  As you familiarize yourself with the system and its requirements, you'll be able to build full template sets locally and upload all at once.  Then, build the site!  It's also strongly encouraged to create more preview images for customers and other designers, so they do not pick your template sets to work with.

Important Note: Your template set will not work and will not appear within TalkSpot's tools until it has reached all the requirements of a template set.  So, pay close attention and make sure your XML is properly formatted and that your HTML and CSS matches and is correct (across multiple browsers). 

If this seems a bit clunky and confusing, it is.  We agree with you.  However, it's assumed that you're technical enough to be able to navigate around these clunky backdoors.  This saves TalkSpot development time and makes these tools harder to find for the customers.  It's highly unlikely a customer could ever figure these things out, without this set of specific intructions.