Administry
Logged in as Admin | Settings | Logout
You have 1 new message!

Styles → Basics

Text

Sizes, alignments, styles,...

Heading H2

Heading H3

Heading H4

Heading H5

 

<p class="ta-left">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et risus. Maecenas non nunc. Proin eleifend viverra sapien. Donec id augue. Duis erat nunc, volutpat a, bibendum quis, placerat vitae, enim. Etiam consectetur, velit in viverra tempus, urna augue sollicitudin tellus, vitae interdum arcu mi at est.

<p class="ta-justify">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et risus. Maecenas non nunc. Proin eleifend viverra sapien. Donec id augue. Duis erat nunc, volutpat a, bibendum quis, placerat vitae, enim. Etiam consectetur, velit in viverra tempus, urna augue sollicitudin tellus, vitae interdum arcu mi at est.

<p class="ta-right">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et risus. Maecenas non nunc. Proin eleifend viverra sapien. Donec id augue. Duis erat nunc, volutpat a, bibendum quis, placerat vitae, enim. Etiam consectetur, velit in viverra tempus, urna augue sollicitudin tellus, vitae interdum arcu mi at est.

Lorem ipsum dolor sit amet <strong>

Lorem ipsum dolor sit amet <em>

Lorem ipsum dolor sit amet <abbr>

Lorem ipsum dolor sit amet <code>

Lorem ipsum dolor sit amet <small>

Lorem ipsum dolor sit amet <mark>

Lorem ipsum dolor sit amet <del>

Lorem ipsum dolor sit amet <a>

A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away. Antoine De Saint-Exupery <q><cite></cite></q>

 

<ul><li>
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
      • Lorem ipsum dolor sit amet
      • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
    • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
<ol><li>
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet
  3. Lorem ipsum dolor sit amet
    1. Lorem ipsum dolor sit amet
    2. Lorem ipsum dolor sit amet
    3. Lorem ipsum dolor sit amet
      1. Lorem ipsum dolor sit amet
      2. Lorem ipsum dolor sit amet
    4. Lorem ipsum dolor sit amet
    5. Lorem ipsum dolor sit amet
  4. Lorem ipsum dolor sit amet
  5. Lorem ipsum dolor sit amet
<dl><dt><dd>
Lorem ipsum
Lorem ipsum dolor sit amet.
Lorem ipsum
Lorem ipsum dolor sit amet.
Lorem ipsum
Lorem ipsum dolor sit amet.

Progress bars

Animated progress bars
Sample usage:
<div class="progress progress-blue">
<span><b></b></span>
</div>

<script>Administry.progress('progress', 10, 100);</script>

HTML5 Video

Video support

More about <video> formats and browser supports at http://dev.opera.com/articles/view/opera-supports-webm-video/

Messages

Info, warning, error and success boxes
Box sample
Info box sample
Warning box sample
Error box sample
  1. Credit card number entered is invalid
  2. Credit card verification number must be a valid number
Success box sample
Sample usage: <div class="box box-info">Message</div>

Labels

Identification labels
Red Green Blue Purple Gray Yellow Gold Silver Black

 

Sample usage: <span class="label label-silver">Message</span>

Buttons

Sample buttons w/ or w/o icons
Sample  Ok  Cancel  Add New

 

Red Button Green Button Blue Button

 

Sample usage: <a href="#" class="btn"><span class="icon icon-ok">&nbsp;</span>Button text</a>

 

Tabs

A set of containers

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.

Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.

Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.

Tables

Arranging data into rows and columns of cells
<table class="stylized">
Basic table (full width)
Header 1 Header 2 Header 3 Header 4 Header 5
Data 1 Data 2 Data 3 Data 4 Data 5
Highlighted data 1 Highlighted data 2 Highlighted data 3 Highlighted data 4 Highlighted data 5
Data 1 Data 2 Data 3 Data 4 Data 5
Data 1 Data 2 Data 3 Data 4 Data 5
Data 1 Data 2 Data 3 Data 4 Data 5
Table footer
<table class="no-style">
No style applied
Header 1 Header 2 Header 3 Header 4 Header 5
Data 1 Data 2 Data 3 Data 4 Data 5
Data 1 Data 2 Data 3 Data 4 Data 5
Data 1 Data 2 Data 3 Data 4 Data 5
Data 1 Data 2 Data 3 Data 4 Data 5
footer 1 footer 2 footer 3 footer 4 footer 5

To see the detailed presentation click here.

Content boxes

Grouping various content
Status: opened

Nunc tincidunt

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.

Users 11
Posts 22
Comments 332
Status: closed

Proin dolor

Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam.

Table 1.
Header 1 Header 2 Header 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
Data 1 Data 2 Data 3
footer 1 footer 2 footer 3

Popup boxes

A quick way to show data without reloading the entire page

Inline content (div#foobar)
Remote content (ajaxdemo.html) · Remote modal content (ajaxdemo.html)
YouTube Video
Gallery Img 1 · Gallery Img 2 · Gallery Img 3

For more detailed samples and demos visit nyroModal homepage.

Forms

Selecting different kinds of user input

To see the detailed presentation click here.

 

^ scroll to top