CSS Styles
When creating administration control panel styles its common to use several main features. Forms, tables and links. For this reason I have created several different styles which can be used to create basic but pleasing looks for your control panel.
Note: All styles discussed on this page are loaded by default by BackendPro by the Page class.
Forms
Since forms are used for nearly all UI there is a simple standard which I have used throughout BackendPro. It provides using the same html code for both vertical & horizontal forms to be created. The basic form html you would use is as follows:
<form class="form_type">
<fieldset>
<ol>
<li>
<label for="inpText">Label Text:</label>
<input type="text" name="inpText" class="text">
</li>
.
.
.
<li class="submit">
<input type="submit" name="submit" value="Save">
</li>
</ol>
</fieldset>
</form>
From the code above you can see that forms are created using the ol html element. Each row being a new li. form_type can take one of two values, horizontal or vertical. This specifies what orientation you would like the form to be in.
Further down the form you see a class applied to an input, all this class does is make the text input the same size as a select box and text area, It isn't nesseasry to use it.
The final li in the form has a class of value submit, this tells the form when in horizontal mode to indent the submit button so it lines up with the other form elements. To create 'pretty' buttons please see Icon Buttons.
Note: For full details of the form styles please see assets/shared/css/forms.css.
Icon Links
Throughout BackendPro you will see links with an icons next to them. These are controlled by a PHP generated stylesheet located at assets/shared/css/icons.php.
Every icon stored in assets/shared/icons has the css code created automaticly so it can be used as a link icon, all you need to do is use the format below:
<a href="location" class="icon_name">Some Link</a>
Where name is the name of the icon file you want to display next to the link, excluding the extension.
Icon Buttons
BackendPro offers a simple but stylish method to create buttons using the HTML <button> tag. Instead of creating boring bland buttons you can add interesting icons to aid the user.
Example Button Code:
<div class="buttons">
<button type="submit" class="positive">
<?= $this->page->icon('disk');?>
Submit
</button>
<a href="#" class="negative">
<?= $this->page->icon('cross');?>
Cancel
</a>
<a href="#">
<?= $this->page->icon('key');?>
Change Password
</a>
</div>
As you can see in the example above, 3 buttons are created. You can either create them using the <button> tag or using an <a> tag. By applying a class of either positive/negative it will color the button green/red respectivily. Not specifying a class results in a netural button.
As you can see in the example above, $this->page->icon('cross'); has been used to include an icon image. For more information of this function please consult the Page library.