UI Customization With Plesk Extensions - Plesk

UI Customization With Plesk Extensions

A general way to customize a product is to use skins. After a new skin is applied, customers get a new look and feel of the product.

Sometimes you need deeper customization, such as adding your own control buttons, menus, etc. In Plesk, to meet this demand, you can use custom buttons (more details at Administrator’s Guide).

But even customization with custom buttons is not always enough. Another way of advanced UI customization is to use new Plesk SDK APIs. Starting from Plesk 11.5, it is possible to create an extension that provides global.js and global.css files. These files are included into all pages of the control panel. Using JavaScript you can do almost everything you want with a rendered screen: reorder items, hide or introduce new controls. For example, a hosting provider may want to add their own bar showing the links to their support or billing system at the top of the screen in the Hosting Panel. Below is the example of such a bar:

This bar was created with the help of an additional extension. The extension was uploaded to the Panel and provides this functionality. The extension is a zip archive. Its structure is the following:
  • htdocs
    • global.css
    • global.js
  • meta.xml
The globals.js file contains a rather simple JavaScript code:
if ('undefined' != typeof Jsw) {
    Jsw.onReady(function() {
        if (!$$('body').first().hasClassName('sid-main')) {

        var panel = new Element('div', {
            'class': 'custom-provider-header'

            '<div class="custom-provider-container">' +

        $('header-wrapper').insert({ before: panel });
The purpose of this code is to create and insert a new panel at the top of the Plesk Panel screens. The custom panel is created with the help of HTML markup. To make the Panel look good, add necessary CSS styles to the global.css file. Thus, you can create your own bar within half an hour and make the Panel more attractive for your customers. For additional details, see Extensions SDK documentation at Plesk Extensions Guide. You can also see the source code of the extension described in this article: provider-panel-1.0-1.zip

How useful was this post?

Click on a heart to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

Oh no, sorry about that!

Let us know how we can do better below

Tell us how we can improve this post?


Alexei has been part of the Plesk team since 2005 and is the Plesk Core team's Unit Manager. He's passionate about programming, product development and driving tech teams.
    Showing 2 comments
    • Avatar
      Nikolay Vizovitin

      Alexey, maybe you could explain what ‘Jsw’ object is? Can I use it in extensions and if so, where its documentation can be found?

      • Avatar
        Alexei Yuzhakov

        Jsw is Plesk UI framework. It’s not recommended to rely on it’s parts, ’cause they can be changed in the future versions. But Jsw.onReady probably will be not changed w/o significant reason. It’s similar to jQuery’s $(function() { }) handler that fires on document ready state.

    Leave a Comment

    Start typing and press Enter to search