gomymobi: Knowledge Base

How to create / convert website theme

- Basically, a website theme is just a standard HTML template, but it is embeded a small JavaScript (HTML Builder) developed by us, to make all HTML elements editable. Therefore, you may convert any HTML template to a website.

- In this tutorial, we are going to show you the very simple steps to create a website theme with our HTML Builder.

- Remember, test your theme pages by loading in browsers with parameter: ?live_edit=true.

Watch quick video to create a website theme

1. Load HTML Builder

- In bottom of each HTML file, you must add the code below to load HTML Builder.

<script id="GMM-Editable-HTML-Builder" type="text/javascript" src="/app/GMM-Editable-HTML-Builder/core.init.min.js"></script>

id="GMM-Editable-HTML-Builder" is required and can not be changed

- If you would like to change overlay width of clonable element, add attribute data-gmm-clonable-width for this script tag. Acceptable value is in pixel or percentage.

2. Add script to track website traffic

- In order to track website traffic, in each web page, you must embed the code below into head tag.

<script type="text/javascript" src="//www.gomymobi.com/app/tracking/"></script>

3. Set root container for whole page

- Root container is required by HTML Builder, to determine structures of all elements in a page. By default, body is set as root container automatically.

- Obviously, you may also change this root container to other inner tag, by adding class="GMM_editable_sortable_container" to the desirable element.

CAUTION each page has 1 root container only

4. Make drag-n-drop sortable elements

- After embeded root container for the page, in order to sort the elements by using drag-n-drop feature, you will need to add class="GMM_editable_sortable" into these desirable elements.

- In order to set position of editable toolbar, add an attribute data-gmm-toolbar-position to the element. Acceptable values: top, botom

- Remember: GMM_editable_sortable is a child class of "GMM_editable_sortable_container.

5. Inner drag-n-drop sortable elements

- In each child GMM_editable_sortable, you may still convert their childrens to drag-n-drop sortable elements, by adding class="GMM_sortable_custom" with an attribute data-gmm-sortable-handle=".GMM_sortable_handler" to sortable parent & adding class="GMM_sortable_handler" to each child of custom sortable parent.

- By these classes, you may have unlimited drag-n-drop sortable elements.

6. Make clonable elements

- In order to give some element the clonable feature, add class="GMM_clonable_object" to it.

- Remember: set value for attribute data-gmm-clonable-width if you need to change overlay width of cloning layer.

7. Make custome editable elements

- By default, HTML Builder shall automatically detect and convert all common HTML tags to editable elements. They are: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'iframe', 'a', 'button', 'img', 'i.fa', 'span.fa', 'p', 'span', 'em', 'address', 'video'.

- But you may easily convert any custom HTML tags to editable elements, by adding their name to $theme_settings['Editable_Tags'] in theme-settings.php file.

End

- Yes, that is all information you will need to understand to convert a HTML template to website theme, it is so super simple and easy!

- Remember, test your theme pages by loading in browsers with parameter: ?live_edit=true.

- Please follow our example to master these details..



don't hesitate to contact us if your thing is outside of this section
by using contact button above or send directly to gomymobi@gmail.com with subject: [contactgmm]
if could not receive our reply within 24 hours, please resend ticket again