Styling Your Plugin: CSS Classes

This is a work in progress...

In order to make sure that your plugin looks good no matter which theme you use, make sure that you use the following CSS Classes:

fborder 

Will Format Table Borders, Margins, And Padding According To Your Theme's CSS Style Sheet

Example :

<table class='fborder'></table>

fcaption 

For the 'thead' or first row of your table

Example :

<td class='fcaption'></td>

forumheader 

for the bottom row, usually where your submit button occurs.

Example :

<td class='forumheader'></td>

forumheader3 

For the 'tbody' or main rows of your table.

Example :

<td class='forumheader3'></td>

tbox 

Used for form elements, except for checkboxes and buttons.

Example :

<input type='text' class='tbox' />

button 

Used for buttons.

Example :

<input type='submit' class='button' value='Enter Changes' />

Optional - but not recommended for admin area.

forumheader2 

(optional)

Example :

<td class='forumheader2'></td>

forumheader4 

(optional)

Example :

<td class='forumheader4'></td>

Here's a full example of how your form might look :

$text = "
<table class ='fborder' style='".ADMIN_WIDTH."'>

  <tr>
  <td class ='fcaption'>Title of Column 1</td>
 <td class ='fcaption'>Title of Column 2</td>
  </tr>

  <tr>
  <td class ='forumheader3'>something</td>
  <td class ='forumheader3'><input type='text' class='tbox' name='input_field' value='something' /></td>
  </tr>

  <tr>
  <td class='forumheader' style='text-align:center'>
  <input type='submit' class='button' value='add' />
  </td>
  </tr>

  </table>";

You can see the above code in action here....

http://e107shop.com/plugins/preview_css_styles/index.php

We have created a plugin for plugin-developers to display all those classes in once. It has a front side and an admin side, but both show the styles in the current used theme style. Not sure if it comes in handy for you, but at least it's something i wanted to see quickly wihout the need spitting the css files.

You can download the plugin from here....

http://e107shop.com/download.php?view.19