Colourways

Columns and grids

Page layout columns new v4.6

Responsive page layout grid.

Code:

<div class="txp-layout">

    <div class="txp-layout-1col">...Opt1: 1col - content here...</div>

    <div class="txp-layout-2col">...Opt2: 2col cell1 - content here...</div>
    <div class="txp-layout-2col">...Opt2: 2col cell2 - content here...</div>

    <div class="txp-layout-4col">...Opt3: 4col cell1 - content here...</div>
    <div class="txp-layout-4col">...Opt3: 4col cell2 - content here...</div>
    <div class="txp-layout-4col">...Opt3: 4col cell3 - content here...</div>
    <div class="txp-layout-4col">...Opt3: 4col cell4 - content here...</div>

    <div class="txp-layout-4col-2span">...Opt4: 4col cell1and2 - content here...</div>
    <div class="txp-layout-4col">...Opt4: 4col cell3 - content here...</div>
    <div class="txp-layout-4col">...Opt4: 4col cell4 - content here...</div>

    <div class="txp-layout-4col-alt">...Opt5: 4col cell1 - content here...</div>
    <div class="txp-layout-4col-2span">...Opt5: 4col cell2and3 - content here...</div>
    <div class="txp-layout-4col-alt">...Opt5: 4col cell4 - content here...</div>

    <div class="txp-layout-4col">...Opt6: 4col cell1 - content here...</div>
    <div class="txp-layout-4col">...Opt6: 4col cell2 - content here...</div>
    <div class="txp-layout-4col-2span">...Opt6: 4col cell3and4 - content here...</div>

    <div class="txp-layout-4col-3span">...Opt7: 4col cell1and2and3 - content here...</div>
    <div class="txp-layout-4col-alt">...Opt7: 4col cell4 - content here...</div>

    <div class="txp-layout-4col-alt">...Opt8: 4col cell1 - content here...</div>
    <div class="txp-layout-4col-3span">...Opt8: 4col cell2and3and4 - content here...</div>

</div>

Example:

<div class="txp-layout-textbox">
    <p>...content here...</p>
</div>

<div class="txp-grid">
    <div class="txp-grid-cell" [width, see notes]>
        <p>Grid item 1</p>
    </div><div class="txp-grid-cell" [width, see notes]>
        <p>Grid item 2</p>
    </div><div class="txp-grid-cell highlight" [width, see notes]>
        <p>Grid item 3</p>
    </div><div class="txp-grid-cell" [width, see notes]>
        <p>Grid item 4</p>
    </div>
    ...etc...
</div>

Headings changed v4.5

Code:

<h1 class="txp-heading">

Example:

h1 Heading 1 h1 Heading 1 h1 Heading 1 h1 Heading 1 h1 heading 1

Notes:

Top level headings in the Textpattern admin area, we advise adding the class="txp-heading" attribute which allows advanced users to optionally hide headings throughout the admin area.

Code:

<h2>

Example:

h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2 h2 Heading 2

Code:

<h3>

Example:

h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3 h3 Heading 3

Paragraphs

Code:

<p>

Example:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sit amet elit vitae arcu interdum ullamcorper. Nullam ultrices, nisi quis scelerisque convallis, augue neque tempor enim, et mattis justo nibh eu elit.

Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci.

Text-level semantics

Anchor

Code:

<a>

Example:

The a element example

Abbreviation

Code:

<abbr>

Example:

The abbr element and abbr element with title examples

Bold (non-semantic)

Code:

<b>

Example:

The b element example

Citation

Code:

<cite>

Example:

The cite element example

Code

Code:

<code>

Example:

The code element example

Deleted

Code:

<del>

Example:

The del element example

Definition

Code:

<dfn>

Example:

The dfn element and dfn element with title examples

Emphasis

Code:

<em>

Example:

The em element example

Italic (non-semantic)

Code:

<i>

Example:

The i element example

Inserted

Code:

<ins>

Example:

The ins element example

Keyboard Input

Code:

<kbd>

Example:

The kbd element example

Mark

Code:

<mark>

Example:

The mark element example

Quote

Code:

<q>

Example:

The q element inside a q element

Strikethrough

Code:

<s>

Example:

The s element example

Sample

Code:

<samp>

Example:

The samp element example

Small

Code:

<small>

Example:

The small element example

Span

Code:

<span>

Example:

The span element example

Strong

Code:

<strong>

Example:

The strong element example

Subscript

Code:

