How to Change or Add Custom HTML

Overview

The mobile website editor uses a custom markup language called DMLE. This markup code communicates changes that you make to the page and is required for anyone wanting to edit the HTML of the mobile site directly. When using the editor, you will notice that these attributes are automatically added to the HTML markup, but you can add and edit tags manually by following the guide below.

How to use it

Depending on what you are trying to do, you will insert the corresponding attribute directly into the HTML element you are wanting to edit. For example, if you are wanting to insert a new paragraph element into the page, you will add the following code directly into the HTML:

<p dmle_insert="true">This is an example paragraph</p>

Notice in the code above, that we added the dmle_insert="true" attribute. This tells the editor that this is newly inserted content that differs from the what is already on the page.  Let me give another example.

Say we have some content that was pulled in directly from the desktop website after conversion and we want to edit it directly in the HTML. The original code that was pulled in looks like:

<p id="99" id="99">From the beginning, their philosophy has been the same; simply to seek out the best possible ingredients and make the highest quality sandwiches.</p>

In order to make changes inside of the HTML, we have to add our dmle_replace attribute to look like this:

p id="99" id="99" dmle_replace="true"replace_mode="node_subtree">From the beginning, their philosophy has been the same; simply to seek out the best possible ingredients and make the highest quality sandwiches.</p>

(Notice that I also added a replace_mode="node_subtree", this tells the editor to notice all changes we've made inside of the tags. If we did not add the replace & replace_node attributes, the editor would not recognize the changes and simply throw them out.)

DMLE Attributes

Operation How to Use It
Remove or Delete Element Add attribute dmle_remove="true"
Move Element Move element to required position in HTML then add attributedmle_move="true"
Change element attributes / values Change the attributes of the element then adddmle_replace="true"
Change content of element First change content, then add the following two attributes: dmle_replace="true" replace_mode="node_subtree" (the replace_mode specifically indicates the content in the HTML element)
Insert a new element Insert the new HTML element and any content and add thedmle_insert="true" attribute
Add or change CSS class  The first thing is to add or edit your class value, such as class="test example" then add dmle_class="true" to the element. Think of this like replace, but only for class changes.
Enclose element(s) Add your enclosing element around other elements, then adddmle_enclose="true" to the enclosing element you added.

Troubleshooting and FAQ's

I'm making edits to the code and it's not saving.

You can only edit the HTML code by using the DMLE attributes above - For example if you edit something in the HTML without addingdmle_replace="true" to the element (such as a <p> tag), your HTML edits won't be saved.

I want to undo the edits I made to the HTML

In order to undo an edit made to the HTML, you can simply go back into the HTML and revert the changes manually. A better solution though would be to restore to a backup. It's always a good idea to make a backup before editing the HTML of your site so that way you always have a version to restore to.