From cb83cc4e828f31cd0e33124c9526afffcc0afd2c Mon Sep 17 00:00:00 2001
From: Sebastian Castro <sebastian.castro@protonmail.com>
Date: Mon, 20 Apr 2020 12:25:24 +0200
Subject: [PATCH] Updated Creating a plugin (markdown)

---
 Creating-a-plugin.md | 48 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/Creating-a-plugin.md b/Creating-a-plugin.md
index ab8ea1d..22b540c 100644
--- a/Creating-a-plugin.md
+++ b/Creating-a-plugin.md
@@ -161,6 +161,54 @@ On windows:
 
 Now open `http://localhost:9001/apples` in your browser.
 
+# Respects some rules for styling your plugin
+
+### Basic template for a button icon in toolbar
+```html
+<li class="separator"></li> <!-- Optional -->
+<li class="ep_XXX-button">
+  <a title="">
+    <span class="buttonicon buttonicon-NAME_OF_THE_ICON"></span>
+  </a>
+</li>
+```
+See [How to add new icon to etherpad](https://github.com/ether/etherpad-lite/wiki/Adding-a-new-font-icon-to-fontawesome-etherpad)
+
+### Basic template for a popup
+```html
+<div class="popup toolbar-popup ep_XXXX-popup" id="my-popup-id">
+  <div class="popup-content">
+    <!-- YOUR CONTENT -->
+  </div>
+</div>
+```
+
+And to open/close it from javascript
+```js
+$('#my-popup-id').addClass('popup-show'); // show
+$('#my-popup-id').removeClass('popup-show'); // hide
+```
+
+Check how it is done in [ep_hyper_link](https://github.com/seballot/ep_embedded_hyperlinks2/tree/master/templates) for a simple example
+
+### Basic template for a button
+```html
+<button class="btn btn-primary ep_XXXX-btn">My Button</button>
+<button class="btn btn-default ep_XXXX-btn">My Button</button>
+```
+`btn-primary` is a colored button quite visible, use it for action like save, submit...
+`btn-default` is a more discreet button, use it for action like cancel, go back...
+
+### Insert vertical containers (such as table of content, comments...)
+
+use `eejsBlock_editorContainerBox` hook, have a look how it is done on [ep_table_of_contents](https://github.com/JohnMcLear/ep_table_of_contents/blob/master/ep.json) for a simple example
+
+### General rules
+- Do not change font property (`font-family` and `font-size`) inside your plugin, just use inherit one
+- Do not change the color or size of the text, use inherited values. If you want bigger text, use headings `h1` or `h2`
+- Try to not use absolute positioning everywhere, [flexboxes](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) are often much more efficient
+- Do not add property to the main DOM object like the `#editorcontainerbox`, or `#outerdocbody iframe`
+
 # Writing and running front-end tests for your plugin
 
 Etherpad allows you to easily create front-end tests for plugins.