Theme information for buttons.
Type | CSS Class |
---|---|
Add | clearos-form-submit-add |
Delete | clearos-form-submit-delete |
Update | clearos-form-submit-update |
ClearOS buttons call the _form_submit function.
function _form_submit($name, $text, $importance, $class, $id)
The name of the button.
The text associated with the button.
The importance level of the button: 'low' or 'high'. On certain forms, you may want to highlight a particular button while downplay another. For example, when an administrator goes to edit user “sarah” and is presented with the web form to do so, the “Update” button should be more prominent than “Cancel”. Typically, this prominence is mapped to a class (e.g. button-low-importance and button-high-importance)
The class passed into the function should typically be added to the class definition in your button HTML element.
The element ID.
function _form_submit($name, $text, $importance, $class, $id) { $importance_class = ($importance === 'high') ? "clearos-form-important" : "clearos-form-unimportant"; return "<input type='submit' name='$name' id='$id' value=\"$text\" class='clearos-form-submit $class $importance_class' />\n"; }
The clearos-form-submit-* CSS classes are outlined in the following table:
Type | CSS Class |
---|---|
Add | clearos-form-submit-add |
Delete | clearos-form-submit-delete |
Update | clearos-form-submit-update |
If you want to add images to your standard buttons, you can use the specific class to meet your needs.
/* ------------------------------------------------------------------------- */ /* Buttons */ /* ------------------------------------------------------------------------- */ /* Common button class */ input.clearos-form-submit { font-size: 20pt !important; } input.clearos-form-important { color: red !important; } input.clearos-form-unimportant { color: gray !important; } /* Standard buttons */ input.clearos-form-submit-add { } input.clearos-form-submit-delete { } input.clearos-form-submit-update { } /* ... etc ... */ /* Custom button */ input.clearos-form-submit-custom { }
You can also use the button classes to implement changes via JavaScript. The following code shows the example used in a jQueryUI-based theme.
$(function(){ $(".clearos-form-submit").button(); });