Styling QCubed applications

When I was first learning to use QCubed, I had a hard time figuring out how to apply styling in the same manner I did when I when I created pages by hand. Since Qcubed created controls, how was I supposed to apply a style to an individual element?

Turns out it is rather easy. So, in this short tutorial, I will tell you how to make detailed styling changes to your QCubed applications.

The first thing you should remember is that the end result of a QCubed application is the same as any other page: html and javascript. So the same rules apply. If you want to use a stylesheet, you place a link tag to that sheet in the head of the page. Chances are, your head tag is located in a header include file and is included in your template. If this is not the way you have your project organized, I highly recommend doing so. This will enable you to make changes to the head portion of your entire project without having to change every page. The same applies to the footer.

Next is how to style your individual elements. Left to its own devices, QCubed will create its own ids for the controls you create. However, it is possible to apply your own id. You can do so by using the second parameter of your control:

<?php

 $objBox = new QListBox($this, 'myID');

?>

Just keep in mind that the id must be unique; two QControls cannot have the same id in a QForm.

Now, what if you want to use a style class? Just as easy. All controls have a property called CssClass. By setting this, the class attribute will be added to the control's html.

<?php

 $objBox->CssClass = 'myClass';

?>

If you prefer, you can use your view files to set a CssClass?, so instead we add the class when rendering the control like this

<?php

 $_FORM->objBox->Render("CssClass='myClass'");

?>

And that is it. You can style all you like using your css stylesheets!