{"id":9678,"date":"2012-09-12T03:54:40","date_gmt":"2012-09-12T07:54:40","guid":{"rendered":"http:\/\/info.template-help.com\/?p=9678"},"modified":"2020-01-31T11:14:06","modified_gmt":"2020-01-31T16:14:06","slug":"full-site-quick-start-guide","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/full-site-quick-start-guide.html","title":{"rendered":"Full Site. Quick Start Guide"},"content":{"rendered":"<div class=\"section\">\r\n<dl class=\"accordion\">\r\n\r\n<dt><h3>Table of Contents<\/h3><\/dt>\r\n\r\n<dd>\r\n\r\n<ol>\r\n              <li>Unzipping Template Package<\/li>\r\n              <li>General Information and Template Structure<\/li>\r\n              <li>Editing Static version of the template\r\n                  <ul class=\"list\">\r\n                    <li>Static version software requirements<\/li>\r\n                    <li>Editing HTML and CSS files<\/li>\r\n                    <li>Editing PSD files<\/li>\r\n                    <li>Custom Fonts<\/li>\r\n                 <\/ul>\r\n              <\/li>\r\n\t\t\t  <li>Editing Animated version of the template\r\n                  <ul class=\"list\">\r\n                    <li>Flash version software requirements<\/li>\r\n                    <li>Installing custom fonts<\/li>\r\n                    <li>Editing FLA files<\/li>\r\n                 <\/ul>\r\n\t\t\t  <\/li>\r\n\t\t\t  <li>Uploading template\r\n            <\/li><\/ol>\r\n\r\n<\/dd>\r\n\r\n<dt><h3>Unzipping Template Package<\/h3><\/dt>\r\n\r\n<dd>\r\n\r\n<p>After unzipping the template package you will find 3 folders: &quot;<strong>screenshots<\/strong>&quot;, &quot;<strong>site<\/strong>&quot;, &quot;<strong>site_flash<\/strong>&quot; and another zip archive called &quot;<strong>sources_############.zip<\/strong>&quot; that you need to unzip. <\/p>\r\n    \r\n\t<p>The sources package contains all source files for the template. The package is password protected and can be extracted only with <a href=\"\/help\/unzipping-your-template.html\" target=\"_blank\">WinZip (Windows OS)<\/a> and <a href=\"\/help\/how-unzip-template-mac.html\" target=\"_blank\">StuffitExpander (MAC OS)<\/a>.  <\/p>\r\n\t<p>You can download both application for free using the free trial options:<\/p>\r\n\t<ul class=\"list\">\r\n\t  <li><a href=\"http:\/\/www.winzip.com\/downauto.cgi?o=1&#038;file=http:\/\/download.winzip.com\/winzip160.exe&#038;email=&#038;er=&#038;os=win\" target=\"_blank\">WinZip<\/a><\/li>\r\n\t  <li><a href=\"http:\/\/www.stuffit.com\/mac-stuffit-download.html\" target=\"_blank\">StuffitExpander<\/a><\/li>\r\n\t  <\/ul>\r\n<p class=\"attention\">While unzipping &#8220;sources_############.zip&#8221; archive you will be prompted to enter a password, which you can find at your Product Download Page (open the link in the email you received from our company).<\/p>\r\n    \r\n    <p>As soon as you are done with the unzipping the template you should now have 4 folders in total: &quot;<strong>screenshots<\/strong>&quot;, &quot;<strong>site<\/strong>&quot;, &quot;<strong>site_flash<\/strong>&quot;, &quot;<strong>sources<\/strong>&quot;<\/p>\r\n\r\n<\/dd>\r\n\r\n<dt><h3>General Information and Template Structure<\/h3><\/dt>\r\n\r\n<dd>\r\n\r\n<p>Full Site template includes 2 versions of the same design: one with a Flash (animated) header, and the other one \u2013 with HTML (static) header. Refer to the corresponding section of the instructions below depending on which version of the template you would like to use:<\/p>\r\n    \r\n    <ol>\r\n    \t<li><strong>HTML version<\/strong> (non-animated header)<\/li>\r\n        <li><strong>Flash version<\/strong> (animated header)<\/li>\r\n    <\/ol>\r\n    \r\n    <p>The following scheme displays the Full Site template files structure. <\/p>\r\n \r\n<ul class=\"files-structure\"> \r\n\t<li class=\"lev-1\">&#8220;<strong>screenshots<\/strong>&#8221; \u2013 contains screenshots of the template.\r\n\t<li class=\"lev-1\">&#8220;<strong>site<\/strong>&#8221; \u2013 contains the .HTML files and style.css file (a non-animated version of the template)<\/li>\r\n\t<li class=\"lev-2\">&#8211; &#8220;<strong>images<\/strong>&#8221; \u2013 contains all the images used in .HTML files;<\/li>\r\n\t<li class=\"lev-1\">&#8220;<strong>site_flash<\/strong>&#8221; \u2013 contains the .HTML files and style.css file (an animated version of the template).<\/li>\r\n\t<li class=\"lev-2\">&#8211; &#8220;<strong>flash<\/strong>&#8221; \u2013 contains .SWF flash movie(s) used in .HTML files.<\/li>\r\n\t<li class=\"lev-2\">&#8211; &#8220;<strong>images<\/strong>&#8221; \u2013 contains all the images used in .HTML files.<\/li>\r\n\t<li class=\"lev-1\">&#8220;<strong>sources<\/strong>&#8221; \u2013 contains source files<\/li>\r\n\t<li class=\"lev-2\">&#8211; &#8220;<strong>flash<\/strong>&#8221; \u2013 contains .FLA source file(s).<\/li>\r\n\t<li class=\"lev-2\">&#8211; &#8220;<strong>fonts<\/strong>&#8221; \u2013 contains all the fonts used in .PSD and .FLA files \u2013 True Type (.TTF), Adobe fonts (PFB\\PFM), or both.<\/li>\r\n\t<li class=\"lev-2\">&#8211; &#8220;<strong>psd<\/strong>&#8221; \u2013 contains Adobe Photoshop .PSD files.<\/li>\r\n<\/ul>  \r\n    \r\n<\/dd>\r\n\r\n\r\n<dt><h3>Editing HTML (Static) version of the template<\/dt>\r\n\r\n<dd>\r\n\r\n<h3 class=\"custom\">Static version software requirements<\/h3>\r\n    <p><strong>Adobe Dreamweaver<\/strong> (<a href=\"http:\/\/www.adobe.com\/products\/dreamweaver\/\" target=\"_blank\">download free trial<\/a>). Used to edit the .HTML and .CSS files<br\/>\r\n    <strong>Adobe Photoshop CS<\/strong> or later (<a href=\"http:\/\/www.adobe.com\/products\/photoshop.html\" target=\"_blank\">download free trial<\/a>). Used to edit .PSD files <\/p>\r\n    \r\n    <p>Working with the static version of the template you need to edit the <strong>.html<\/strong> files, <strong>.css<\/strong> files and <strong>.psd<\/strong> files. <\/p>\r\n    \r\n    \r\n    <h3 class=\"custom\">Editing HTML and CSS files<\/h3>\r\n    <p>All editable HTML files are located in &#8220;<strong>site<\/strong>&#8221; folder of the template package (index.html, index-1.html,index-2.html, etc.) Each index-#.html file represents a single template page. <\/p>\r\n    <p>To open .html file with Adobe Dreamweaver application, you should right mouse click on the file, and in the context menu select <strong>Open with -> Adobe Dreamweaver<\/strong>. When the file is opened you can start editing it.<\/p>\r\n    <p>Adobe Dreamweaver is a recommended application as it allows you to edit the HTML files content in visual mode. You don&#8217;t even need to work with the HTML code itself. Open any .html file and click the <strong>Design <\/strong> button at the top of the screen to switch to visual mode. <\/p>\r\n    \r\n<a href=\"\/help\/wp-content\/uploads\/2011\/07\/dreamweaver-code.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2011\/07\/dreamweaver-code-300x196.jpg\" alt=\"\" title=\"dreamweaver-code\" width=\"300\" height=\"196\" class=\"alignnone size-medium wp-image-23876\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/dreamweaver-code-300x196.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/dreamweaver-code-150x98.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/dreamweaver-code-1024x671.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/dreamweaver-code.jpg 1097w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2011\/07\/dreamweaver-design.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2011\/07\/dreamweaver-design-300x196.jpg\" alt=\"\" title=\"dreamweaver-design\" width=\"300\" height=\"196\" class=\"alignnone size-medium wp-image-23877\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/dreamweaver-design-300x196.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/dreamweaver-design-150x98.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/dreamweaver-design-1024x671.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/dreamweaver-design.jpg 1097w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n    \r\n    <p>Feel free to check the detailed text and video tutorials on <a href=\"\/help\/general-tutorials\/work-with-html\/\" target=\"_blank\">how to edit HTML files with Adobe Dreamweaver<\/a><\/p>\r\n    <p>CSS files are used to change the template appearance like fonts (font-family, font-size, color etc), backgrounds, column width values etc. You can edit the css files with Adobe Dreamweaver application. Detailed tutorials on <a href=\"\/help\/general-tutorials\/work-with-css\/\" target=\"_blank\">how to work with the CSS files<\/a> are available at our online help center. <\/p>\r\n\r\n\r\n\t<h3 class=\"custom\">Editing PSD files<\/h3>\r\n    <p>PSD files are located in the &quot;<strong>sources\/psd<\/strong>&quot; folder in your template package. PSD are the source files of the template design. They are divided into layers so any part of the template design can be changed. <\/p>\r\n    <p>During the customization process you can refer to the PSD files in order to change the images used in the content pages or in the design. <\/p>\r\n    \r\n<a href=\"\/help\/wp-content\/uploads\/2011\/07\/photoshop-interface.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2011\/07\/photoshop-interface-300x187.jpg\" alt=\"\" title=\"photoshop-interface\" width=\"300\" height=\"187\" class=\"alignnone size-medium wp-image-23878\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/photoshop-interface-300x187.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/photoshop-interface-150x93.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/photoshop-interface-1024x639.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/photoshop-interface.jpg 1259w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n    \r\n    <p>You can learn more about <a href=\"\/help\/general-tutorials\/work-with-photoshop\/\" target=\"_blank\">working with photoshop checking the detailed tutorials<\/a><\/p>\r\n    \r\n    \r\n    <h3 class=\"custom\">Custom Fonts<\/h3>\r\n    <p>Some templates may contain the non-default fonts used in the design. Be default the internet browser can render only fonts that are installed to your operating system. In other words if your website design uses some custom fonts and these custom fonts are not installed on your website visitor&#8217;s computer, custom fonts won&#8217;t be displayed. Default fonts will be rendered instead. That&#8217;s why web developers should look for some alternative solutions. In our templates custom fonts can be embedded using two techniques: <strong>Cufon<\/strong> Java Script fonts and <strong>Google Web Fonts<\/strong>. <\/p>\r\n    <h4>Cufon Java Script fonts<\/h4>\r\n    <p>Cufon generated fonts are created using Java Script. By default the cufon fonts support only Latin characters. If you want to use custom fonts with your language characters please check the tutorial on <a href=\"\/help\/how-to-work-with-cufon-generated-fonts-advanced.html\" target=\"_blank\">how to work with cufon generated fonts<\/a>. <\/p>\r\n    <h4>Google Web Fonts<\/h4>\r\n<p>Custom fonts can also be embedded into the HTML page using the <strong>Google Web Fonts<\/strong> service. You can learn more checking the tutorial on <a href=\"\/help\/how-to-use-the-google-web-fonts-api.html\">how to work with Google web Fonts<\/a>. <\/p>\r\n<p class=\"attention\">These methods can only be used with static HTML content and can&#8217;t be applied to the Flash animation. <\/p>\r\n\r\n<\/dd>\r\n\r\n<dt><h3>Editing Animated (Flash) version of the template<\/h3><\/dt>\r\n\r\n<dd>\r\n\r\n\t<h3 class=\"custom\">Flash version software requirements<\/h3>\r\n    <p><strong>Adobe Dreamweaver<\/strong> (<a href=\"http:\/\/www.adobe.com\/products\/dreamweaver\/\" target=\"_blank\">download free trial<\/a>). Used to edit the .HTML and .CSS files<br\/>\r\n    <strong>Adobe Photoshop CS<\/strong> or later (<a href=\"http:\/\/www.adobe.com\/products\/photoshop.html\" target=\"_blank\">download free trial<\/a>). Used to edit .PSD files <br\/>\r\n    <strong>Adobe Flash <\/strong>(<a href=\"http:\/\/www.adobe.com\/products\/flash\/\" target=\"_blank\">download free trial<\/a>). Used to edit .FLA files<\/p>\r\n    \r\n    <p>Working with the Animated version of the template you&#8217;ll need to edit the <strong>.html<\/strong> files, <strong>.css<\/strong>, <strong>.fla<\/strong> and <strong>.psd<\/strong> files. <\/p>\r\n\r\n\t<p>The only difference between the animated and static versions of the template is the flash header in the animated version. All other customization steps (working with html, css and psd files) are the same. Please check the customization instructions from the <a href=\"#static\" target=\"_blank\">Editing Static version of the template<\/a> part of this manual. <\/p>\r\n     \r\n\t<h3 class=\"custom\">Installing custom fonts<\/h3>\r\n    <p>All custom (non-standard) fonts used in the animated part of the template should be installed into your system. This will allow you to edit the custom font text in the flash animation source files.<\/p>\r\n    <p>Custom fonts files can be stored in the &#8220;<strong>sources\/fonts<\/strong>&#8221; folder of your template package. In case you don&#8217;t have the &#8220;<strong>sources\/fonts<\/strong>&#8221; folder in your template package search for the <strong>fonts_info.txt<\/strong> file in the template package root. This file contains links to websites where the custom fonts used in flash animation can be downloaded. <\/p>     \r\n    <p>When you are done with the fonts download you need to install them into your operating system. Please check the detailed tutorial on<a href=\"\/help\/general-tutorials\/work-with-fonts\/\"> how to install fonts<\/a>.<\/p>\r\n    <p class=\"info-box\">Custom fonts in flash animation are saved in the final SWF movie so they will render fine on any computer regardless of the installed fonts availability<\/p>\r\n    \r\n    \r\n    <h3 class=\"custom\">Editing FLA files<\/h3>\r\n    <p>As soon as you are done with the fonts installation you can proceed with the flash document customization. Feel free to check the detailed text and video tutorials on <a href=\"\/help\/general-tutorials\/work-with-flash\/\" target=\"_blank\">how to work with flash files<\/a><\/p>\r\n\r\n<a href=\"\/help\/wp-content\/uploads\/2011\/07\/flash-interface.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2011\/07\/flash-interface-300x185.jpg\" alt=\"\" title=\"flash-interface\" width=\"300\" height=\"185\" class=\"alignnone size-medium wp-image-23880\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/flash-interface-300x185.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/flash-interface-150x92.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/flash-interface-1024x633.jpg 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2011\/07\/flash-interface.jpg 1265w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\r\n<\/dd>\r\n\r\n<dt><h3>Uploading template<\/h3><\/dt>\r\n\r\n<dd>\r\n\r\n  <p>In order to make your site &#8220;live&#8221;, you need to upload specific template files from your local computer to your hosting server.<\/p>\r\n    <p>Depending on the version of the template you selected (Flash or HTML) you should upload content of the corresponding folder<\/p>\r\n    \r\n    <ul class=\"list\">\r\n    \t<li>If you customized HTML (static) version of the template upload all the content of &#8220;<strong>site<\/strong>&#8221; folder<\/li>\r\n        <li>If you customized Flash (animated) version of the template upload all the content of &#8220;<strong>site_flash<\/strong>&#8221; folder<\/li>\r\n    <\/ul>\r\n    <p>Please note: your website root depends on the directory structure on your hosting server. If you upload the &quot;<strong>site<\/strong>&quot; or &quot;<strong>site_flash<\/strong>&quot; folder into your server the root to your website will be <strong>http:\/\/your_domain_name\/site<\/strong> or <strong>http:\/\/your_domain_name\/site_flash<\/strong>. To avoid this and make the website root <strong>http:\/\/your_domain_name\/<\/strong> please open the &quot;<strong>site<\/strong>&quot; or &quot;<strong>site_flash<\/strong>&quot; folder and upload the folder content. <\/p>\r\n<p>This <a href=\"\/help\/how-upload-files-server-2.html\" target=\"_blank\">video tutorial will show you how you can upload files<\/a> to your host using free FTP software FileZilla (you may use any other software you like, or upload directly via Hosting Cpanel)<\/p>\r\n    \r\n    <p class=\"warning\">Please do not upload the sources directory or any of the template source files to the hosting server. <\/p>\r\n\r\n<\/dd>\r\n\r\n<dt><h3>Conclusion<\/h3><\/dt>\r\n\r\n<dd>\r\n\r\n<p>We hope this manual was useful for you and helped you to install, edit the template and to resolve your issues.<\/p>\r\n\r\n<p>More instructions are available from the following links:<\/p>\r\n\r\n<ul class=\"list\">\r\n\t<li><a href=\"\/help\/developer-tools.html\">Developer Tools<\/a><\/li>\r\n\t<li><a href=\"\/help\/general-tutorials\/hosting-faq\/\">Hosting FAQ<\/a><\/li>\r\n\t<li><a href=\"\/help\/general-tutorials\/work-with-css\/\">Working with CSS<\/a><\/li>\r\n\t<li><a href=\"\/help\/general-tutorials\/work-with-photoshop\/\">Working with Photoshop<\/a><\/li>\r\n\t<li><a href=\"\/help\/general-tutorials\/work-with-html\/\">Working with HTML<\/a><\/li>\r\n\t<li><a href=\"\/help\/general-tutorials\/work-with-files\/\">Working with Files<\/a><\/li>\r\n\t<li><a href=\"\/help\/general-tutorials\/work-with-flash\/\">Working with Flash<\/a><\/li>\r\n\t<li><a href=\"\/help\/general-tutorials\/work-with-fonts\/\">Working with fonts<\/a><\/li>\r\n\t<li><a href=\"\/help\/general-tutorials\/work-with-xml-flash\/\">Working with XML Flash<\/a><\/li>\r\n<\/ul>\r\n\r\n<\/dd>\r\n\r\n<\/dl>\r\n<\/div>","protected":false},"excerpt":{"rendered":"<p>This guide will help you pass through the Full Site template editing,uploading and installation procedures.<\/p>\n","protected":false},"author":7,"featured_media":23906,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[741],"tags":[1021,1020,1147,1022,1349],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/9678"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=9678"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/9678\/revisions"}],"predecessor-version":[{"id":86154,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/9678\/revisions\/86154"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/23906"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=9678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=9678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=9678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}