Styling Your Plugin: CSS Classes

From e107 Wiki
Jump to: navigation, search

e107 Wiki: English | Русский | Deutsch | Français | Magyar | Português | Български | Česky | Nederlands | Ελληνικά | Italiano | Norske | Polska | Slovenščina | Español | Svenska | Translate: Wiki | Page


Current Release 1.0.4 | | Download | Changelog | Forum | Plugins | Themes | RSS Feed of Latest Changes | Atom Feed of Latest Changes

Styling Your Plugin: CSS Classes
Main page > I : First Aid > II : Development > III : Administration > IV : How To's > V : Plugin Writing > VI : Theming & Shortcodes

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:

Will Format Table Borders, Margins, And Padding According To Your Theme's CSS Style Sheet
Example :
<table class='fborder'></table>
For the 'thead' or first row of your table
Example :
<td class='fcaption'></td>
for the bottom row, usually where your submit button occurs.
Example :
<td class='forumheader'></td>
For the 'tbody' or main rows of your table.
Example :
<td class='forumheader3'></td>
Used for form elements, except for checkboxes and buttons.
Example :
<input type='text' class='tbox' />
Used for buttons.
Example :
<input type='submit' class='button' value='Enter Changes' />

Optional - but not recommended for admin area.

Example :
<td class='forumheader2'></td>
Example :
<td class='forumheader4'></td>

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

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

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

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

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


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

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....