All this GUI is made as an Bootstrap add-on. Using here the version 3.1.1.
To enjoy the GUI, you just need to include the style.css
stylesheet to your template. It already contains bootstrap 3.1.1 and the special Quo Vadis GUI style.
You can also use the less stylesheet available in the /less
folder. It not contains Bootstrap witch is essential and is available in the /vendor
folder.
You can change the reference to the bootstrap and the image folder with the less variables @imagesPath
@bootstrapPath
witch are declared in the style.less
file
#c9c9c9, #999999
#494949, #313131
#029D9F, #008185
#FFAB3F, #FF9000
#E21A65, #B40A4A
Buttons are using the class .btn
from bootstrap. This example is without any theming, as you will see next.
"Default" buttons are based on the class .btn-default
from bootstrap
"Call to action" buttons are based on the class .btn-success
from bootstrap
In case of icons like Glyphicons, Font Awesome or any images, You can use the class .btn-icon-before
.btn-icon-after
in order to enjoy some space between the text and the icons.
Buttons without btn-icon class
You can use the class .btn-lg
.btn-sm
.btn-xs
in order to enjoy button sizes.
Wrap your buttons in a div.btn-group
for button groups
For custom checkboxes & radios, make sure that the input has for direct sibling its label then add .custom-checkbox
.custom-radio
class and we're done.
Switchers works exactly the same than custom checkboxes & radio. Just add .switcher
class. You can also use the .checkbox-to-switcher
for having a checkbox on desktops and a switcher on tablets and phones.
Status input use the has-success
, has-error
, has-warning
class on the .form-group
element.
For using it, make sure the two carousel's are well connected as on the example with the different id and href.
Your bank info are and will still confidential.*Fields witch has to be filled in.