Unzipping Template Package

After unzipping the template package you will find 3 folders: "documentation", "HTML". You can also see a zip archive called "############.zip" that you need to unzip.The sources package contains all source files for the template.

General Information

• Documentation – contains documentation on template editing and installation.
• HTML - contains the .html files of the template and supporting files like css,js etc...
  • css/ - contains main css files and supporting bottstraping css files
  • fonts/ - contains main js files and supporting jqueryfiles
  • images/ - contains all images used in demo.
  • js/ - contains main js files and supporting jqueryfiles.
  • inc/ - contains Php files for process the mailchimp subscription codes and contact form.

Editing template

Working with the template you need to edit the .html, .css, and .js files.

Editing HTML and CSS files

All editable HTML files are located in "package" folder of the template package (demo-construction.html, demo-education.html, demo-medical.html, etc.) Each index-#.html file represents a single template page.

To open .html file with Sublime Text 3 application or by notepad++ for good experience, you should right mouse click on the file and in the context menu select Open with > Sublime Text 3 or Open with > notepad++ . When the file is open, you can start editing it.

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 Sublime Text 3 application. Detailed tutorials on are available at our online help center.

During the send news letter process you can send by using Email Template files.

Custom Fonts

Some templates may contain the non-default fonts used in the design. By default, the internet browser can render only fonts that are installed to your operating system. In other words, if your webdemo design uses some custom fonts and these custom fonts are not installed on your webdemo visitor's computer, custom fonts won't be displayed. Default fonts will be rendered instead. That's why web developers should look for some alternative solutions. In our templates custom fonts are embedded using Google Web Fonts technology.

Google Web Fonts

You can learn more on using Google Web Fonts by checking the tutorial on how to work with Google web Fonts.

Can't load Google Fonts:

1. Open 'HTML\index-*.html' or 'HTML\css\style.css' files
2. Locate the line:
   

   //fonts.googleapis.com/css?family=[---your_web_font_name_here---]

Customization Tutorials

How to edit text

These templates are HTML based, so all content is stored and could be accessed though the .html files.

1. Open your template package and go to the demo folder.
2. There open index.html  file with your HTML editor.
3. You can use the search tool CTRL+F to find any text you need.
4. Edit text in HTML editor. Save the file and open it with your Browser to see the changes.

The other way is to use the browser developer tool to find the blocks you want to edit. You can learn more about the developer tools checking the tools description and tutorials.

How to edit images

Open the template folder, go to 'HTML/images' directory. You can upload your images with the same name and extension to replace the default ones.

The other way is to upload custom images with your titles and extensions. Then you’ll need to change the image file names in the html files.

1. Open .html file from the “demo” folder with your html editor.
2. Use search tool CTRL+F to find the images in the html file.
3. Replace the image title and extension.

How to activate contact form

1. Open the template folder.
2. Go the inc directory.
3. There open the 'function.php' file with your editor (Sublime Text 3, Notepad etc).
4. Using the Find and Replace tool (CTRL+F) search for the RECIPIENT_MAIL.

You should see the following line:

replace YOUR_API_KEY symbol with your mailchimp api key.

replace YOUR_LIST_ID symbol with your unique mailchimp list ID.
That's all, now the subscribe will be activated.

Uploading template

In order to make your demo "live", you need to upload all the content of "demo" folder from your local computer to your hosting server.

Please note: your webdemo root depends on the directory structure on your hosting server. If you upload the "demo" folder itself into your server, the root to your webdemo will be http://your_domain_name/demo. To avoid this and make the webdemo root http://your_domain_name/, please open the "demo" folder and upload the folder content.

Addendum

We hope this manual was useful for you and helped you to install, to edit the template and to resolve your issues.

W3C validation

Both HTML markup and CSS styles used in our templates are semantically correct and valid. However some W3C errors still can take place. Making code 100% W3C valid eliminates the usage of modern webdemo technologies as CSS3 features and HTML5 markup. Our goal is to deliver rich user experience with high quality templates and sometimes we have to break some rules.