diff --git a/doc/plugins.md b/doc/plugins.md
index 0dccbe848..ae3ef954a 100644
--- a/doc/plugins.md
+++ b/doc/plugins.md
@@ -47,6 +47,22 @@ You can omit the `FUNCTIONNAME` part, if the exported function has got the same
 ### Client hooks and server hooks
 There are server hooks, which will be executed on the server (e.g. `expressCreateServer`), and there are client hooks, which are executed on the client (e.g. `acePopulateDomLine`). Be sure to not make assumptions about the environment your code is running in, e.g. don't try to access `process`, if you know your code will be run on the client, and likewise, don't try to access `window` on the server...
 
+### Styling
+When you install a client-side plugin (e.g. one that implements at least one client-side hook), the plugin name is added to the `class` attribute of the div `#editorcontainerbox` in the main window.
+This gives you the opportunity of tuning the appearence of the main UI in your plugin.
+
+For example, this is the markup with no plugins installed:
+```html
+<div id="editorcontainerbox" class="">
+```
+
+and this is the contents after installing `someplugin`:
+```html
+<div id="editorcontainerbox" class="ep_someplugin">
+```
+
+This feature was introduced in Etherpad **1.8**.
+
 ### Parts
 As your plugins become more and more complex, you will find yourself in the need to manage dependencies between plugins. E.g. you want the hooks of a certain plugin to be executed before (or after) yours. You can also manage these dependencies in your plugin definition file `ep.json`:
 
diff --git a/src/static/js/pluginfw/hooks.js b/src/static/js/pluginfw/hooks.js
index cf5fcc4eb..81f56f965 100644
--- a/src/static/js/pluginfw/hooks.js
+++ b/src/static/js/pluginfw/hooks.js
@@ -125,3 +125,29 @@ exports.callAllStr = function(hook_name, args, sep, pre, post) {
   }
   return newCallhooks.join(sep || "");
 }
+
+/*
+ * Returns an array containing the names of the installed client-side plugins
+ *
+ * If no client-side plugins are installed, returns an empty array.
+ * Duplicate names are always discarded.
+ *
+ * A client-side plugin is a plugin that implements at least one client_hook
+ *
+ * EXAMPLE:
+ *   No plugins:   []
+ *   Some plugins: [ 'ep_adminpads', 'ep_add_buttons', 'ep_activepads' ]
+ */
+exports.clientPluginNames = function() {
+  if (!(exports.plugins)) {
+    return [];
+  }
+
+  var client_plugin_names = [...new Set(
+    exports.plugins.parts
+      .filter(part => part.hasOwnProperty('client_hooks'))
+      .map(part => part['plugin'])
+  )];
+
+  return client_plugin_names;
+}
diff --git a/src/templates/pad.html b/src/templates/pad.html
index e2dc89789..a0b401d59 100644
--- a/src/templates/pad.html
+++ b/src/templates/pad.html
@@ -100,7 +100,7 @@
             <% e.end_block(); %>
         </div>
 
-        <div id="editorcontainerbox">
+        <div id="editorcontainerbox" class="<%=hooks.clientPluginNames().join(' '); %>">
             <div id="editorcontainer" class="editorcontainer"></div>
             <div id="editorloadingbox">
               <div id="passwordRequired">