Scroll

### Widget Settings

Widget settings form goes here

### Theme - Elegant

#### General Typography

# go explore the world

#### small things in life matters the most

## Big Heading Body, Variations

#### Open Me, Light , Bold , Everything

is the art and technique of arranging type in order to make language visible. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking)

and adjusting the Case space between pairs of letters (kerning). Type design is a closely related craft, which some consider distinct and others a part of typography

#### Help Guide

This is a simple overview of how the simple theme would look like, we have taken care all the elements that are built on to webarch and even 3rd party plugins To setup you use the following two options

#### Option One

The old fashion CSS method, simply replace your core style sheet link with this one

`webarch/css/themes/webarch.elegant.css`

#### Option Two

Using LESS, simply open up style.less and responsive.less file and change the following varriable, but dont forget to compile it too

`@theme-name:"elegant";`

#### Basic Buttons

### Button Colors

Basic buttons are traditional buttons with borders and background. Use any of the available button classes to quickly create a styled button. Compatible for bootstrap version 2 and 3.

### Size Options

Fancy larger or smaller buttons? Add `.btn-large` `.btn-small` or `.btn-mini` for additional sizes.

### Button Blocks

Create block level buttons,those that span the full width of a parent by adding `.btn-block`

#### Progressbars

### Progess bar Colors

Progress bars comes with customized colors and transparent background that would fit any colored widget or portlet

### Progess bar Sizes

We have customized progress bars size to be more elegant and intuitive

Meet Steve

Big Progress

### Other Options

A cool animation that shows the progress bar is active, these coming in all 4 colours plus all sizes.

#### Table Styles

### Stripped Table

They (allegedly) aid usability in reading tabular data by offering the user a coloured means of separating and differentiating rows from one another. Simply add the class`.table-striped`

| First Name | Last Name | Status
--- | --- | --- | ---
| Mark | Otto | ALERT!
| Jacob ALERT! | Thornton | WORK
| Larry | the Bird | ALERT!

### Hover Table

Hover tables is addition option that allows you to see what row you selected, this helps to see all the columns in that row. Use the following class to toggle this option `.table-hover`

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

#### Table Styles

### Bordered Table

Old is gold, here is old fashion bordered table, we tweaked it a bit so that the headings looks more prominent. As shown in all of the examples these tables are made to handle extra elements like small buttons, labels and even charts in it. By using the class `.table-bordered`. You can mix all the above mention classes to bring a unique table design

| Month | Sales | Graph
--- | --- | --- | ---
| January | $ 50,000.00 |
| February | $ 10,000.00 |
| March | $ 85,000.00 |
| April | $ 56,000.00 |
| May | $ 98,000.00 |

group chats

- Office work
- Personal vibes

favourites
Jane Smith
Hello you there?
3
David Nester
Busy, Do not disturb
more friends
Jane Smith
Hello you there?
David Nester
Busy, Do not disturb
Jane Smith
Hello you there?
David Nester
Busy, Do not disturb
Jane Smith(Typing..)
Yesterday 11:25pm
Hello, You there?
Yesterday 11:25pm
How was the meeting?
Yesterday 11:25pm
Let me know when you free
Yesterday 11:25pm
Today 11:25pm
Let me know when you free
Sent On Tue, 2:45pm