Welcome back, Admin
This might be your welcoming message, and this is your test dashboard. Scroll down the page in order to see examples of all pre-styled site elements such as tables, lists and forms.
Enjoy, and please, do not steal the code, or my guiding spirits will make sure you will be smashed and thrown into abbyss.
This is a data box, it might contain some useful stuff, such as your website stats:
- Users23
- Posts34
- Comments89
Notice how links within notice boxes (for data, error, notice and success) are being displayed.
And this is some kind of a notice message you should pay attention to, but to be honest, I have no idea what example text should I put here :P. Anyway, there are two columns designed for dashboard, or homepage of your app panel. They are clean and just awesome!
Quick Links
You can use simple .box class with additional .pleft class to create a quick links section. I will use it to create quick links to different elements on this page using anchors.
So called .p* classes can be used to add attional padding to elements on top, bottom, left or right.
H3 headline can be used within #content box.
Below you see examples of three notice boxes, for positive, negative and neutral message.
This is a success...
We are all doomed...
Easy big fella, just kidding...
Time to show you some tables
Designing good looking tables isn't an easy task, so forgive me what you see below :P
| Title | Author | Description | Views | Status | Action |
|---|---|---|---|---|---|
| Lorem Ipsum | Username | Lorem ipsum dolor sit amet, | 13 | true | editdelete |
| Lorem Ipsum | Username | Lorem ipsum dolor sit amet, | 13 | true | editdelete |
| Lorem Ipsum | Username | Lorem ipsum dolor sit amet, | 13 | true | editdelete |
| Lorem Ipsum | Username | Lorem ipsum dolor sit amet, | 13 | true | editdelete |
| Lorem Ipsum | Username | Lorem ipsum dolor sit amet, | 13 | true | editdelete |
Forms and input fields
Example set of images
Check out my themes! Umm, I mean - take a look how the images are being styled. Notice the margin after 4th image - it is using .mright class to create additional space.
