Creating my Own HTML5 Templates

Pre requirements

  • To create HTML5 templates, you will need a text editor to manage better the codes.
  • We suggest SublimeText or Notepad ++ programs. Both are open source text editors and allow installation on Windows or Linux computers.
  • The following is the installation link for these programs::

Download SublimeText

Download Notepad ++

To install Sublime on Linux, run the following commands in terminal:

   sudo add-apt-repository ppa:webupd8team/sublime-text-2   sudo apt-get update   sudo apt-get install sublime-text
  • Basic knowledge of HTML and CSS is required.

 

 

1. Create the HTML5 file


The file to create must be saved with the name index.html

  • The file should initially contain the following information:
<!DOCTYPE html> <html>
</html>

 

As shown in the following image

Inside the tags.

<html>  </html>

La sigadd the following tags.

<head> e </head>

Inside these tags (<head>here!</head>) should be the template style information, which is written in CSS language. This information must be separate for each element of the template. For example: definition of background image, text color and font, element position, etc. For more information on CSS, we suggest you visit this page: CSS Documentation

 

  • Inside the tag add the following:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <style type="text/css">     html, body {     width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden; }
Note: This information defines, among other things, that the template will occupy the entire width and the height height. All measurements to be entered in the HTML5 file must be in% (percentage) format. This way, the template will automatically resize without quality loss when displayed on monitors with different resolutions.

So far our index.html file should look like this:

 

  • Inside the style labels you must insert the class elements, for example:
<style>

.nameofthelement { }

</style>

And within the parentheses of the classes must be the CSS information of the element.

For example: Let's insert the font of the logo in the lower right corner of the template. Then we will call this logo element. And the CSS that contains the position that should always be absolute and the location of the element in relation to the width and height, the top of the left template, which will look like this::

.logo {       position: absolute;       left: 0%;       top: 76.625%;       width: 20%;       height: 23.375%;       }
Note: To see how the elements are positioned on the screen, open the index.html file in the browser and test until you find the percentage of the correct position. Example with .logo element {};

Repeat this process for all items..

 

  • The next information to enter is the body, symbolized by the labels.
<body> and </body>

Within these labels must be the classes for each element of the template. For example: the .logo {} element inserted previously must have its class created specifying the location where the logo will be inserted, for example:

<img class="logo" src="terrateste/logo.jpg" />

Repeat this process for all items..

 

  • Finally, you must enter the code that recognizes the news sources, symbolized by the labels:
 <script> e </script>

 

  • Within these labels, you must enter the following information:
       <script type="text/javascript">       function parseQueryString (queryString) {         if(typeof(queryString) != 'string'){           return queryString;         }         if(queryString[0] == '?'){           queryString = queryString.substring(1, queryString.length);         }         var params = {}, queries, temp, i, l;         queries = queryString.split('&');         for ( i = 0, l = queries.length; i < l; i++ ) {           temp = queries[i].split('=');           params[temp[0]] = temp[1];         }         return params;       }       var options = parseQueryString(decodeURIComponent(window.location.search));       if (options.imgVar) {         document.getElementById('imgVar').src=options.imgVar;       }       if (options.txtVar) {         document.getElementById('texto').innerHTML = options.txtVar;       }      </script>

Example of what the index.html file will look like after inserting all the elements::

 

Now an example of the index.html file opened by the browser::

 

  • If you want to test the template with image and text simulating a news, just add in the navigation bar after the address:
file:///C:/Users/Samsung/Desktop/index.html

The following line:

?txtVar=texto%20para%20teste&imgVar=imagem.jpg

The full address will look like this::

file:///home/usuarios/renata/Área de Trabalho/index.html?txtVar=texto%20para%20teste&imgVar=/home/usuarios/renata/Área de Trabalho/imagem.jpg

And the final template will look like this::

To insert the HTML5 template into 4YouSee Manager, you need to create a compressed .zip file with the newly created index.html file and the folder containing the necessary items to display the template as: logo image files, .js files etc.

You can download the attached example file.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.