So i decided a while ago i would make a guide that teaches people how to make an epic profile. I cannot simply put every single html trick in here all at once, every day from now this tutorial will be updated with new tricks and tips. Please note you can use these tricks in your forum posts and thread structures to, they aren't just for your profile.
We will start off with buttons because they are one of the best features of bootstrap, in my opinion.
<a class="btn">Title</a>
Your normal button can be manipulated to make some cool looking buttons that can do a range of things. By manipulating the class and adding attributes we can make the normal button look a bit better.
| Button | Addable Attributes | Description | Class="" |
|---|---|---|---|
| Default | Zilch |
Standard boring Buttont | btn |
| URL | href="Insert URL" |
Allows a link to be in a button and when clicked will take the user to the designated link. | btn |
| Active | Zilch |
Allows a link to be in a button and when clicked will take the user to the designated link. | btn active |
| Button 1 Button 2 | Zilch |
Allows two buttons to be joined together in a group. | btn-group |
| Large | Zilch |
Makes the button large. | btn-large |
| Small | Zilch |
Makes the button small. | btn-small |
| Block | Zilch |
Makes the button a long block. | btn-block |
| Disabled | disabled="disabled" |
Makes the button disabled, you cannot interact with it. | btn |
Buttons can also have "theme's" or styled classes to make the button more colourful.
| Button | class="" | Colour |
|---|---|---|
| Default | btn |
Gray |
| Primary | btn btn-primary |
Blue |
| Info | btn btn-info |
Light Blue |
| Success | btn btn-success |
Green |
| Warning | btn btn-warning |
Orange/Yellow |
| Danger | btn btn-danger |
Red |
| Inverse | btn btn-inverse |
Black |
As i mentioned above in the introduction, i will keep adding more stuff to the guide as its just to much to cover if i do it all at once. I will be frequently updating the guide and i am open to suggestions. Next up i will cover how to use Icons and how to incorporate columns so that everything is aligned.
For Icons Avicus uses Font Awesome. http://fortawesome.github.io/Font-Awesome/3.2.1/. Icons can be incorporated in both your profile and in your posts. You can manipulate their size, incorporate them into other elements such as buttons and you can do a lot more.
For a full list of all icons go to, http://fortawesome.github.io/Font-Awesome/3.2.1/icons/.
<i class="icon-comment-alt"></i>| Icon | class="" | Size |
|---|---|---|
icon-large |
Largest | |
icon-2x |
Twice the size. | |
icon-3x |
Three times the size. | |
icon-4x |
Four times the size. |
| Icon | class="" | Angle |
|---|---|---|
icon-rotate-90 |
90 Degrees | |
icon-rotate-180 |
180 Degrees | |
icon-rotate-270 |
270 Degrees | |
icon-flip-horizontal |
Horizontal | |
icon-flip-vertical |
Vertical |
Labels can be used in your profile and do look quite nice. I personally have no clue how i would use them but each is to their own.
<| Label | class="" | Colour |
|---|---|---|
| Primary Label | class="label label-primary" |
Primary/Blue |
| Success Label | class="label label-success" |
Success/Green |
| Info Label | class="label label-info" |
Info/Light Blue |
| Warning Label | class="label label-warning" |
Warning/Orange |
| Danger Label | class="label label-danger" |
Danger/Red |
If you want to have a label with any colours other than the ones above then just insert a style tag right next to the class tag like so,
style="background-color: #COLOURCODE;"For a reliable list of html colours go to http://www.w3schools.com/html/html_colors.asp .
Nice work, just one problem, you have to insert an url like https://avicus.net, not only Avicus.net. Because it will think, it's an folder on the webserver "https://avicus.net/forums/Avicus.net"