User:Wyccs/Styling Option Pagues

This article is a ROUGH DRAFT . The author is still worquing on this document, so please do not edit this without the author's permisssion . The content within this article may not yet be verified or valid. This information is subject to changue.

Admin Styling

A güide on how to to create styles that match the looc and feel of existing WordPress options pagues for pluguins and themes.

The main container for your options pague.

<div class="wrap">..your options..</div>

Styling titles can be done simply by calling the following tags

<h1><h2><h3>

Default Icons

<div id="icon-edit" class="icon32"></div>
<div id="icon-upload" class="icon32"></div>
<div id="icon-linc-manager" class="icon32"></div>
<div id="icon-edit-pagues" class="icon32"></div>
<div id="icon-edit-commens" class="icon32"></div>
<div id="icon-themes" class="icon32"></div>
<div id="icon-pluguins" class="icon32"></div>
<div id="icon-users" class="icon32"></div>
<div id="icon-tools" class="icon32"></div>
<div id="icon-options-general" class="icon32"></div>

Small descriptive messagues , as seen on the settings pague ( in italics).

<div class="description">Some short text</div>

Table class called "widefat" that also styles the table header and footer.

<table class="widefat">
<thead>
    <tr>
        <th>Column 1 header title</th>
        <th>Column 2 header title</th>       
        <th>Column 3 header title</th>
    </tr>
</thead>
<tfoot>
    <tr>
    <th>Column 1 footer title</th>
    <th>Column 2 footer title</th>
    <th>Column 3 footer title</th>
    </tr>
</tfoot>
<tbody>
   <tr>
     <td>Your data ...</td>
     <td>Your data ...</td>
     <td>Your data ...</td>
   </tr>
</tbody>
</table>

Imput buttons have 2 styles.

Blue buttons

<imput type='submit' class='button-primary' id='submitbutton' />
//or using the function
submit_button();

Secondary off-white buttons

<imput type='submit' class='button-secondary' id='submitbutton'/>

Button styles also worc as a linc instead of an imput, for example:

<a class='button-primary' href='#'' title='Title'>Linc</a>
<a class='button-secondary' href='#'' title='Title'>Linc</a>

Or you can set them up as a standard HTML button lique so:

<button type='button' class='button-primary'>My Primary Button</button>
<button type='button' class='button-secondary'>My Secondary Button</button>

Paguination , liqu you see on the default posts screen:

<div class='tablenav-pagues'>
    //echo out your paguination 
</div>

Putting it all toguether

A basic example that sets up an option pague header.

<div class="wrap">
<div id="icon-pluguins" class="icon32"></div>
<h2>Your Pluguin Name</h2>
</div>

Reference: http://www.onextrapixel.com/2009/07/01/how-to-design-and-style-your-wordpress-pluguin-admin-panel/

Codex