Another Example of how to layout Notez.

Thanks for purchasing a yuzooltheme. Here’s my gift to you to say “thanks, you rock my world". This is a very simple but customisable launch theme and is great for launching your next project, building buzz and collecting email addresses before you launch.

1. The package contents are as follows:

2. Icon Font

A. i’m sure on any launch page you want to connect out to your social getaways and this included icon font is a cool way to do it that blends well with your copy and is crisp and retina display ready:

<a href=""><span class="glyph social">e</span>Follow us on Twitter</span></a>

This is the great Foundation Icons font so whenever you want to pull up a social icon just change the letter in the "span" tags to one of those below:

Foundation Icons - Social

So currently my "e" will show twitter - change to any other you fancy. Colour changes with the "links" colour selector in the page styles tab.

3. Progress Bar

A. Grey, green, orange, red, blue - just drag in the snippet, change the values. That's it really.
Should look like this:

<div class="progress">      <span class="green" style="width: 40%;"><span>40%</span></span> </div>

Change the "green" to "orange”, "red”, "blue" or leave it blank for “grey" and the values to the desired completion rate. So for "20%", change both instances of “40%" to “20%”. Simples!

4. Background image

A. In the pages styles under “site background" select “background image" and add your image to the
theme resources and call it background.jpg to get something like the demo site.

The recommended image size is 1200 x 740 pixels and it’s fun to add gaussian-blur
to the image in image editing software like Photoshop or Pixelmator before uploading like
in this example here.

5. Newsletter signup

A. Drag in the snippet to a stack or section of the site where you want to show this signup box.
Please then edit your text to give a desired heading and footer as in the


<div id="newsletter">
<p>Enter your email address and we'll mail you when we launch:</p>
<p>We'll only notify you once and never again. Promise.</p>

The snippet as it is currently won’t add any email address to a list as we have the “form action="#""
This should be a link to the list capturing software online provided by your marketing list software.

Change the whole code in-between to the signup code provided by the newsletter provider of your choice. For example, there’s mailchimp, my, Aweber and so on.

This included snippet example shows a working Mailchimp code:

<div id="newsletter">
<p>Enter your email address and we'll mail you when we launch:</p>
<!--Paste your form code here --> <form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Enter your email address ..." required>
<input type="submit" value="Notify Me" name="subscribe" id="mc-embedded-subscribe" class="button">
</form><!--Paste your form code here -->
<p>We'll only notify you once and never again. Promise.</p>

6. Need some help?

Enjoy this theme, and if you have any questions, need further assistance, have comments or what not, please contact me at There’ll be amends posted there to themes and update information as well as any bug fixes and your chance to raise a support ticket too.

Cheers and happy weaving,
Michael Frankland

Site logo