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
You can change the reference to the bootstrap and the image folder with the less variables
@bootstrapPath witch are declared in the
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-after in order to enjoy some space between the text and the icons.
You can use the class
.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-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-warning class on the
For using it, make sure the two carousel's are well connected as on the example with the different id and href.