You can use the Template Editor to change any CSS styling or HTML semantics for the Registration Form, The button on the top right allows switching between the Edit mode and the Preview Mode. After editing the CSS or the HTML semantics on the Edit mode, You can switch back to the Preview mode to preview your custom changes.
You can upload your image assets to stackla through the Custom Assets button, Once your image has been uploaded, copy the image url and embed it to your registration form
If you want to revert back to the original setting, you can click the Revert Draft button. please be aware this will overwrite all your changes.
HTML Structures
Below outlines the HTML Structure used in the Registration Form
<!-- Mustache Template --><scripttype="text/html"class="claim-template"> <div> <h1>Registration Form Title</h1> <form><!-- Tiles container --> <divclass="tiles"><!-- One Tile --> <divclass="tile"><!-- The Tile Network --> <divclass=""><!-- image --> <imgclass="tile-image"/><!-- Body --> <divclass="tile-body"><!-- User --> <divclass="tile-user-info"> <aclass="tile-avatar"></a> <divclass="tile-user"></div> </div><!-- Message --> <divclass="tile-caption"></div><!-- Date Time --> <divclass="tile-source-timestamp"></div> </div> </div> </div> </div> </form> </div></script>![Display Options](images/html-semantic.png)### Masonry StyleBelow sample code shows a Registration Form in Masonry Style. We have added Custom CSS on top of the template, and changed the HTML structure of the Tile to display User profile first.
```html<scripttype="text/html"class="claim-template"> <linkhref='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300'rel='stylesheet'type='text/css'> <style>body{font-family:'Open Sans Condensed', sans-serif;font-weight:normal;font-style:normal }.claim-wrapper {width:100%!important;padding:0px!important; }.tile-list {column-gap:10px;column-count:4; }.tile {display:inline-block;width:100%; }.select-checkbox {position:absolute!important;top:0px;right:0px; } </style> <divdata-bind="visible: success() === -1"> <h1 class="text-center">We have found the following photos that are belonging to your Instagram Account, Select your best photos to enter the competition.</h1>
<form> <spanclass="error-message"data-bind="text: errorMessage()"></span> <divclass="text-center"style="padding: 20px"> <a class="st-btn st-btn-primary" data-bind="click: function() {selectToggle(); return true;}">Select All</a>
<a data-bind="attr:{'class':getButtonClasses()}, click: function(d,e) { initClaimTiles() }" data-button-submit="register">
<span>Register</span> </a> </div> <divdata-bind="foreach: tiles, attr:{'class':getListClasses()}"><!-- Tile --> <divdata-bind="attr:{'class':getTileClasses()}"> <divclass="tile-body"><!-- User Profile --> <divclass="tile-user-info clearfix"> <aclass="tile-avatar"data-bind="attr:{'href':getAvatarUrl()}"> <imgwidth="30"height="30"data-bind="attr:{'src':avatar()}"> </a> <divclass="tile-user"> <aclass="tile-user-top"data-bind="attr:{'href':getAvatarUrl()}"> <spandata-bind="text:name()"></span> </a> <aclass="tile-user-bottom"data-bind="attr:{'href':getAvatarUrl()}"> <spandata-bind="text:user()"></span> </a> </div><!-- Select Checkbox --> <input type="checkbox" class="st-form-control select-checkbox" data-bind="checked: selected, click: function() {$parent.updateSelection(); return true;}" />
</div> <imgclass="tile-image"data-bind="attr: {src: image()}, visible: image()"><!-- Image --> <divclass="tile-caption"data-bind="visible: message()"> <pdata-bind="text:message()"></p> </div><!-- Time --> <divclass="tile-source-timestamp"data-bind="visible: source\_created\_at()"> <spandata-bind="text:getTimeAgoPhrase()"></span> </div> </div> </div> </div> <divclass="st-form-group"> {{#claimData.tcurl}} <labelclass="terms-and-conditions"> <input type="checkbox" class="st-form-control" data-bind="checked: termAndConditions, click: function() {updateSelection(); return true;}" />
I agree to the <ahref="{{claimData.tcurl}}"target="\_blank">Terms and Conditions</a>. </label> {{/claimData.tcurl}} </div> </form> </div> <scr{{i}}ipt> window.Stackla = window.Stackla || {}; window.Stackla.tileListData = {{{json}}}; </scr{{i}}ipt></script>
Template Methods
Rights by Registration uses Mustache as the Rendering Template Engine, and Knockout JS as the View Model Logic. Below outlines the Knockout method calls and properties in the Mustache templates.