<sub>

Example:

The _{sub element} example

Superscript

Code:

<sup>

Example:

The ^{sup element} example

Underline

Code:

<u>

Example:

The u element example

Variable

Code:

<var>

Example:

The var element example

Inline text labels

Safe new v4.5

Code:

<span class="success">...message...</span>

<strong class="success">...message...</strong>

Example:

This is an example of a span success label and a strong success label.

Warning new v4.5

Code:

<span class="warning">...message...</span>

<strong class="warning">...message...</strong>

Example:

This is an example of a span warning label and a strong warning label.

Danger new v4.5

Code:

<span class="error">...message...</span>

<strong class="error">...message...</strong>

Example:

This is an example of a span error label and a strong error label.

Information (no semantic meaning) new v4.5

Code:

<span class="information">...message...</span>

<strong class="information">...message...</strong>

Example:

This is an example of a span information label and a strong information label.

Alert boxes

System message: success new v4.5

Code:

<p class="alert-block success"><span class="ui-icon ui-icon-check"></span> ...message...</p>

Example:

Success: a suitable success message goes here.

System message: warning changed v4.5

Code:

<p class="alert-block warning"><span class="ui-icon ui-icon-alert"></span> ...message...</p>

Example:

Warning: a suitable warning message goes here.

System message: error new v4.5

Code:

<p class="alert-block error"><span class="ui-icon ui-icon-alert"></span> ...message...</p>

Example:

Error: a suitable error message goes here.

System message: information (no semantic meaning) new v4.5

Code:

<p class="alert-block information"><span class="ui-icon ui-icon-info"></span> ...message...</p>

Example:

Information: a suitable information message goes here.

Block text-level semantics

Pre-formatted text blocks

Code:

<pre dir="auto">...content...</pre>

Example:

This is an example of a non-code
    pre-formatted text block
        preserving white spaces

Notes:

Changed at 4.6: Added dir="auto" attribute, which allows the browser to determine whether text direction should be LTR or RTL depending on content.

Pre-formatted code blocks

Code:

<pre dir="ltr"><code>...content...</code></pre>

Example:

<div id="messagepane" role="alert">
    <span class="success" id="message">Article posted. <a class="close" title="Close" aria-label="Close">&<span role="presentation">times;</span></a></span>
</div>

Notes:

Changed at 4.6: Added dir="ltr" attribute, which ensures computer code text direction is LTR.

Pre-formatted code blocks with syntax highlighting new v4.5

Uses Prism to provide syntax highlighting. We include support for the following languages:

• class="language-markup" (HTML)
• class="language-css" (CSS)
• class="language-clike" (C-like)
• class="language-javascript" (JavaScript)
• class="language-json" (JSON)
• class="language-php" (PHP)
• class="language-markdown" (Markdown)
• class="language-textile" (Textile)

Code:

<pre dir="ltr"><code class="language-markup">...content...</code></pre>

Example:

<div id="messagepane" role="alert">
    <span class="success" id="message">Article posted. <a class="close" title="Close" aria-label="Close">&<span role="presentation">times;</span></a></span>
</div>

Embedded content

Image (unstyled)

Code:

<img src="" alt="">

Example:

Image (styled) new v4.5

Code:

<img class="content-image" src="" alt="">

Example:

Image (styled) with link new v4.5

Code:

<a href="" title=""><img class="content-image" src="" alt=""></a>

Example:

Left ranged image new v4.5

Code:

<img class="align-left" src="" alt="">

Example:

Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor.

Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In lectus nisl, porttitor eget, fermentum et, viverra a, odio. Sed semper. Praesent vulputate nibh eget nisi. Sed ligula. Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis.

Right ranged image new v4.5

Code:

<img class="align-right" src="" alt="">

Example:

Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor.

Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet. Curabitur neque mauris, porta vel, lacinia quis, placerat ultrices, orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In lectus nisl, porttitor eget, fermentum et, viverra a, odio. Sed semper. Praesent vulputate nibh eget nisi. Sed ligula. Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis.

Centred image new v4.5

Code:

<img class="align-center" src="" alt="">

Example:

