Typography
This is the typography used for the Telha theme. Please realize that this is just a small example of all the things you can do easily with Telha, jQuery and the Twitter Bootstrap framework.
To customize Bootstrap's main components, upload the config.json file in the assets/bootstrap/json folder to Bootstrap Customize. For more information about using Bootstrap CSS see Bootstrap CSS, and for the components see Bootstrap Components. Specific Telha CSS can be modified in the main style.css in the assets/css folder.
Grid
Offset
Nested
Headings
h1. heading Secondary text
h2. heading Secondary text
h3. heading Secondary text
h4. heading Secondary text
h5. heading Secondary text
h6. heading Secondary text
Buttons
Every element (alerts, buttons, labels, panels, etc.) can easily be styled using the names: default, primary, success, info, warning, danger. In addition, Telha has some added styles that can be applied.
Groups
Buttons w/icons
Icons
Readily built-in icon fonts are Glyphicons, FontAwesome and Elusive Icons. You can add any icon font you wish to use or remove one if you don't.
Tables
Regular
| # | Username | First Name | Last Name |
|---|---|---|---|
| 1 | @doit | John | Doit |
| 2 | @bolt | Frank | Bolton |
| 3 | @laugh | Macy | Laughter |
Striped
| # | Username | First Name | Last Name |
|---|---|---|---|
| 1 | @doit | John | Doit |
| 2 | @bolt | Frank | Bolton |
| 3 | @laugh | Macy | Laughter |
Bordered
| # | Username | First Name | Last Name |
|---|---|---|---|
| 1 | @doit | John | Doit |
| 2 | @bolt | Frank | Bolton |
| 3 | @laugh | Macy | Laughter |
Condensed
| # | Username | First Name | Last Name |
|---|---|---|---|
| 1 | @doit | John | Doit |
| 2 | @bolt | Frank | Bolton |
| 3 | @laugh | Macy | Laughter |
Labels
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger
Tabs
Home
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Profile
Maecenas sed diam eget risus varius blandit sit amet non magna.
Action 1
Lorem ipsum dolor sit amet, risus varius blandit sit amet non magna
Action 2
Lorem ipsum dolor sit amet, risus varius blandit sit amet non magna
Pills
Home
Lorem ipsum dolor sit amet, risus varius blandit sit amet non magna
Profile
Maecenas sed diam eget risus varius blandit sit amet non magna
Messages
Maecenas sed diam eget risus varius blandit sit amet non magna
Tooltips
Popovers
Popover on bottom Dismissible popover
In assets/js/custom.js you can uncomment trigger: 'hover' to trigger on hover instead.
Alerts
Progress bars (with or without label)
List groups
- Cras justo odio14
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Lists
Telha has a collection of nicely styled CSS lists. V I E W D E M O
Panels
Panel title
Panel title
Panel title
Panel title
Panel title
Panel title
Panels with tables
Panels with tables shadowed
Panel title
| # | Username | First Name | Last Name |
|---|---|---|---|
| 1 | @doit | John | Doit |
| 2 | @bolt | Frank | Bolton |
| 3 | @laugh | Macy | Laughter |
Panel title
| # | Username | First Name | Last Name |
|---|---|---|---|
| 1 | @doit | John | Doit |
| 2 | @bolt | Frank | Bolton |
| 3 | @laugh | Macy | Laughter |
Accordions
See the FAQ page for a slightly different behavior.
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Love the theme! Ridiculously easy to work with.
VP Sales - Company
You definitely made it complete. Really best in its class.
Description lists
Vertical
- Lorem ipsum
- sit amet, consectetur adipiscing elit
- Lorem ipsum
- sit amet, consectetur adipiscing elit
Horizontal
- Lorem ipsum
- sit amet, consectetur adipiscing elit
- Lorem ipsum
- sit amet, consectetur adipiscing elit
Image frames
You can choose to display images in several ways by using one of the readily available classes.
Image rounded
Image circle
Image thumbnail
Media objects
The default media displays a media object (images, video, audio) to the left or right of a content block. The images or other media can be aligned top, middle, or bottom. The default is top aligned. You can use media inside lists which is useful for comment threads or articles.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Nested media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Notifications
Telha uses Bootstrap Alerts that can be positioned anywhere and Noty that offers 11 positions to provide you with a complete set of notifications.
Pagination
Social media buttons
Telha uses Social Buttons for Bootstrap to provide you with a complete set of social media buttons. V I E W D E M O
Modals
You can easily include modal windows anywhere you like. The modals can be using an inline text or an external file. Two examples used in Telha are:
Forgot Password? Terms of Service
Wells
To customize Bootstrap's main components, upload the config.json file in the assets/bootstrap/json folder to Bootstrap Customize. For more information about using Bootstrap CSS see Bootstrap CSS, and for the components see Bootstrap Components. Specific Telha CSS can be modified in the main style.css in the assets/css folder.