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

logo_wiki.png

Current Release 1.0.4 | e107.org | 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:

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