Aenean vehicula posuere neque. Nam nibh lectus, laoreet non, convallis sed, vulputate consectetuer, enim. Pellentesque arcu. Vestibulum consequat nisi a ipsum vulputate vehicula. Aliquam lacus diam, ultricies vel, interdum eget, posuere non, tellus. Donec vel ligula. Sed felis. Quisque ultrices gravida pede. Mauris accumsan vulputate tellus. Phasellus condimentum bibendum dolor. Mauris sed ipsum. Phasellus in diam. Nam sapien ligula, consectetuer id, hendrerit in, cursus sed, leo. Nam tincidunt rhoncus urna. Aliquam id massa ut nibh bibendum imperdiet.

Lists

Ordered

Code:

<ol>

Example:

1. this is an example
2. of a numbered
3. (ordered) list
   1. and a second level
   2. numbered list example

Unordered

Code:

<ul>

Example:

• this is an example
• of a bulletpoint
• (unordered) list
  • and a second level
  • bulletpoint list example

Plain

Code:

<ul class="plain-list">

Example:

• this is an example
• of a plain
• (unstyled) list
  • and a second level
  • bulletpoint list example

Description

Code:

<dl>

Example:

This is a definition list term 1

Definition of term 1 here

Another definition of term 1

A sub term

With

Subs

Tables changed v4.6.1

Code:

<table>
    <thead>
        <tr>
            <th scope="col">Primary</th>
            <th scope="col">Secondary</th>
            <th scope="col">Tertiary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Roast duck</th>
            <td>Seasonal vegetables</td>
            <td>New potatoes</td>
        </tr>
        <tr>
            <th scope="row">Grilled lobster</th>
            <td>Mixed seafood</td>
            <td>Side salad</td>
        </tr>
        <tr>
            <th scope="row">Chicken dinosaurs</th>
            <td>Baked beans</td>
            <td>Waffles</td>
        </tr>
    </tbody>
</table>

Example:

Primary	Secondary	Tertiary
Roast duck	Seasonal vegetables	New potatoes
Grilled lobster	Mixed seafood	Side salad
Chicken dinosaurs	Baked beans	Waffles

Notes:

Changed at 4.6.1: Moved some listtable styling to basic tables.

List tables changed v4.6

Code:

<div class="txp-listtables">
    <table class="txp-list">
        <thead>
            <tr>
                <th class="desc" scope="col"><a href="">...</a></th>
                <th scope="col">...</th>
                <th scope="col">...</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="3">...</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <th scope="row">...</th>
                <td>...</td>
                <td>...</td>
            </tr>
            <tr>
                <th scope="row">...</th>
                <td>...</td>
                <td>...</td>
            </tr>
            <tr class="highlight">
                <th scope="row">...</th>
                <td>...</td>
                <td>...</td>
            </tr>
        </tbody>
    </table>
</div>

Example:

Notes:

Changed at 4.6: Added scope attribute to columns and rows. Each <tbody> row now has a <th> cell.

Progress meters new v4.5

Code:

<aside class="progress-meter">
    <p class="txp-accessibility">There are 4 steps to this installation process:</p>
    <ol>
        <li class="active"><strong>Add database details</strong></li>
        <li>Add config.php file</li>
        <li>Create database</li>
        <li>Go!</li>
    </ol>
</aside>

Example:

Summary/details boxes changed v4.6

Collapsible

Code:

<section class="txp-details" id="regionname1_group" aria-labelledby="regionname1_group-label">
    <h3 class="txp-summary expanded" id="regionname1_group-label"><a href="#name-of-details" role="button" aria-controls="name-of-details" aria-pressed="true">Heading (lever)</a></h3>
    <div class="toggle" id="name-of-details" role="group" aria-expanded="true">
        ...content...
    </div>
</section>

Example:

Heading (lever)

Form element within a collapsible details box i

Standard paragraph text within a collapsible details box.

• Unordered list
• items within
• a collapsible details box

1. Ordered list
2. items within
3. a collapsible details box

• Plain (unstyled) list
• items within
• a collapsible details box

Notes:

The WAI-ARIA attribute states and expanded class are managed via JavaScript. May eventually be changed to use HTML5.1 <details> and <summary> tags when browser support is better.

Non-collapsible

Code:

<section class="txp-details" id="regionname1_group" aria-labelledby="regionname1_group-label">
    <h3 id="regionname1_group-label">Heading</h3>
    <div role="group">
        ...content...
    </div>
</section>

Example:

Heading

Form element within a non-collapsible details box i

Standard paragraph text within a non-collapsible details box.

• Unordered list
• items within
• a non-collapsible details box

1. Ordered list
2. items within
3. a non-collapsible details box

• Plain (unstyled) list
• items within
• a non-collapsible details box

