Styling

By default, Maître comes with a very basic but thought through template. You can choose between 6 different templates to match your unique style. Sometimes, however, you may want to customise the look & feel of your widget. To do so, disable the default template in the "Look & Feel" tab, under the "Templates" option and press save.

Disable template 28c0d63f0ee0e6a634b1848eaeba3c6383b73a0ebb1e7ab927155a616f2470cb

The next step is to write your own style. But to do so, you need to understand the HTML structure of the widget.

Anatomy of the widget

<div id="maitre-widget-container">
<!-- Form Start -->
<form id="maitre-form" data-maitre-form>
<p data-maitre-main-header id="maitre-main-header"></p>
  <div id="maitre-form-content">
  <div class="maitre-field" id="maitre-field-name" data-maitre-field-name>
    <label></label>
    <input type="text" name="name"/>
  </div>
  <div class="maitre-field" id="maitre-field-email" data-maitre-field-email>
    <label></label>
    <input type="email" name="email"/>
  </div>
  <div class="maitre-field" id="maitre-field-submit" data-maitre-field-submit>
    <button type="submit" id="maitre-submit-button" data-maitre-submit-button></button>
  </div>
  </div>
  <a href="#" id="maitre-status" data-maitre-status></a>
</form>
<!-- Form End -->

<!-- Thank you screen Start -->
<div id="maitre-content" data-maitre-content>

  <h2 id="maitre-header" data-maitre-header></h2>
  <p id="maitre-verification" data-maitre-verification>We have sent you a confirmation email.<br>You have 15 minutes to confirm your position.</p>
  <h4 id="maitre-people-ahead-number" data-maitre-people-ahead-number></h4>
  <p id="maitre-people-ahead-text" data-maitre-people-ahead-text></p>
  <h4 id="maitre-people-behind-number" data-maitre-people-behind-number></h4>
  <p id="maitre-people-behind-text" data-maitre-people-behind-text></p>

  <p id="maitre-instructions" data-maitre-instructions></p>

  <div id="maitre-share-container" data-maitre-share-container>
    <div id="maitre-social-facebook" data-maitre-social-facebook class="maitre-widget-social"></div>
    <div id="maitre-social-twitter" data-maitre-social-twitter class="maitre-widget-social"></div>
    <div id="maitre-social-whatsapp" data-maitre-social-whatsapp data-action="share/whatsapp/share" class="maitre-widget-social show-mobile"></div>
    <div id="maitre-social-email" data-maitre-social-email class="maitre-widget-social"></div>
    <div id="maitre-share-plain" data-maitre-share-plain>
      <div id="maitre-share-plain-url" data-maitre-share-plain-url></div>
    </div>
  </div>
</div>
<!-- Thank you screen End -->
</div>

Whatsapp's icon will only appear on mobile devices.

The HTML structure is pretty basic. There is one parent container with the ID  #maitre-widget-container, inside which there are two elements: the form, with the ID #maitre-form, and the result div, with the ID #maitre-content.

After a successful registration a few things happen:

  • A class .hide is added to the form
  • A class .show is added to the div #maitre-people-behind-text if the property people_behind of the json response is higher then 0. 
  • A class .show is added to the div #maitre-content

Mind that if you disable the default CSS, both the form and the div #maitre-content will be visible, with unexpected results.

Here's an example of styling that you can use:

#maitre-form, #maitre-content.show, #maitre-people-behind-text.show {
  display: block;
}

#maitre-form.hide, #maitre-content, #maitre-people-behind-text {
  display: none;
}

Need a starting point? Take a look at the  default basic style.

Need some inspiration? Check our gallery!

Still need help? Contact Us Contact Us