Source code in Qf2StyleSm.css

To see how this is used return to this tutorial index.

/* CSS to use with QuickForm2 so that it looks similar to what
 * you get from the original QuickForm.
 * Copyright (c) 2009, Parliament Hill Computers (www.phcomp.co.uk). Author: Alain D D Williams (addw@phcomp.co.uk).
 * You may used this file as the basis your own (or organisation's/company's) project (under whatever
 * licence that you see fit), but may not claim ownership or copyright of the substantially unmodified file.
 * This file is made available in the hope that it is useful, there is no warranty at all, use at your own risk.
 *
 * This differs slightly from the non smarty version. This is because the demo template Qf2ValidTypes.tpl
 * generates a label of   if one is not set. Thus submit/reset/button do not need a special left margin.
 *
 * SCCS: @(#)Qf2StyleSm.css	1.1 12/18/09 16:01:21
 */

span.required {
    /* Required asterisks (next to label) in red */
    color:#ff0000;
}
div.reqnote {
    /* Make the required note line up with input lables */
    display:block; float:left; clear:both; text-align:right; width:30%;
    font-size:80%;
}
div.reqnote em {
    /* Asterisk on required not to be in red */
    color:#ff0000;
}
div.row {
    /* Make input fields start on a new line */
    clear: both;
}
div.error {
    color:red;
}
label.element {
    display:block; text-align:right; float:left; width:30%; padding-right:2%;
}
fieldset {
    clear: both;
}
.element input {
    display:block; float:left; color:#0000ff;
}
input[type="submit"], input[type="reset"], button {
    /* Submit and reset buttons */
    width:10em;    /* Without this the button is as wide as the text in it needs */

    /* The margin-left is not needed since the template generates something in the label.
     */
}
.notes {
    clear:both;
    padding-top:10px;
}
br + input, br + select {
    /* An error message is after the label, so insert some indent
     * on the input so that it lines up with the others.
     */
    margin-left:32%;
}


Return to this tutorial index.