Notes:

This replaces the <fieldset> boxes used in Textpattern v4.5 and below.

<div class="txp-form-field">
    <div class="txp-form-field-label">Date</div>
    <div class="txp-form-field-value">
        <input class="input-year" id="year" name="year" type="text" size="4" maxlength="4" title="Year" placeholder="yyyy">
        <span role="separator">/</span>
        <input class="input-month" id="month" name="month" type="text" size="2" maxlength="2" title="Month" placeholder="mm">
        <span role="separator">/</span>
        <input class="input-day" id="day" name="day" type="text" size="2" maxlength="2" title="Day" placeholder="dd">
    </div>
</div>

<div class="txp-form-field">
    <div class="txp-form-field-label">Time</div>
    <div class="txp-form-field-value">
        <input class="input-hour" id="hour" name="hour" type="text" size="2" maxlength="2" title="Hour" placeholder="hh">
        <span role="separator">:</span>
        <input class="input-minute" id="minute" name="minute" type="text" size="2" maxlength="2" title="Minute" placeholder="mm">
        <span role="separator">:</span>
        <input class="input-second" id="second" name="second" type="text" size="2" maxlength="2" title="Second" placeholder="ss">
    </div>
</div>

<input type="checkbox" id="test_checkbox_1" name="test_checkbox_1">
<label for="test_checkbox_1">Test checkbox 1</label>

<input type="radio" id="test_radio_1" name="test_radio_group">
<label for="test_radio_1">Test radio 1</label>

<select id="" name="">
    <optgroup label="Group 1">
        <option value="1">Some text goes here</option>
        <option value="2">Another choice could be here</option>
        <option value="3">Yet another item to be chosen</option>
    </optgroup>
</select>

<select id="" name="" multiple="multiple" size="10">
    <optgroup label="Group 1">
        <option value="1">Some text goes here</option>
        <option value="2">Another choice could be here</option>
        <option value="3">Yet another item to be chosen</option>
    </optgroup>
</select>

<select disabled>
<input type="text" disabled>
<input type="button" disabled>

<input class="publish" type="submit" value="">
<input type="submit" value="Input Submit">
<input type="button" value="Input Button">
<button>Button Tag</button>
<a class="navlink" href="">Link (navlink)</a>

<button class="destroy" type="submit" title="Delete">
    <span class="ui-icon ui-icon-close">Delete</span>
</button>

<p class="nav-tertiary">
    <a class="navlink-active" href="#">Page 1</a><a class="navlink" href="#">Page 2</a><a class="navlink" href="#">Page 3</a>
</p>

Edit panes changed v4.6

Code:

<form class="txp-edit" method="post" action="#">
    <h2>Edit panel title</h2>

    <div class="txp-form-field prefs-example-1">
        <div class="txp-form-field-label"><label for="prefs_example_1">Long text</label></div>
        <div class="txp-form-field-value"><input id="prefs_example_1" name="prefs_example_1" type="text" size="32"></div>
    </div>
    <div class="txp-form-field prefs-example-2">
        <div class="txp-form-field-label"><label for="prefs_example_2">Medium text</label></div>
        <div class="txp-form-field-value"><input class="input-medium" id="prefs_example_2" name="prefs_example_2" type="text" size="8"></div>
    </div>
    <div class="txp-form-field prefs-example-3">
        <div class="txp-form-field-label"><label for="prefs_example_3">Select</label></div>
        <div class="txp-form-field-value">
            <select id="prefs_example_3" name="prefs_example_3">
                <option value="" selected> </option>
                <option value="option1">Option 1</option>
                <option value="option2">Option 2</option>
            </select>
        </div>
    </div>

    <div class="txp-form-field prefs-example-4">
        <div class="txp-form-field-label"><label for="prefs_example_4">Select multiple</label></div>
        <div class="txp-form-field-value">
            <select id="prefs_example_4" name="prefs_example_4" multiple="multiple" size="3">
                <option value="1">Some text goes here</option>
                <option value="2">Another choice could be here</option>
                <option value="3">Yet another item to be chosen</option>
                <option value="4">Yep, another item here</option>
                <option value="5">Finally, some text goes here</option>
            </select>
        </div>
    </div>
    <div class="txp-form-field prefs-example-5">
        <div class="txp-form-field-label">Radio buttons</div>
        <div class="txp-form-field-value">
            <input class="radio active" id="prefs_example_5_0" name="prefs_example_5" type="radio" value="0" checked>
            <label for="prefs_example_5_0">No</label>
            <input class="radio" id="prefs_example_5_1" name="prefs_example_5" type="radio" value="1">
            <label for="prefs_example_5_1">Yes</label>
        </div>
    </div>
    <div class="txp-form-field txp-form-field-textarea prefs-example-6">
        <div class="txp-form-field-label"><label for="prefs_example_6">Textarea</label></div>
        <div class="txp-form-field-value"><textarea id="prefs_example_6" name="prefs_example_6" cols="64" rows="4"></textarea></div>
    </div>
    ...etc...
    <p class="txp-edit-actions">
        <a class="txp-button" href="#">Cancel</a>
        <input class="publish" type="submit" value="Save">
    </p>

