<div id="menud">
<p>This page is for development purpose only. You will find here all the current styles and UI elements that can help you with you theme or plugin design.</p>
<a href="#common-text" style="padding:5px 10px;display:inline-block">Common Text styles</a> |
<a href="#custom-text" style="padding:5px 10px;display:inline-block">Custom Text styles</a> |
<a href="#lists" style="padding:5px 10px;display:inline-block">Lists</a> |
<a href="#boxes" style="padding:5px 10px;display:inline-block">Boxes</a> |
<a href="#panel" style="padding:5px 10px;display:inline-block">The Panel</a> |
<a href="#helper" style="padding:5px 10px;display:inline-block">Helper classes</a> |
<a href="#tables" style="padding:5px 10px;display:inline-block">Tables</a> |
<a href="#accordion" style="padding:5px 10px;display:inline-block">Accordion</a> |
<a href="#menus" style="padding:5px 10px;display:inline-block">Menus</a> |
<a href="#buttons" style="padding:5px 10px;display:inline-block">Buttons</a> |
<a href="#loaders" style="padding:5px 10px;display:inline-block">Loaders</a> |
<a href="#tabs" style="padding:5px 10px;display:inline-block">Tabs</a> |
<a href="#forms" style="padding:5px 10px;display:inline-block">Form elements</a> |
<a href="#icons" style="padding:5px 10px;display:inline-block">Icons</a>
</div>
<br /><br />
<hr />
<section id="common-text">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Common Text styles</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<table style="width:auto;padding:0 10px;margin:0">
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<h1>Heading 1</h1>' /></td><td style="padding:0px 20px"><h1>Heading 1</h1></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<h2>Heading 2</h2>' /></td><td style="padding:0px 20px"><h2>Heading 2</h2></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:15px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<h3>Heading 3</h3>' /></td><td style="padding:0px 20px"><h3>Heading 3</h3></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<h4>Heading 4</h4>' /></td><td style="padding:0px 20px"><h4>Heading 4</h4></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<h5>Heading 5</h5>' /></td><td style="padding:0px 20px"><h5>Heading 5</h5></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<h6>Heading 6</h6>' /></td><td style="padding:5px 20px"><h6>Heading 6</h6></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<p>Paragraph</p>' /></td><td style="padding:5px 20px"><p>Paragraph</p></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<pre>preformatted</pre>' /></td><td style="padding:5px 20px"><pre>preformatted</pre></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<strong>Strong</strong>' /></td><td style="padding:5px 20px"><strong>Strong</strong></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<em>Emphasis</em>' /></td><td style="padding:5px 20px"><em>Emphasis</em></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<del>Deleted</del>' /></td><td style="padding:5px 20px"><del>Deleted</del></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<mark>Highlighted</mark>' /></td><td style="padding:5px 20px"><mark>Highlighted</mark></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<ins>Inserted</ins>' /></td><td style="padding:5px 20px"><ins>Inserted</ins></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:200px;font-family:monospace" readonly value='<a href="#">Link</a>' /></td><td style="padding:5px 20px"><a href="javascript:;">Link</a></td></tr>
</table>
<br /><br />
</section>
<hr />
<section id="custom-text">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Custom text style</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<h1 class="pagetitle">Page title style </h1>
<h4 class="pagetitle">Page title style </h4>
<p class="pagetitle">Page title style </p>
<p>You can use this style with any heading of paragraph. Just add the class <mark><code>.pagetitle</code></mark> inline the html tag.</p>
<br /><br />
</section>
<hr />
<section id="lists">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Lists</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<h4>Unordered list</h4>
<ul>
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
</ul>
<h4>Orderer list</h4>
<ol>
<li>First element</li>
<li>Second element</li>
<li>Third element</li>
</ol>
<br /><br />
</section>
<hr />
<section id="boxes">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Boxes</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<div class="note">This box is for notification messages. Just add the class <mark><code>.note</code></mark> to a div.</div>
<div class="error">This box is for error messages. Just add the class <mark><code>.error</code></mark> to a div.</div>
<div class="result">This box is for result messages. Just add the class <mark><code>.result</code></mark> to a div.</div>
<p><small>NOTE: There is a black box for "result messages" that go invisible after a few seconds. Reload this page to see it.</small></p>
<br /><br />
</section>
<hr />
<section id="panel">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">The panel</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<p>Most of the screens are structured with a div named <mark><code>.panel</code></mark>, including a <mark><code>.header</code></mark> div, a <mark><code>.content</code></mark> div and a <mark><code>.footer</code></mark> div (usually empty).</p>
<textarea readonly style="resize:none;height:90px;font-family:monospace;padding:15px 15px 0px;overflow:auto;">
<div class="panel">
<div class="header"><h2>The header of the panel</h2></div>
<div class="content">The content of the panel</div>
<div class="footer">The footer of the panel</div>
</div>
</textarea>
<p>The code above looks like this:</p>
<div class="panel">
<div class="header"><h2>The header of the panel</h2></div>
<div class="content">The content of the panel</div>
<div class="footer">The footer of the panel</div>
</div>
<br />
<p>You can add inside the <code>.content</code> div of the panel all kind of information elemnts, like tables, forms, tabs, accordions, etc.</p>
<br /><br />
</section>
<hr />
<section id="helper">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Helper classes</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<h3>Show & Hide</h3>
<p>Thare are 3 items in this list below. You can modify your browser window size to see the effect.</p>
<ul>
<li>1- THIS ITEM WILL BE VISIBLE ON All SCREENS</li>
<li class="show-on-mobile"><ins>2 - THIS ITEM WILL BE VISIBLE ONLY ON SCREENS SMALLER THAN 768px</ins></li>
<li class="hide-on-mobile"><strong>3 - THIS ITEM WILL BE VISIBLE ONLY ON SCREENS BIGGER THAN 768px</strong></li>
</ul>
<p>The first item one has no class and will be visible on all screens. <br />
The second has the class <mark><code>.show-on-mobile</code></mark> and will be visible only on screens smaller than 768px width.<br />
The third has the class <mark><code>.hide-on-mobile</code></mark> and will be visible only on screens bigger than 768px width.<br />
You can apply this two classes to any element, like cell tables, row tables, complete tables, divs, form elements, paragraphs, etc.</p>
<br /><br />
</section>
<hr />
<section id="tables">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Tables</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<p>The first columns of tables has class <code>.listinghdname</code> for th, and <code>.listingrowname</code> for tds.<br />
The rest of the columns has class <code>.listinghdelement</code> for th, and <code>.listingelement</code> for tds.<br />
The grey rows of tables has class <code>.row1</code> and the white rows has class <code>.rowelement</code>. </p>
<table>
<thead>
<tr>
<th class="listinghdname">th .listinghdname</th>
<th class="listinghdelement">th .listinghdelement</th>
<th class="listinghdelement"> </th>
</tr>
</thead>
<tbody>
<tr class="row1">
<td class="listingrowname">td .listingrowname</td>
<td class="listingelement">td .listingelement</td>
<td class="listingelement"><mark>tr .row1</mark></td>
</tr>
<tr class="rowelement ">
<td class="listingrowname">td .listingrowname</td>
<td class="listingelement">td .listingelement</td>
<td class="listingelement"><mark>tr .rowelement</mark></td>
</tr>
</tbody>
</table>
<br />
This is the code of the table above:
<textarea readonly style="resize:none;min-height:310px;height:auto !Important;font-family:monospace;width:100%;padding:15px 10px 0px;overflow:auto;">
<table>
<thead>
<tr>
<th class="listinghdname">th .listinghdname</th>
<th class="listinghdelement">th .listinghdelement</th>
<th class="listinghdelement"> </th>
</tr>
</thead>
<tbody>
<tr class="row1">
<td class="listingrowname">td .listingrowname</td>
<td class="listingelement">td .listingelement</td>
<td class="listingelement"><mark>tr .row1</mark></td>
</tr>
<tr class="rowelement ">
<td class="listingrowname">td .listingrowname</td>
<td class="listingelement">td .listingelement</td>
<td class="listingelement"><mark>tr .rowelement</mark></td>
</tr>
</tbody>
</table>
</textarea>
<br /><br />
</section>
<hr />
<section id="accordion">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">ACCORDION</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<p>To use an accordion, create a div class <mark><code>.accordion</code></mark>.
Into that div add, for each item, a <code><h3></code> tag and insde a <code><a></code> with the item title. And after that add a div with the item text. Like this:</p>
<textarea readonly style="resize:none;height:100px;font-family:monospace;padding:15px 15px 0px;overflow:auto;">
<div class="accordion">
<h3><a href="javascript:;">First item title</a></h3>
<div>First item text </div>
<h3><a href="javascript:;">Second item title</a></h3>
<div>Second item text</div>
</div>
</textarea>
The result should look like this:
<div class="accordion">
<h3><a href="javascript:;">First item title</a></h3>
<div>First item text </div>
<h3><a href="javascript:;">Second item title</a></h3>
<div>Second item text</div>
</div>
<br /><br />
</section>
<hr />
<section id="menus">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Menus</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<h5>The <mark>#webblertabs</mark></h5>
<div id="webblertabs">
<ul>
<li class="current"><a href="javascript:;"><span class="title">Item 1</span></a></li>
<li><a href="javascript:;"><span class="title">Item 2</span></a></li>
</ul>
</div>
<textarea readonly style="resize:none;height:100px;font-family:monospace;padding:15px 15px 0px;overflow:auto;">
<div id="webblertabs">
<ul>
<li class="current"><a href="#"><span class="title">Item 1</span></a></li>
<li><a href="#"><span class="title">Item 2</span></a></li>
</ul>
</div>
</textarea>
<h6>As an alternative, put a <code>#webblertabs</code> inside a div with the class <mark><code>.minitabs</code></mark> and you will have this:</h6>
<div class="minitabs">
<div id="webblertabs">
<ul>
<li class="current"><a href="javascript:;"><span class="title">Item 1</span></a></li>
<li><a href="javascript:;"><span class="title">Item 2</span></a></li>
</ul>
</div>
</div>
<br />
<br /><br />
</section>
<hr />
<section id="buttons">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Buttons</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<table style="width:auto;padding:0 10px;margin:0">
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:350px;font-family:monospace" readonly value='<a id="login">Login</a>' /></td><td style="padding:5px 20px"><a id="login" href="javascript:;">Login</a></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:350px;font-family:monospace" readonly value='<a id="logout">Logout</a>' /></td><td style="padding:5px 20px"><a id="logout" href="javascript:;">Logout</a></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:5px"><input type="text" style="max-width:100%;min-width:350px;font-family:monospace" readonly value='<a class="action-button">Action button</a>' /></td><td style="padding:0px 20px"><a class="action-button" href="javascript:;">Action button</a></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:5px"><input type="text" style="max-width:100%;min-width:350px;font-family:monospace" readonly value='<a class="button">Submit button</a>' /></td><td style="padding:5px 20px"><a class="button" href="javascript:;">Submit button</a></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:5px"><input type="text" style="max-width:100%;min-width:350px;font-family:monospace" readonly value='<a class="reset"">Reset button</a>' /></td><td style="padding:0px 20px"><a class="reset" href="javascript:;">Reset button</a></td></tr>
</table>
<hr /><br />
These BACK and NEXT buttons need to be inside a <mark>.panel</mark> class. So if you want to use them inside a table,
just add the class="panel" inline the td, as it is done below.
<table style="width:auto;padding:0 10px;margin:0">
<tr><td class="hide-on-mobile" style="padding-top:5px">
<textarea style="max-width:100%;min-width:350px;height:70px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<td class="panel"><div class="step-nav">
<a class="next" href="#">Next</a>
<a class="back" href="#">Back</a>
</div></td>
</textarea></td>
<td style="padding:0px 20px" class="panel"><div class="step-nav"><a class="next savechanges" href="javascript:;">Next</a><a class="back savechanges" href="javascript:;">Back</a></td></tr>
</table>
<hr /><br />
<table style="width:auto;padding:0 10px;margin:0">
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:230px;font-family:monospace" readonly value='<a class="hide"></a>' /></td><td style="padding:10px 25px"><a class="hide" href="javascript:;"></a></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:230px;font-family:monospace" readonly value='<a class="del"></a>' /></td><td style="padding:5px 20px"><a class="del" href="javascript:;"></a></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:230px;font-family:monospace" readonly value='<a class="helpdialog"></a>' /></td><td style="padding:5px 20px"><a class="helpdialog" href="javascript:;"></a></td></tr>
</table>
<hr /><br />
<table style="width:auto;padding:0 10px;margin:0">
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:460px;font-family:monospace" readonly value='<span class="send-list"><a class="button"></a></span>' /></td><td style="padding:0px 15px"><span class="send-list"><a class="button" href="javascript:;"></a></span></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:460px;font-family:monospace" readonly value='<span class="edit-list"><a class="button"></a></span>' /></td><td style="padding:0px 20px"><span class="edit-list"><a class="button" href="javascript:;"></a></span></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:460px;font-family:monospace" readonly value='<span class="add_member"><a class="opendialog"></a></span>' /></td><td style="padding:0px 15px"><span class="add_member"><a class="opendialog" href="javascript:;"></a></span></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:460px;font-family:monospace" readonly value='<span class="delete"><a class="confirm"></a></span>' /></td><td style="padding:0px 10px"><span class="delete"><a class="confirm" href="javascript:;"></a></span></td></tr>
</table>
<hr /><br />
<table style="width:auto;padding:0 10px;margin:0">
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:430px;font-family:monospace" readonly value='<span class="view"><a class="button"></a></span>' /></td><td style="padding:0px 20px"><span class="view"><a class="button" href="javascript:;"></a></span></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:430px;font-family:monospace" readonly value='<span class="resend"><a class="button"></a></span>' /></td><td style="padding:0px 20px"><span class="resend"><a class="button" href="javascript:;"></a></span></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:430px;font-family:monospace" readonly value='<span class="edit"><a class="button"></a></span>' /></td><td style="padding:0px 20px"><span class="edit"><a class="button" href="javascript:;"></a></span></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:430px;font-family:monospace" readonly value='<span class="delete"><a class="button"></a></span>' /></td><td style="padding:0px 20px"><span class="delete"><a class="button" href="javascript:;"></a></span></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:430px;font-family:monospace" readonly value='<span class="suspend"><a class="button"></a></span>' /></td><td style="padding:0px 20px"><span class="suspend"><a class="button" href="javascript:;"></a></span></td></tr>
<tr><td class="hide-on-mobile" style="padding-top:0px"><input type="text" style="max-width:100%;min-width:430px;font-family:monospace" readonly value='<span class="marksent"><a class="button"></a></span>' /></td><td style="padding:0px 20px"><span class="marksent"><a class="button" href="javascript:;"></a></span></td></tr>
</table>
<br />
<div class="accordion">
<h3><a href="javascript:;">The big buttons of the Dashboard</a></h3>
<div>
<p> This buttons only works if they are inside a table inside an accordion. This is a very bad practice, we should modify this soon making a new class named <code>.large-button</code> with all the required attributes to use this large size buttons anywhere.</p>
<table style="padding:0;margin:0;border:0"><tr class="send-campaign"><td class="listingname"><a href="javascript:;">Campaign</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="send-campaign">
<td class="listingname">
<a href="#">Campaign</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="manage-campaigns"><td class="listingname"><a href="javascript:;">View</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="manage-campaigns">
<td class="listingname">
<a href="#">View</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="manage-users"><td class="listingname"><a href="javascript:;">Suscriber</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="manage-users">
<td class="listingname">
<a href="#">Suscriber</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="view-statistics"><td class="listingname"><a href="javascript:;">Statistics</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="view-statistics">
<td class="listingname">
<a href="#">Statistics</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="manage-lists"><td class="listingname"><a href="javascript:;">Lists</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="manage-lists">
<td class="listingname">
<a href="#">Lists</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="list-users"><td class="listingname"><a href="javascript:;">Suscribers</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="list-users">
<td class="listingname">
<a href="#">Suscribers</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="import-users"><td class="listingname"><a href="javascript:;">Import</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="import-users">
<td class="listingname">
<a href="#">Import</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="export-users"><td class="listingname"><a href="javascript:;">Export</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="export-users">
<td class="listingname">
<a href="#">Export</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="reconcileusers"><td class="listingname"><a href="javascript:;">Reconcile</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="reconcileusers">
<td class="listingname">
<a href="#">Reconcile</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="configure"><td class="listingname"><a href="javascript:;">Configure</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="configure">
<td class="listingname">
<a href="#">Configure</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="configure-attributes"><td class="listingname"><a href="javascript:;">Attributes</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="configure-attributes">
<td class="listingname">
<a href="#">Attributes</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="custom-attribute"><td class="listingname"><a href="javascript:;">Attribute</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="custom-attribute">
<td class="listingname">
<a href="#">Attribute</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="spage"><td class="listingname"><a href="javascript:;">Subscribe page</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="spage">
<td class="listingname">
<a href="#">Subscribe page</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="admins"><td class="listingname"><a href="javascript:;">Admins</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="admins">
<td class="listingname">
<a href="#">Admins</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="adminattributes"><td class="listingname"><a href="javascript:;">Admin attributes</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="adminattributes">
<td class="listingname">
<a href="#">Admin attributes</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="send-message"><td class="listingname"><a href="javascript:;">Send</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="send-message">
<td class="listingname">
<a href="#">Send</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="templates"><td class="listingname"><a href="javascript:;">Templates</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="templates">
<td class="listingname">
<a href="#">Templates</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="list-all-msg"><td class="listingname"><a href="javascript:;">Messages</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="list-all-msg">
<td class="listingname">
<a href="#">Messages</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="processqueue"><td class="listingname"><a href="javascript:;">Process</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="processqueue">
<td class="listingname">
<a href="#">Process</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="bounces"><td class="listingname"><a href="javascript:;">Bounces</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="bounces">
<td class="listingname">
<a href="#">Bounces</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="plugin"><td class="listingname"><a href="javascript:;">Plugin</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="plugin">
<td class="listingname">
<a href="#">Plugin</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="setup"><td class="listingname"><a href="javascript:;">Setup</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="setup">
<td class="listingname">
<a href="#">Setup</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="dbcheck"><td class="listingname"><a href="javascript:;">Databases</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="dbcheck">
<td class="listingname">
<a href="#">Databases</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="upgrade"><td class="listingname"><a href="javascript:;">Upgrade</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="upgrade">
<td class="listingname">
<a href="#">Upgrade</a>
</td>
</tr>
</textarea></td>
</tr>
<tr class="view-log"><td class="listingname"><a href="javascript:;">Log</a></td>
<td class="hide-on-mobile" style="padding:0px 10px"><textarea style="max-width:100%;min-width:320px;height:80px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<tr class="view-log">
<td class="listingname">
<a href="#">Log</a>
</td>
</tr>
</textarea></td>
</tr></table>
</div>
</div><br />
<br /><br />
</section>
<hr />
<section id="loaders">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Loaders</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<h3>Spinner</h3>
<table>
<tr><td width=60><img src="images/busy.gif" with="34" height="34" alt="Please wait" /></td>
<td>
<textarea style="max-width:100%;width:430px;max-height:40px;font-family:monospace;overflow:hidden;padding:5px;resize:none" readonly>
<img src="images/busy.gif" with="34" height="34" alt="Please wait" />
</textarea>
</td>
</tr>
</table>
<hr /><br />
<h3>Progressbar</h3>
<div aria-valuenow="50" aria-valuemax="100" aria-valuemin="0" role="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" id="progressbar"><div style="width: 50%;" class="ui-progressbar-value ui-widget-header ui-corner-left"></div></div>
<br />
<textarea style="max-width:100%;width:100%;height:100px;font-family:monospace;padding:5px;resize:none" readonly>
<div aria-valuenow="50" aria-valuemax="100" aria-valuemin="0" role="progressbar" class="ui-progressbar ui-widget ui-widget-content ui-corner-all" id="progressbar">
<div style="width: 50%;" class="ui-progressbar-value ui-widget-header ui-corner-left"></div>
</div>
</textarea>
<br /><br />
</section>
<hr />
<section id="tabs">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Tabs</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<h3>Common Tabs</h3>
<div class="tabbed">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
</ul>
<div id="tab1">
<h3>Tab 1 title</h3>
<p>Tab 1 text.</p>
</div>
<div id="tab2">
<h3>Tab 2 title</h3>
<p>Tab 2 text.</p>
</div>
</div><!-- /tabbed -->
<br />
<textarea style="max-width:100%;width:100%;height:210px;font-family:monospace;padding:5px;resize:none" readonly>
<div class="tabbed">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
</ul>
<div id="tab1">
<h3>Tab 1 title</h3>
<p>Tab 1 text.</p>
</div>
<div id="tab2">
<h3>Tab 2 title</h3>
<p>Tab 2 text.</p>
</div>
</div>
</textarea>
<hr />
<br />
<h3>The Send Tabs</h3>
This tabs are used on the "Start a new Campaign" screen. Each tab is realy a link but designed as a tab,
and they use the jQuery plugin http://www.gmarwaha.com/jquery/jcarousellite/
to slide the tabs when they exceed the width of the container.
<div class="sendtabs_container">
<div id="sendtabs">
<ul class="sendcampaign">
<li class="current"><a href="javascript:;"><span class="tabno">1</span>One</a></li>
<li><a href="javascript:;"><span class="tabno">2</span>Two</a></li>
<li><a href="javascript:;"><span class="tabno">3</span>Three</a></li>
<li><a href="javascript:;"><span class="tabno">4</span>Four</a></li>
<li><a href="javascript:;"><span class="tabno">5</span>Five</a></li>
<li><a href="javascript:;"><span class="tabno">6</span>Six</a></li>
</ul>
</div>
<img src="ui/default/images/prevtab.png" id="prev" class="prevtab">
<img src="ui/default/images/nexttab.png" id="next" class="nexttab">
</div>
<br />
<textarea style="max-width:100%;width:100%;height:210px;font-family:monospace;padding:5px;resize:none" readonly>
<div class="sendtabs_container">
<div id="sendtabs">
<ul class="sendcampaign">
<li class="current"><a href="#"><span class="tabno">1</span>One</a></li>
<li><a href="#"><span class="tabno">2</span>Two</a></li>
<li><a href="#"><span class="tabno">3</span>Three</a></li>
<li><a href="#"><span class="tabno">4</span>Four</a></li>
<li><a href="#"><span class="tabno">5</span>Five</a></li>
<li><a href="#"><span class="tabno">6</span>Six</a></li>
</ul>
</div>
<img src="ui/default/images/prevtab.png" id="prev" class="prevtab">
<img src="ui/default/images/nexttab.png" id="next" class="nexttab">
</div>
</textarea>
</section>
<br />
<hr />
<section id="forms">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Form elements</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<input type="text" value="Input type text"></input>
<input type="password" value="Input type password"></input>
<textarea>Textarea</textarea>
<select>
<option>Select option 1</option>
<option>Select Option 2</option>
</select>
<label for="check">Checkbox: <input name="check" type="checkbox"></label>
<br />
<label for="radio">Radio: <input name="radio" type="radio"></label>
<br />
<hr />
<br />
<p>There is a small hack in the "Start a New Campaign" screen, under the tab "List".
This hack use a javascript applied to the checkbox inside the <mark>#listselection</mark> div.</p>
<div id="listselection">
<div class="tabbed">
<ul class="ui-tabs-nav"></ul>
<div id="targetlist1"><ul>
<li>
<input style="display: none;" id="targetlist[all]" type="checkbox">
<label for="targetlist[all]">All Lists</label>
</li>
</ul></div>
</div>
</div>
<br />
<p>All the classes showed below are needed for this to work.</p>
<textarea style="max-width:100%;width:100%;height:170px;font-family:monospace;padding:5px;resize:none" readonly>
<div id="listselection">
<div class="tabbed">
<ul class="ui-tabs-nav"></ul>
<div id="targetlist1"><ul>
<li>
<input style="display: none;" id="targetlist[all]" type="checkbox">
<label for="targetlist[all]">All Lists</label>
</li>
</ul></div>
</div>
</div>
</textarea>
</section>
<br />
<hr />
<section id="icons">
<a href="#menud" style="font-size:12px;float:right;padding-right:10px;padding-top:0">BACK TO TOP</a><div style="clear:both;float:none"></div>
<h1 class="pagetitle" style="background:#000;padding-left:10px;margin-bottom:5px;color:#FFF">Icons</h1>
<a href="#menud" style="font-size:12px;padding-right:10px;padding-top:0">BACK TO TOP</a>
<hr />
<br />
<p>There are some small icons in the links of the page "Manage Subscribers" (usermgt), but they are only visible in that page so I can only include the images here.</p>
<p><img src="/lists/admin/ui/default/images/16x16/search.png" /></p>
<p><img src="/lists/admin/ui/default/images/16x16/attibutes.png" /></p>
<p><img src="/lists/admin/ui/default/images/16x16/pencil.png" /></p>
<p><img src="/lists/admin/ui/default/images/16x16/database.png" /></p>
<p><img src="/lists/admin/ui/default/images/16x16/issue.png" /></p>
<p><img src="/lists/admin/ui/default/images/16x16/check.png" /></p>
<p><img src="/lists/admin/ui/default/images/16x16/importusers.png" /></p>
<p><img src="/lists/admin/ui/default/images/16x16/exportusers.png" /></p>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
$(document).ready(function() {
var counttab = 6;
var currenttab = $('.current').attr('id');
if(matchMedia('only screen and (max-width: 480px)').matches){ tabs=2; starttab=currenttab-2; }
else if(matchMedia('only screen and (max-width: 767px)').matches){ tabs=3; starttab=currenttab-3;}
else if(matchMedia('only screen and (max-width: 967px)').matches){ tabs=4; starttab=currenttab-4;}
else{ tabs=6; starttab=currenttab-6; }
$('#sendtabs').jCarouselLite({
btnNext: '.nexttab',
btnPrev: '.prevtab',
circular: false,
visible: tabs,
auto: null,
speed:100,
scroll:1,
start: starttab
});
});
$(window).resize(function(){
var counttab = 6;
var currenttab = $('.current').attr('id');
if(matchMedia('only screen and (max-width: 480px)').matches){ tabs=2;starttab=currenttab-2;}
else if(matchMedia('only screen and (max-width: 767px)').matches){ tabs=3; starttab=currenttab-3;}
else if(matchMedia('only screen and (max-width: 967px)').matches){ tabs=4; starttab=currenttab-4;}
else{ tabs=6; starttab=currenttab-6; }
$('#sendtabs').jCarouselLite({
btnNext: '.nexttab',
btnPrev: '.prevtab',
circular: false,
visible: tabs,
auto: null,
speed:100,
scroll:1,
start: starttab
});
});
</script>