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, the first step is to disable the default template.

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