</form>

Example:

Edit panel title

Long text

Medium text

Select

  Option 1 Option 2

Select multiple

Some text goes here Another choice could be here Yet another item to be chosen Yep, another item here Finally, some text goes here

Radio buttons

No Yes

Textarea

Cancel

jQuery UI widgets new v4.6

Collection of all the available jQuery UI widgets.

Interactions: Draggable

Full documentation

Interactions: Resizable

Full documentation

Interactions: Selectable

1. Item 1
2. Item 2
3. Item 3
4. Item 4
5. Item 5
6. Item 6
7. Item 7

Full documentation

Interactions: Sortable

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7

Full documentation

Widgets: Accordion

Full documentation

Widgets: Autocomplete

Countries

Full documentation

Widgets: Button

Default functionality buttons

<button> button <a> button

Icon buttons

<button> icon only <button> icon on the left <button> icon on the right <button> two icons

<a> icon only <a> icon on the left <a> icon on the right <a> two icons

Full documentation

Widgets: Checkboxradio

Checkboxes (and without icons)

Dogs Cats Ferrets

Radiobuttons

Yes Maybe No

Full documentation

Widgets: Controlgroup

Controlgroup horizontal (checkboxes and select)

B I U Zoom 50% 75% 90% 100% 125% 150% 200%

Controlgroup horizontal (radiobuttons)

Off On

Controlgroup vertical

Favourite drink

Tea Coffee Tequila

Add milk Add ice Add vodka

Full documentation

Widgets: Datepicker

Full documentation

Widgets: Dialog

Open basic dialog…

Open modal dialog…

Full documentation

Widgets: Menu

• Aberdeen
• Ada
• Adamsville
• -
• Addyston
• Delphi
  • Ada
  • Saarland
  • Salzburg
• Saarland
• Salzburg
  • Delphi
    • Ada
    • Saarland
    • Salzburg
  • Delphi
    • Ada
    • Saarland
    • Salzburg
  • Perch
• Amesville
  • Ada
  • Saarland

Note: Currently jQuery UI does not support horizontal menus.

Full documentation

Widgets: Progressbar

Determinate value

Animate to random number

Indeterminate value

Full documentation

Widgets: Selectmenu

Selectmenu - standard

Select a speed Slower Slow Medium Fast Faster

Selectmenu - with option groups

Select a file jQuery.js ui.jQuery.js Some unknown file Some other file with a very long option text

Selectmenu - with disabled options

Select a number 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

Selectmenu - with disabled optgroup

Select a file 2 jQuery.js ui.jQuery.js Some unknown file Some other file

Full documentation

Widgets: Slider

Slider - horizontal

Slider - vertical

Full documentation

Widgets: Spinner

Select a value:

Full documentation

Widgets: Tabs

Full documentation

Widgets: Tooltip

Here is an example of a link with a tooltip, mouseover to reveal it.

Full documentation

Styles: Icons

Additions to standard jQuery UI icon set

Miscellaneous

Accessibility text new v4.6

Code:

<p class="txp-accessibility">...content...</p>

Notes:

Accessibility text is hidden from the page but available to screen readers as an aid to those with visual impairments. This is accomplished via CSS visibility: hidden; not via display: hidden; (which would hide the text from most screen readers too).

AJAX spinner new v4.5

Code:

<span class="spinner"></span>

Example:

Disabled non-form elements new v4.5

Code:

<p class="disabled" aria-disabled="true">...message...</p>

Example:

This is an example of an element greyed out via a .disabled class.

Notes:

This class only gives a visual impression of disabled elements, any links and/or form elements therein would still be active and clickable. To truly disable form elements use the proper disabled attribute instead, see the forms section for more information.